[ TS ] What is TypeScript?

🔴  Why not JavaScript

 

// 이상해!!
[1, 2, 3, 4] + false
// '1, 2, 3, 4false'

// 이상해!!
function divide(a, b) {
  return a / b;
}
divide("xxxxx");
// NaN => 왜 Error를 출력하지 않지?

 

🟠  Implicit Types vs Explicit Types

 

let a = "hello"
let b : boolean = false  // But, TypeScript가 추론하도록 하는게 낫다.

 

🟡  Types of TS part One

 

type Name = string;
type Age = number;
type Player = {
  name: Name,
  age?: Age  // 선택적 타입
}

const player1 : Player = {
  name: "player1"
}
const player2 : Player = {
  name: "player2",
  age: 28
}
// using normal function
function playerMaker(name: string) : Player {
  return {
    name
  }
}
// using arrow funciton
const playerMaker = (name: string) : Player => ({ name });

const player3 = playerMaker("player3");
player3.age = 28

 

🟢  Types of TS part Two

⚪  readonly

 

type Name = string;
type Age = number;
type Player = {
  readonly name: Name,
  age?: Age
}
const playerMaker = (name: string) : Player => ({ name })
const ryong = playerMaker("ryong");

ryong.name = "jeong";  // Error!

 

const numbers: readonly number[] = [1, 2, 3, 4];
numbers.push(1);  // Error

⚪  tuple

 

// Tuple :: 항상 정해진 갯수의 요소를 가져야 하는 array를 지정
const player: [string, number, boolean] = ["ryong", 28, true];

player[0] = 1;  // ERROR

 

const player: readonly [string, number, boolean] = ["ryong", 28, true];

player[0] = "hi";  // ERROR

⚪  any

 

// any :: TypeScript 보호장치로부터 빠져나오기
const a : any[] = [1, 2, 3, 4]
const b : any = true

a + b  // Not Error

 

🔵  Types of TS part Three

⚪  unknown

 

// API로부터 응답을 받는데 어떤 타입인지 모를 때는 unknown를 사용
let a: unknown;

let b = a + 1;  // ERROR
if (typeof a === 'number') {
  // 코드에서 a의 타입이 number인지 확인했기 때문
  let b = a + 1;
}

let c = a.toUpperCase();  // ERROR
if (typeof a === 'string') {
  let b = a.toUpperCase();
}

⚪  void

 

// void :: 아무것도 return 하지 않는 함수를 대상
function hello() {
  console.log('x');
}
const a = hello();
a.toUpperCase();  // ERROR because of 'void'

⚪  never

 

// never :: 함수가 절대 return 하지 않을 때 발생
// 예를 들어 함수에서 exception이 발생할 때
function hello(): never {
  // return 'X';  // ERROR
  throw new Error("X");
}

function hello(name: string|number) {
  if (typeof name === 'string') {
    name  // name: string
  } else if (typeof name === 'number') {
    name // name: number
  } else {
    name  // name: never
  }
}