Generics

kukudas·2022년 2월 9일

TypeScript

목록 보기

30/39

Introduction to TypeScript Generics

타입스크립트 제네릭은 함수, 클래스, 인터페이스를 재사용가능한 일반적인 폼으로 쓰게 해줌.
number 배열의 랜덤한 element를 리턴해주는 함수를 만들어야 한다고 할때 아래의 getRandomNumberElement() 함수는 parameter로 number[]를 받아서 배열의 랜덤한 element를 리턴해줌

function getRandomNumberElement(items: number[]): number {
    let randomIndex = Math.floor(Math.random() * items.length);
    return items[randomIndex];
}

let numbers = [1, 5, 7, 4, 2, 9];
console.log(getRandomNumberElement(numbers));

이제 string[]에서 랜덤한 element를 가져와야한다고 하면 아래처럼 함수를 만들 수 있는데 함수의 로직이 위 함수랑 같음. 이렇게 같은 로직인데 함수를 계속 만드는거는 시간낭비임.

function getRandomStringElement(items: string[]): string {
    let randomIndex = Math.floor(Math.random() * items.length);
    return items[randomIndex];
}

let colors = ['red', 'green', 'blue'];
console.log(getRandomStringElement(colors));

Using the any type

똑같은 함수를 계속 만드는 문제를 해결하는 방법붕에 하나는 함수의 인자로 any[]를 받으면됨.

function getRandomAnyElement(items: any[]): any {
    let randomIndex = Math.floor(Math.random() * items.length);
    return items[randomIndex];
}

let numbers = [1, 5, 7, 4, 2, 9];
let colors = ['red', 'green', 'blue'];

console.log(getRandomAnyElement(numbers));
console.log(getRandomAnyElement(colors));

이렇게하는 것도 잘 작동하기는 하는데 단점이 있음. 이 함수는 리턴하는 element의 타입을 정할 수 없어서 type-safe하지 않음. 따라서 동일한 코드를 계속 작성하지 않으면서 type-safe하게 하려면 generic을 사용해야함.

TypeScript generics come to rescue

아래는 제네릭 함수로 T 타입의 배열에서 랜덤한 element를 리턴해줌.
이 함수는 T 타입을 쓰는데 T는 함수를 불렀을때 제공된 타입을 caputre 할 수 있음. 이제 제네릭한 함수가 되었으므로 어떤 데이터 타입에 대해서도 이 함수를 사용할 수 있음.
편의를 위해서 T를 사용했는데 T말고 다른 Aasd같은 다른 단어도 사용가능함.

function getRandomElement<T>(items: T[]): T {
    let randomIndex = Math.floor(Math.random() * items.length);
    return items[randomIndex];
}

Calling a generic function

아래는 getRandomElement()를 number[]로 부르는 것을 보여주는데 number를 T에다가 타입을 명시해서 넣어줌.

let numbers = [1, 5, 7, 4, 2, 9];
let randomEle = getRandomElement<number>(numbers); 
console.log(randomEle);

근데 이렇게 타입을 명시해서 넣어주지는 않고 타입스크립트 컴파일러가 함수로 넘긴 인자의 타입을 추론해서 T를 설정하게함.
아래 예시에서 number 타입을 함수에 직접 명시하지 않아도 컴파일러가 인자를 보고 인자의 타입을 T에다가 넣어줌.

let numbers = [1, 5, 7, 4, 2, 9];
let randomEle = getRandomElement(numbers); 
console.log(randomEle);

이렇게 컴파일러가 추론하도록해도 type-safe함.

let numbers = [1, 5, 7, 4, 2, 9];
let returnElem: string;
returnElem = getRandomElement(numbers);

Generic functions with multiple types

아래는 U와 V를 받는 제네릭 함수임.

function merge<U, V>(obj1: U, obj2: V) {
    return {
        ...obj1,
        ...obj2
    };
}

merge()는 U와 V 타입의 객체 2개를 받아서 두 객체의 property를 합쳐서 하나의 객체로 만들어 리턴해줌.
타입 추론은 merge()의 리턴 값이 U와 V의 교집합인 U & V로 됨.

아래는 merge()함수의 사용예임.

let result = merge(
    { name: 'John' },
    { jobTitle: 'Frontend Developer' }
);

console.log(result);

// Output: 
{ name: 'John', jobTitle: 'Frontend Developer' }