[Typescsript] 타입스크립트 올인원:Part-1(2)

4. 튜플 사용 시 주의사항

let tuple: [string, number] = ["1", 1];
// tuple[2] = 3;  // error
tuple.push(3);

❗️길이가 2로 고정된 것처럼 보이지만 정의된 길이(2)를 벗어난 인덱스 접근은 에러를 반환하지만, 배열 메서드인 push는 허용되는 한계가 있다.

💡 대처법

// 1. readonly 튜플 사용
const readonlyTuple: readonly [string, number] = ["1", 1];
readonlyTuple.push(3); // error

// 2. as const 사용
const constTuple = ["1", 1] as const;
constTuple.push(3); // error

// 3. 커스텀 타입 생성
type StrictTuple<T extends any[]> = {
  readonly length: T['length'];
  readonly [K in keyof T]: T[K];
};

5. Enum

const enum EDirection {
  Up = 3,
  Down = 4,
  Left = 5,
  Right = 6,
}

const ODirection = {
  Up: 3,
  Down: 4,
  Left: 5,
  Right: 6,
} as const;
type ODirection = (typeof ODirection)[keyof typeof ODirection];

const a = EDirection.Left; // 4
const b = ODirection.Left; // 5

 

type ODirection = (typeof ODircetion)[keyof typeof ODircetion]; 부분 이해가 잘 안되서 추가로 적겠습니다.

type ODirection = (typeof ODircetion)[keyof typeof ODircetion];

typeof ODircetion은 다음과 같은 타입을 반환
{
  readonly UP: 1;
  readonly DOWN: 2;
  readonly LEFT: 3;
  readonly RIGHT: 4;
}

keyof typeof ODircetion은 다음을 반환
"UP" | "DOWN" | "LEFT" | "RIGHT"

 

⚠️ Enum은 변수들을 하나의 그룹으로 묶고 싶을 때 자주 사용하지만 Tree-shaking 관점에서 사용하지 않고 Union Types을 권장하는 글도 있다. (하단 링크 참조)

TypeScript enum을 사용하지 않는 게 좋은 이유를 Tree-shaking 관점에서 소개합니다.

 

6. keyof, typeof

// 1. as const로 객체 선언
const obj = { a: "123", b: "hello", c: "world" } as const;

// 2. 객체의 키들의 유니온 타입 얻기
type Keys = keyof typeof obj;  // "a" | "b" | "c"

// 3. 객체의 값들의 유니온 타입 얻기
type Values = typeof obj[keyof typeof obj];  // "123" | "hello" | "world"

 

6-1. keyof

객체 타입의 키들을 유니온 타입으로 추출

type Keys = keyof typeof obj;  // "a" | "b" | "c"

 

6-2. typeof

값의 타입을 얻음

type ObjType = typeof obj;  
// { readonly a: "123", readonly b: "hello", readonly c: "world" }

 

6-3. typeof obj[keyof typeof obj]

// keyof typeof obj는 "a" | "b" | "c"
// obj["a" | "b" | "c"]는 모든 가능한 값을 유니온으로 만듦
type Values = typeof obj[keyof typeof obj];  // "123" | "hello" | "world"

 

7. union, intersection

union: 하나만 있어도 된다.

type B = { hello: "world" } | { zero: "cho" };
const b: B = { hello: "world", zero: "cho" };

 

intersection: 모든 속성이 다 있어야 한다.

type A = { hello: "world" } & { zero: "cho" };
const a: A = { hello: "world", zero: "cho" };