Typescript(8) - Generics

이번 포스팅에서는 Typescript의 제네릭에 대해서 알아보겠습니다.

제네릭 - Generics 이란?

TypeScript의 Generics(제네릭)은 타입 안정성을 유지하면서 재사용 가능한 코드를 작성할 수 있는 기능입니다. 제네릭을 사용하면 함수나 클래스를 여러 종류의 타입에 대해 동작하도록 일반화할 수 있습니다. 이를 통해 코드의 중복을 줄이고, 타입 안전성을 확보할 수 있습니다.

제네릭은 함수나 클래스의 매개변수나 반환값에 타입 변수를 사용하는 방식으로 작성됩니다. 이 타입 변수는 실제 사용될 때 구체적인 타입으로 대체됩니다. 예를 들어, 배열의 요소 타입을 유연하게 처리하기 위해 제네릭을 사용할 수 있습니다.

예제

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

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

const arr2 = ["A","b","c"];
getSize(arr2); // error

arr1의 경우의수 number[], arr2의 string[] 경우의 수 둘다 처리하기 위해서 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); // error

<> 꺽새 안에 T를 타입파라미터라고합니다.
일반적으로 T를 사용합니다.
다른 것 적어도 상관 없습니다.

T는 어떠한 타입을 받아서 사용하게 합니다.

그래서 밑에 함수호출시에 number, string으로 적어줍니다.

사실 'number,string'으로 기입 할 필요없이 그냥 적어도 타입스크립트에서 알아서 감지한다고 합니다.

Generics interface

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

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

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

이런식으로 option의 타입을 Mobile<~~>로 정해 줄 수 있습니다.
그러면 option의 값이 [1,2,3] 이라면 어떻게 하면 좋을까요?

정답

const m3 : Mobile<number[]> = {
    name: "14pro",
      price: 1400,
      option: [1,2,3]
}

이런식으로 타입을 지정해주시면 에러가 없을 것입니다.

다음포스팅에서는 유틸리티 타입에 대해서 포스팅하겠습니다.