[タイプスクリプト]タイプスクリプトの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'.

インタフェースでのGenericの使用

interface IType<T> {
  name: string,
  value: 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]
}

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
}

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 U = string | number;

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

コメントサイト