Typescript-Challenge 2

객체 타입

const player: object = {
  name: "nico"
}
player.name();// object에 name이라는 요소가 없다.

객체 타입 object에 name이 없다.

// 오브젝트에 네임 요소 추가
const player: {
  name: string,
  age?: number
} = {
  name: "nico"
}

age?는 age라는 요소가 있어도 되고 없어도 된다는 의미.

객체 타입 재활용

type Player = {
  name: string,
  age?: number
}

const nico: Player = {
  name: "Nico"
}
const ken: Player = {
  name: "Ken",
  age: 43
}

객체 타입을 재활용함으로써 코드가 깔끔해진다.

type Age = number;
type Player = {
  name: string,
  age?: Age
}

const nico: Player = {
  name: "Nico"
}
const ken: Player = {
  name: "Ken",
  age: 43
}

객체 타입에 타입을 할당한 다른 변수를 넣어줘도 되지만 코드가 clean & clear 할때까지만 방식을 쓴다.

return 값 타입

function playerMaker(name: string) {
  return {
    name
  }
}

const nico = playerMaker("nico");
nico.age = 12;  // age 요소가 없다.

어떻게 타입스크립트에게 playerMaker.age를 알려줄까?

function playerMaker(name: string): Player {
  return {
    name
  }
}

const nico = playerMaker("nico");
nico.age = 12; 

함수에 Player 변수를 알려주면 된다.

readonly 속성

type Age = number;
type Player = {
  readonly name: string,
  age?: Age
}

const ken: Player = {
  name: "Ken",
  age: 43
}
ken.name = "john"  // 변경 불가

readonly 속성을 붙여주면 값을 읽기만 가능하고 변경은 불가하다.

tuple

const player: [string, number, boolean] = ["nico", 1, true]

player[0] = 1  // 타입이 일치하지 않아서 변경 불가하다.

항상 정해진 갯수의 요소를 가져야 하는 배열을 지정할 수 있다. 그 갯수와 타입에 맞는 순서도 일치해야 한다.

그 외 타입

const a: undefined = undefined;
const b: null = null;
const c: any = 10;

any는 타입스크립트로부터 빠져나오고 싶을 때 쓰는 타입이다. any를 쓰면 자바스크립트로 나오게 되고 타입스크립트의 보호를 떠나게 된다.

unknown

let a: unknown

만약 API로부터 응답을 받는데 어떤 타입인지 모르는 경우, 변수의 타입을 미리 알지 못하는 경우 unknown을 쓴다. 그럼 타입스크립트로부터 보호를 받게된다. 그리고서 타입스크립트가 타입 확인 작업을 강제로 시킨다.

void

function hello() {
  console.log('hi')
}

// function hello(): void

void는 아무것도 return하지 않는 함수를 대상으로 사용된다. 보통 void를 따로 지정해줄 필요는 없다.

never

function hello(): never {
  return "x"  // 이 줄에 에러뜬다.
}

function hello(): never {
  throw new Error("xxx")  // 에러가 뜨지 않는다.
}

never는 함수가 절대 return하지 않을 때 발생한다. 그리고 두가지 타입일때도 쓰인다.

function hello(name: string | number) {
  if(typeof name === "string") {
    name  // string
  } else if(typeof name === "number") {
    name  // number
  } else {
    name  // never, 여기 코드는 절대 실행되지 않아야 한다는 의미다.
  }