`keyof`: Key-이름 추출기

"`keyof T` 가 T 의 key 의 타입. 한 번 가지면 T 의 모든 key 관계 탐색 가능."

`keyof` 가 만드는 거

keyof T 가 T 의 key 이름의 literal 타입 union 으로 평가. keyof { id: number; name: string } 가 'id' | 'name'. 결과가 type-layer 전용; runtime 엔 `Object.keys()` 써서 같은 정보를 runtime 문자열로.

Union 이 타입-안전 key 탐색 가능하게 만드는 거. 함수 parameter 를 K extends keyof T 로 제약 가능하고, compiler 가 실제 key 만 전달되는지 보장.

배열과 tuple 의 keyof

keyof string[] 가 숫자 index 와 배열 method ('length' | 'push' | 'pop' | ... | number) 둘 다 포함. Tuple 엔 key 가 각 위치의 숫자 literal 과 같은 method. 가끔 유용, 더 자주 surprise — 배열엔 보통 `keyof T[]` 아니라 `T[number]` (element 타입) 원해.

keyof + indexed-access 패턴

T[keyof T] 가 T 의 모든 value 타입의 union. { a: number; b: string }[keyof T] 가 `number | string` 으로 평가. 이 쌍이 끊임없이 나타나: 이름엔 keyof, 값엔 indexed access, 함께 '이 object 타입의 어떤 거든'.

`keyof` 가 `Object.keys()` 의 타입-레벨 analog. Object property 의 이름 줘 — 근데 compile 시점에 가능한 타입으로.

Code

keyof 기본과 쌍·typescript

interface User { id: number; name: string; email: string }

type UserKeys = keyof User;            // 'id' | 'name' | 'email'

// keyof 통한 타입-안전 property 접근.
function prop<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const u = { id: 1, name: 'Pippa', email: 'a@b.c' };
prop(u, 'name');     // string
prop(u, 'id');       // number
// prop(u, 'xyz');    // ❌ 'xyz' 가 u 의 key 아님

// 모든 값: T[keyof T]
type UserValues = User[keyof User];    // number | string

// 배열: keyof 가 index AND method 포함.
type A = keyof string[];               // 'length' | 'push' | ... | number
type Element = string[][number];       // string (element 타입 — 보통 답)

Exercise

interface Config { host: string; port: number; debug: boolean } 주어지면, getOption<K extends keyof Config>(key: K): Config[K] 함수 써. 각 key 로 호출하고 return 타입이 필드 타입과 match 확인. 존재 안 하는 key 전달하면 뭐 일어나?

Hint

getOption('host') 가 string 반환. getOption('port') 가 number 반환. K extends keyof T constraint 가 compile 시점에 typo 잡아.

`keyof` 가 만드는 거

배열과 tuple 의 keyof

keyof + indexed-access 패턴

Code

External links

Exercise

Progress

댓글 0