타입스크립트 제네릭

제네릭의 사전적 정의

• 제네릭은 C#, Java 등의 언어에서 재사용성이 높은 컴포넌트를 만들 때 자주 활용되는 특징
• 특히 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용

타입스크립트에서의 제네릭

아래와 같은 배열의 길이를 반환하는 함수가 있다고 가정하자.

function getSize(arr):number {
    return arr.length
}

이때, getSize 함수의 파라미터인 arr에는 아래처럼 여러가지 데이터 형태를 요소로 가지는 배열이 들어갈 수 있다.

[1, 2, 3]
["a", "b", "c"]
[true, false, false]

제네릭을 활용하여 getSize 함수의 arr의 파라미터를 유동적으로 지정하는 것이 가능하다.

function getSize<T>(arr:T[]):number {
    return arr.length
}

이제 다양한 데이터 형태를 요소로 가지는 배열을 이용하여 getSize 함수를 호출하는 것이 가능하다.

const arr1 = [1, 2, 3];
getSize<number>(arr1)

const arr2 = ["a", "b", "c"]
getSize<string>(arr2)

인터페이스에서의 제네릭 활용

• 예시로 정의한 인터페이스 Mobile이 있다.
• name, price 속성은 타입이 정의가 되어있지만, option의 타입은 유동적으로 지정해주고 싶을 때, 아래와 같이 가능하다.

interface Mobile<T> {
    name:string
    price:number
    option:T
}

  
const m1: Mobile<object> = {
    name: "s21",
    price: 3000,
    option: {
        color:'red',
        coupon: false,
    }
}

const m2: Mobile<string> = {
    name: "s20",
    price:900,
    option: "good"
}

extends을 활용한 확장

• 클래스 문법과 비슷하게 인터페이스를 extends을 이용하여 확장 가능하다.

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

interface Car {
    name: string;
    color: string;
}

function showName<T>(data:T):string {
    return data.name
}

• User, Car 인터페이스를 정의하고, 객체의 name 속성에 해당하는 값을 반환하는 함수 showName이 있다.
• 이때 파라미터 data 객체에는 name 속성이 있다는 단서가 없기 때문에, 타입스크립트는 에러를 발생시킨다.

function showName<T extends { name: string }>(data:T):string {
    return data.name
}

이와 같이 인터페이스를 확장하여 제네릭을 정의하였고, 이제 data 객체에는 name 속성이 반드시 존재한다는 것을 명시하는 것이 가능하다.