[TypeScript] 제네릭(Generics)

제네릭(Generics)

타입에 대한 결정을 함수 호출 시 적용할 수 있습니다.

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

getSize([1, 2, 3]);
getSize(["a", "b", "c"]);
getSize(["a", "b", "c", 1, 2, 3]);

위의 코드를 제네릭으로 바꿔보겠습니다.

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

getSize<number>([1, 2, 3]);
getSize(["a", "b", "c"]);
getSize(["a", "b", "c", 1, 2, 3]);

<number> 의 number 타입이 <T>로 들어가서 T로 반환됩니다. 타입 추론으로 적어주지 않아도 됩니다.

 

제네릭 사용한 타입가드

매개변수로 배열과 문자열이 들어가는 경우

function getSize<T>(arg: T[] | T): number | string {
  return Array.isArray(arg) || typeof arg === "string" ? arg.length : "Error";
}

getSize([1, 2, 3]);
getSize(["a", "b", "c"]);
getSize(["a", "b", "c", 1, 2, 3]);
getSize<string>("Hello");

함수 선언문

function getSize<T>(arg: T[] | T): number | string {
  return Array.isArray(arg) || typeof arg === "string"
    ? arg.length
    : "Not Array or String";
}

function getSize<T>(arg: T[] | T): number | "Not Array or String" {
  return Array.isArray(arg) || typeof arg === "string"
    ? arg.length
    : "Not Array or String";
}

화살표 함수

const getSize = <T>(arg: T[] | T): number | "Not Array or String" =>
  Array.isArray(arg) || typeof arg === "string"
    ? arg.length
    : "Not Array or String";

type GetSize = <T>(arg: T[] | T) => number | "Not Array or String";
const getSize: GetSize = (arg) =>
  Array.isArray(arg) || typeof arg === "string"
    ? arg.length
    : "Not Array or String";

 

함수의 제네릭

type User = {
  name: string;
  age: number;
  favoriteFood: any; // [], one, null
};

좋아하는 음식에 어떤 타입인지 모를 때도 제네릭을 사용합니다.

type User<T> = {
  name: string;
  age: number;
  favoriteFood: T; // [], one, null
};

const mikeInfo: User<String[]> = {
  name: "mike",
  age: 26,
  favoriteFood: ["나주곰탕", "함흥냉면"],
};

const sueInfo: User<null> = {
  name: "sue",
  age: 29,
  favoriteFood: null,
};