[ts] 제네릭

14 May 2021

typescript

제네릭

제네릭의 필요성에 대해…

아래는 첫번째 인자와 반환 타입만 다른 함수이다.

function makeNumberArray(value: number, size: number): number[] {
    const arr: number[] = [];
    for (let i = 0; i< size; i++){
        arr.push(value);
    }
    return arr;
}

function makeStringArray(value: string, size: number): string[] {
    const arr: string[] = [];
    for (let i = 0; i< size; i++){
        arr.push(value);
    }
    return arr;
}

const arr1 = makeNumberArray(1, 10);
const arr2 = makeStringArray('empty', 10);

인자와 반환 타입만 다른데, 코드가 많다. -> 오버로드로 수정

function makeArray(value: number, size: number): number[];
function makeArray(value: string, size: number): string[];
function makeArray(value: number | string , size: number): Array<number | string> {
    const arr: string[] = [];
    for (let i = 0; i< size; i++){
        arr.push(value);
    }
    return arr;
}

const arr1 = makeArray(1, 10);
const arr2 = makeArray('empty', 10);

-> 만약 여기서 인자로 들어갈 타입이 계속 추가된다면? 해당 타입에 맞춰서 계속 추가해줘야한다.

// ... 위의 오버로드
function makeArray(value: boolean, size: number): number[];
// ... 아래 함수 구현

-> 제네릭 사용

function makeArray<T>(value: T , size: number): T[] {
    const arr: T[] = [];
    for (let i = 0; i< size; i++){
        arr.push(value);
    }
    return arr;
}
const arr1 = makeArray<number>(1, 10);
const arr2 = makeArray<string>('empty', 10);

사용 예시

// 참고
type t1 =  keyof Person;
// t1 : "name" | "age"

interface Person {
    name: string;
    age: number;
}

interface Korean extends Person {
    liveInSeoul: boolean;
}

interface Japanese extends Person {
    liveInTokyo: boolean;
}

function swapProperty<T extends Person, K extends keyof Person>(
    p1: T,
    p2: T,
    key: K,
): void {
    const tmep = p1[key];
    p1[key] = p2[key];
    p2[key] = p1[key];
}

const p1: Korean = {
    name: '홍길동',
    age: 23,
    liveInSeoul: true,
}
const p2: Korean = {
    name: '임꺽정',
    age: 18,
    liveInSeoul: false
}
swapProperty(p1, p2, 'name');
swapProperty(p1, p2, 'liveInSeoul'); // error
const p3: Japanese = {
    name: '고길동',
    age: 43,
    liveInTokyo: true,
}

swapProperty(p1, p3, name);// error
// 이 코드가 안되는 이유는 p1이 Korean 타입이라서 T가 Korean인 상태.

#타입스크립트/제네릭