extends를 사용한 제네릭 제약 조건

시작하기

제약 조건이 없을 때의 문제

function getLength<T>(val: T): number {
  // return val.length; // Error — T might not have .length
}

제약 조건 추가하기

function getLength<T extends { length: number }>(val: T): number {
  return val.length;
}
getLength('hello');  // OK — string has .length
getLength([1, 2]);   // OK — array has .length
// getLength(42);   // Error — number has no .length

인터페이스로 제한하기

interface Named { name: string; }
function greet<T extends Named>(person: T): string {
  return 'Hello, ' + person.name;
}

keyof 제약 조건

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
const age = getProperty({ name: 'Alice', age: 30 }, 'age'); // number

유니언으로 확장하기

type Status = 'active' | 'inactive' | 'banned';
function setStatus<T extends Status>(status: T): void {
  console.log('Setting status:', status);
}

생성자로 제한하기

function create<T>(ctor: new () => T): T {
  return new ctor();
}

교집합을 사용한 여러 제약 조건

interface Serializable { serialize(): string; }
interface Loggable { log(): void; }
function process<T extends Serializable & Loggable>(item: T): void {
  item.log();
  console.log(item.serialize());
}

제약 조건 상속

class Animal { breathe() { return 'breathing'; } }
function care<T extends Animal>(a: T): string { return a.breathe(); }

자기 자신을 확장하는 T(재귀)

interface Comparable<T> { compareTo(other: T): number; }
function max<T extends Comparable<T>>(a: T, b: T): T {
  return a.compareTo(b) >= 0 ? a : b;
}

제약 조건 오류 메시지

빠른 확인

복습