[TypeScript] Generics

Generics

클래스, 함수, interface 등을 다양한 타입으로 재사용이 가능하다.
선언할 때는 타입 파라미터만 적고 생성할 때 사용하는 타입을 정한다.

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

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

const arr2 = ["a", "b", "c"];
getSize(arr2); // err - Argument of type 'string[]' is not assignable to parameter of type 'number[]'

// getSize(arr: number[] | string[]) 으로 해결 가능

하지만 다른 타입들이 계속 늘어날 경우가 있다.

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

위에서 <T>는 타입 파라미터라고 하며 보통 T를 일반적으로 사용한다.
어떠한 타입을 전달받아서 함수에서 사용 가능하도록 한다.

따라서

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

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

const arr2 = ["a", "b", "c"];
getSize < string > arr2;

<number | string>처럼 사용가능하다.

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

const m1: Mobile<object> = {
  name: "s21",
  price: 1000,
  option: {
    color: "red",
    coupon: false,
  },
}; // <{color: string; coupne: boolean}> 도 가능

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

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<T extends { name: string }>(data: T): string {
  return data.name;
}

showName(user);
showName(car);
showName(book); // err

T 타입이 올 것인데 그 타입은 name이 string인 객체를 확장한 형태이다.