[typescript] 제네릭

이 내용은 코드앙마의 타입스크립트 강좌를 정리해놓은 자료이다.

---

제네릭 필요성

제네릭을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 지정할 수 있다.

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

const arr1 = [1, 2, 3];
getSize(arr1); // 3

숫자 배열을 넘기면 길이를 가져오는 함수이다.

다음은 문자열을 넘기는 함수를 만들어보자.

function getSize(arr: number[] | string[]): number {
    return arr.length;
}

const arr1 = [1, 2, 3];
getSize(arr1); // 3

const arr2 = ["1", "2", "3"];
getSize(arr2); // 3

이렇게 number[] | string[]를 지정하면 2가지 타입을 넘길 수 있다. 하지만 타입이 계속 늘어날 수 있다.

const arr1 = [1, 2, 3];
getSize(arr1); // 3

const arr2 = ["1", "2", "3"];
getSize(arr2); // 3

const arr3 = [false, true, true];
getSize(arr3); // 3

const arr4 = [{}, {}, {name: "Tim"}];
getSize(arr4); // 3

이럴때마다 계속 타입을 정의해줘야 한다. 이럴 때 사용할 수 있는게 제네릭이다.

제네릭

제네릭은 일반적으로 T로 정의한다.

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

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

const arr2 = ["1", "2", "3"];
getSize<string>(arr2); // 3

const arr3 = [false, true, true];
getSize<boolean>(arr3); // 3

const arr4 = [{}, {}, {name: "Tim"}];
getSize<object>(arr4); // 3

실제 사용하는 곳에서 타입을 지정한다.

인터페이스에서 사용

이번에는 인터페이스에서 사용을 해보자.

interface Mobile {
    name: string;
    price: number;
    option: any; // any이다.
}

여기서 option은 any타입으로 어떤 타입이 올지 모르는 상황이다.

이런 경우는 아래와 같이 사용할 수 있다.

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

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

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

m1에서 option 객체의 모습이 정해져 있다면 아래와 같이 사용할 수 있다.

const m1:Mobile<{color: string; coupon: boolean}> = {
    name: "s21",
    price: 1000,
    option: {
        color: "red",
        coupon: false
    }
};

함수에서 사용

다음을 보자.

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

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

interface Book {
    price: number;
}

const user: User = { name: "a", age: 10 };
const car: Car = { name: "bmw", color: "red" };
const book: Book = { price: 3000 };

function showName(data): string {
    return data.name; //
}

showName(user);
showName(car);
showName(book);

위에서 user와 car는 name이 있지만 book은 name이 없어서 사용하면 안된다.

showName의 data는 any 타입인데 제네릭을 이용하여 타입을 넣어주자.

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

이 코드는 data의 타입이 올건데 name이 string인 타입이라는 의미이다. name이 없거나 name이 string이 아니라면 오류가 발생한다.

showName(user); // 정상
showName(car); // 정상
showName(book); // 오류