C.W.K.
Stream
Lesson 04 of 07 · published

Generic Constraint: `extends`

~10 min · generics, constraints, extends

Level 0Curious
0 XP0/93 lessons0/23 achievements
0/100 XP to next level100 XP to go0% complete
"Constraint 가 'T 가 뭐든, 적어도 이 property 들 가져야 함' 말하는 법."

Constraint 문법

<T extends Constraint> 가 T 를 constraint 에 assignable 하게 요구. 구조 assignment — T 가 적어도 `Constraint` 의 멤버 (호환 타입으로) 가져야 함. 한 번 제약되면 함수/타입 body 안에서 그 멤버 접근 가능, compiler 가 존재 아니까.

Constraint 없으면 T 는 `unknown` 같음 — 전달 가능하지만 어떤 property 도 접근 못 함 (compiler 가 T 가 뭐 가졌는지 모름). Constraint 가 접근 unlock.

Canonical 예시

  • Length 가짐: function len<T extends { length: number }>(x: T): number — string, 배열, `length` 필드 가진 어떤 거든 작동.
  • Key 가짐: function get<T, K extends keyof T>(obj: T, key: K): T[K] — K 가 T 의 key 로 제약, return 이 그 key 의 값.
  • Class 임: function instantiate<T>(Ctor: new () => T): T — T 가 constructor 가 만드는 거.

Constraint + inference

Compiler 가 T 추론할 때 constraint 고려. `T extends string` 으로 제약하면, inference 가 `number` 못 고름. Constraint 가 T 의 legal 공간 narrow. 자주 함수 호출 더 정확하게 만들어.

Generic T 의 property 접근하는데 compiler 가 불평하면, constraint 필요. Constraint 가 compiler 한테 T 가 보장하는 거 말해, property 접근 안전.

Code

Constraint — 접근 unlock 과 keyof 사용·typescript
// Constraint 없이 — T 의 property 접근 못 함.
function badLen<T>(x: T): number {
  return x.length;     // ❌ Property 'length' does not exist on type 'T'
}

// Constraint 있으면 — string, 배열, length 가진 어떤 거든 작동.
function len<T extends { length: number }>(x: T): number {
  return x.length;
}

len('hello');          // ✅ string 이 length 가짐
len([1, 2, 3]);        // ✅ 배열이 length 가짐
len({ length: 10 });   // ✅ length 가진 object
// len(42);            // ❌ number 가 length 안 가짐

// keyof constraint — 유명한 패턴.
function prop<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const user = { name: 'Pippa', age: 21 };
const name = prop(user, 'name');   // name: string
const age = prop(user, 'age');     // age: number
// prop(user, 'email');             // ❌ 'email' 이 user 의 key 아님

External links

Exercise

두 object 결합하는 generic merge<T extends object, U extends object>(a: T, b: U): T & U 써. Spread operator 써. 그다음 다른 모양 조합으로 호출하고 추론된 return 타입 관찰 — intersection 이 두 모양 정확히 캡처.
Hint
return { ...a, ...b }. Spread 가 두 object 의 필드 보존하니까 compiler 가 결과를 T & U 로 타입. object 로 constraint 가 caller 가 primitive 전달 안 함 보장.

Progress

Progress is local-only — sign in to sync across devices.
이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

댓글 0

🔔 답글 알림 (로그인 필요)
로그인댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.