TypeScript 배우기 - 8. keyof 타입 연산자

오늘은 TypeScript의 keyof 타입 연산자에 대해 알아볼 것입니다. 어렵지 않으므로 빠르게 이해해 봅시다!

// 객체 타입 Point 생성
type Point = { x: number, y: number };
// Point의 속성에 의해 "x" | "y" 문자열 리터럴 타입이 됨
type P = keyof Point;

const a:P = "x";
const b:P = "y";
const c:P = "m";
>            ~ 
> Type '"m"' is not assignable to type 'keyof Point'.

keyof 연산자는 객체 타입의 속성 (그리고 함수 이름)을 유니온 타입으로 조합하여 생성합니다.

이 기능은 편집기의 기능을 사용할 수 있으므로 강력합니다.

타입에 string 또는 number 인덱스 서명이 있는 경우 keyof는 이름 대신 해당 타입을 반환합니다.

type Arrayish = { [n: number]: unknown };
type A = keyof Arrayish;  // number

type Mapish = { [k: string]: boolean };
type M = keyof Mapish;  // string | number

첫번째 Arrayish는 number 인덱서이므로 keyof는 number를 반환합니다. 두번째 Mapish는 string 인덱서이지만 JavaScript에서 obj[0]과 obj["0"]는 동일하게 동작하므로 string이 아닌 string | number 유니온 타입이 됩니다.

keyof 타입은 매핑된 타입에서 유용하게 사용됩니다.

// 타입의 프로퍼티에서 'readonly' 속성을 제거합니다
type CreateMutable<Type> = {
  -readonly [Property in keyof Type]: Type[Property];
};

type LockedAccount = {
  readonly id: string;
  readonly name: string;
};

type UnlockedAccount = CreateMutable<LockedAccount>;

자세한 것은 매핑된 타입에서 나누겠습니다.