TS Generic

정의: 어떤 타입이든 사용할 수 있도록 미리 정해두는 템플릿

일반적인 함수 vs 제네릭 함수

• 일반적인 함수 : 반환값의 타입이 무엇인지 알려주지 않다.

function getFirstItem(arr) {
  return arr[0];
}

console.log(getFirstItem([1, 2, 3])); // 1
console.log(getFirstItem(["a", "b", "c"])); // "a"

제네릭 함수 : 타입을 정할 수 있다.

function getFirstItem<T>(arr: T[]): T {
  return arr[0];
}

console.log(getFirstItem<number>([1, 2, 3])); // 1
console.log(getFirstItem<string>(["a", "b", "c"])); // "a"

제네릭이란?

타입을 미리 지정하지 않고 나중에 사용할 때 타입을 결정하는 방식, 타입 안정성을 유지하면서 재사용 가능한 코드를 만들 수 있음.

이유?

function getFirstNumber(arr: number[]): number {
  return arr[0];
}

function getFirstString(arr: string[]): string {
  return arr[0];
}

console.log(getFirstNumber([1, 2, 3])); // 1
console.log(getFirstString(["a", "b", "c"])); // "a"

다른 타입을 처리를 위한 함수를 계속 만들어야 함

function getFirstItem<T>(arr: T[]): T {
  return arr[0];
}

console.log(getFirstItem<number>([1, 2, 3])); // 1
console.log(getFirstItem<string>(["a", "b", "c"])); // "a"
console.log(getFirstItem<boolean>([true, false, true])); // true

호출할 때 타입을 지정하면 해당 타입으로 대체됨!