타입스크립트 - 제네릭 인터페이스

interface KeyPair<K, V> {
    key: K,
    value: V,
}

인터페이스에도 제네릭을 지정할 수 있는데, 이런 경우 타입에 해당하는 부분에 제네릭을 지정할 수 있게 된다.

let keyPair: KeyPair<string, number> = {
    key: 'key',
    value: 0,
}

let keyPair2: KeyPair<boolean, string[]> = {
    key: true,
    value: ['1'],
}

실제 사용에서는 타입을 명시해주어 사용한다.

제네릭 인덱스 시그니처

interface NumberMap {
    [key: string]: number,
}

let numberMap1: NumberMap = {
    key: -1234,
    key2: 1234,
}

기존의 인덱스 시그니처는 위와 같이 타입을 지정해야만 했다.

위의 코드는 number 타입 외에는 다른 타입을 사용할 수 없게 된다.

interface Map<V> {
    [key: string]: V,
}

인덱스 시그니처의 타입부분에 제네릭을 사용하면,

let stringMap: Map<string> = {
    key: 'value',
}

let booleanMap: Map<boolean> = {
    key: true,
    key2: false,
}

다양한 타입을 지정할 수 있게 된다.

제네릭 인터페이스 활용

interface Student {
    type: 'student',
    school: string,
}

interface Developer {
    type: 'developer',
    skill: string,
}

interface User<T> {
    name: string,
    profile: T,
}

//반드시 User<Student> 만 매개변수로 받을 수 있음
function goToSchool(user: User<Student>) {
    const school = user.profile.school;
    console.log(`${school}로 등교 완료`);
}

const developerUser: User<Developer> = {
    name: 'junny',
    profile: {
        type: 'developer',
        skill: 'TypeScript',
    },
}

const studentUser: User<Student> = {
    name: '홍길동',
    profile: {
        type: 'student',
        school: '테스트학교',
    },
}

goToSchool 메서드의 매개변수 user는 User<Student> 타입으로 지정하여 사용할 수 있게 된다.

즉 User<Developer>는 매개변수로 들어올 수 없게 되므로, developer에 대한 예외처리를 하지 않아도 된다.