[TypeScript] 제네릭 Generics

Generic

//Generic을 이용하면 클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다.

function getSize(arr: number[] | string[] | boolean[] | object[]): number {
  return arr.length;
}
const arr1 = [1, 2, 3];
getSize(arr1); //3

//함수 오버로드나 유니온 타입을 사용하여 문제 해결
const arr2 = ["a", "b", "c"];
getSize(arr2);

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

const arr4 = [{}, {}, { name: "tom" }];
getSize(arr4);

다른 타입들을 전달하기 위해서는 함수 오버로드나 유니온 타입을 계속 사용해줘야한다.

generic을 사용하기 위해 <T>를 써준다. 타입파라미터라고 하는데 보통 T를 일반적으로 사용한다. T는 타입을 전달받아 함수에 사용할 수 있게 한다. 매개변수의 타입은 T의 배열로 적어준다.

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

그리고 사용하는 쪽에서 타입을 결정한다. 특정 타입으로 강제하고 싶을 경우 유니온을 써도 상관 없다.

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);

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

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

인터페이스에서 generic 활용 1

interface Mobile<T> {
  name: string;
  price: number;
  option: T; //옵션을 T타입으로 명시
}

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

const a2: Mobile<string> = {
  name: "s20",
  price: 1000,
  option: "good",
};

하나의 인터페이스만 선언하고 각각 다른 모습의 객체를 만들 수 있다.

인터페이스에서 generic 활용 2

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

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

interface Book {
  price: number;
}

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

function showNmae<T extends { name: string }>(data: T): string {

  return data.name;
}

showNmae(user);
showNmae(car);
showNmae(book);

function showNmae<T extends { name: string }>(data: T): string 코드를 자세히 보면

어떤 T 타입은 name이 string인 객체를 확장한 형태이다. 이때는 다양한 모습의 객체가 올 수 있지만, 항상 name은 string을 가지고 있다. name이 없거나 string이 아니면 에러가 발생 한다.