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

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
}

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はインターフェースのようにGenericを使用することもできる.

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/