[타입스크립트] TypeScript의 제너릭(Generic)

제너릭(Generic)

재사용을 목적으로 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을 선언할 수 있는 방법을 제공한다.

// 함수의 선언 시점

function array(a: number, b: number): number[] {
  return [a, b];
}

array(1, 2);		// [1, 2]
array('1', '2'); 	// Argument of type 'string' is not assignable to parameter of type 'number'.

// 함수의 사용 시점

function array<T>(a: T, b: T): T[] {
  return [a, b];
}

array<number>(1, 2);			// [1, 2]
array<string>('1', '2');		// ['1', '2']
array<number | string>(1, '2');		// [1, '2']

array(1, 2);				// [1, 2]
array('1', '2');			// ['1', '2']
array(1, '2');				// Argument of type 'string' is not assignable to parameter of type 'number'.

interface에 Generic 사용하기

interface IType<T> {
  name: string,
  value: T
}

T 자리에 원하는 타입을 넣어서 사용할 수 있다.

const dataA: IType<string> = {
  name: 'miniddo',
  value: 'velog'
}

const dataB: IType<number> = {
  name: 'miniddo',
  value: 20
}

const dataC: IType<number[]> = {
  name: 'miniddo',
  value: [1, 2, 3, 4, 5]
}

interface에 제약 조건 걸어서 Generic 사용하기

interface IType<T extends string | number> {
  name: string,
  value: T
}

or 

type U = string | number;
interface IType<T extends U> {
  name: string,
  value: T
}

T 에는 string과 number 타입만 사용할 수 있다.

const dataA: IType<string> = {
  name: 'miniddo',
  value: 'velog'
}

const dataB: IType<number[]> = {	// Type 'number[]' does not satisfy the constraint 'string | number'
  name: 'miniddo',
  value: [1, 2, 3, 4, 5]
}

Type Alias 도 interface 처럼 제너릭을 사용할 수 있다.

type U = string | number;

type IType<T extends U> = string | T;
type IType<T extends U> = {
  name: string,
  value: T
};

참고 사이트

https://heropy.blog/2020/01/27/typescript/