제네릭(Generics)

제네릭(Generics)

1. 제네릭(Generics)

• 이번엔 제네릭(Generics)에 대해 알아봅시다!
• 제네릭이란? 코드를 재사용하고 유연성을 높이는 데 사용되는 강력한 도구입니다.
• 제네릭을 사용하면 함수, 클래스, 인터페이스 등을 정의할 때 데이터 타입을 명시하지 않고 추상적으로 유지할 수 있습니다.
• 이렇게 하면, 여러 종류의 유형을 다루는 함수 or 클래스를 만들 수 있습니다.

 

2. 사용방법

• 사용방법에 대해 알아봅시다.
• 다음 코드를 확인해 봅시다.

    → getSize라는 함수를 arr1은 사용할 수 있지만, arr2는 string타입이라 사용할 수 없습니다.

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

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

const arr2 = ["a", "b", "c"];
getSize(arr2); // 에러발생

 

• arr2도 사용하려면, 다음과 같이 입력해줍니다.

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

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

const arr2 = ["a", "b", "c"];
getSize(arr2); // 3

 

• 여러 타입이 늘어날 수록 코드가 길어지기 때문에 제네릭을 사용해 줍니다.
• 제네릭은 <T>로 임의의 문자를 사용하여, 타입 매개변수를 선언해 줍니다.
• 제네릭을 사용하면, 코드는 다음과 같아집니다.

    → 여기서 T가 타입 매개변수로 사용되었습니다. 함수 or 클래스의 내부에서일반적인 타입처럼 사용됩니다. 

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

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

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

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

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

 

• 인터페이스를 활용하여 다음과 같이 코드를 만들 수 있습니다.

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

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

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

const m3: Mobile<{color: string; coupon: boolean}> = {
    name: "s23",
    price: 1000,
    option: {
        color: "blue",
        coupon: true,
    },
};

 

3. 정리하며

• 지금까지 제네릭(Generics)에 대해 알아보았습니다.
• 다음 시간엔 유틸리티 타입의 정의와 유형에 대해 알아보겠습니다.

유틸리티 타입

 

※ 코딩앙마님의 유튜브 강좌를 참고하였습니다.