제네릭(Generics) 기초와 제약 조건(extends)

타입스크립트를 배우며 만나는 첫 번째 통곡의 벽입니다. 함수나 클래스를 만들 때 타입을 미리 고정하지 않고, "사용할 때 타입을 외부에서 주입(전달)할 수 있게 구멍을 뚫어놓는" 마법의 틀(Mould)입니다.

제네릭은 기본적으로 any처럼 모든 타입을 허용하지만, extends 키워드를 사용하면 "적어도 이 속성만큼은 가지고 있어야 내가 통과시켜줄게!" 라며 입구컷(조건)을 걸 수 있습니다.

// 어떤 타입이 들어올지 모를 때, 임시로 T라는 빈 칸(파라미터)을 뚫어놓습니다!
function wrapInBox<T>(item: T) {
    return {
        boxContent: item
    };
}

// 사용할 때 비로소 T 자리에 진짜 타입을 채워 넣습니다.
const stringBox = wrapInBox<string>("사과");   // { boxContent: "사과" }
const numberBox = wrapInBox<number>(100);    // { boxContent: 100 }

// ---

// T가 무조건 length 속성을 가진 타입이어야만 한다고 강제함!
function getLength<T extends { length: number }>(item: T): number {
    return item.length;
}

getLength("안녕하세요"); // 통과 (string은 length가 있음)
getLength([1, 2, 3]); // 통과 (배열도 length가 있음)
// getLength(123); // ❌ 에러! 숫자는 length 속성이 없음!