TS Generic

Generic

• 제네릭(Generics)은 하나의 데이타 타입이 아닌 여러 데이타 타입에 대해 클래스/인터페이스 혹은 함수가 동일하게 동작할 수 있게 해주는 기능이다.
• TypeScript의 제네릭은 C#의 제네릭과 거의 유사하다.
• 제네릭에는 함수에 제네릭 타입을 적용한 제네릭 함수(generic function), 인터페이스에 제네릭 타입을 넣은 제네릭 인터페이스, 클래스에 제네릭을 적용한 제네릭 클래스 등이 있다.

제네릭의 Hello World

function identity(arg: number): number {
  return arg;
}

function identity(arg: any): any {
  return arg;
}

• any를 쓰는 것은 함수의 arg가 어떤 타입이든 받을 수 있다는 점에서 제네릭이지만, 실제로 함수가 반환할 때 어떤 타입인지에 대한 정보는 잃게 됩니다. 만약 number 타입을 넘긴다고 해도 any 타입이 반환된다는 정보만 얻을 뿐입니다.
• 대신에 우리는 무엇이 반환되는지 표시하기 위해 인수의 타입을 캡처할 방법이 필요합니다. 여기서는 값이 아닌 타입에 적용되는 타입 변수 를 사용할 것입니다.

제네릭 타입 변수 작업

function identity<Type>(arg: Type): Type {
  return arg;
}

function loggingIdentity<Type>(arg: Type): Type {
  console.log(arg.length); // 오류: Type에는 .length 가 없습니다.
Property 'length' does not exist on type 'Type'.
  return arg;
}

제네릭 타입

function identity<Type>(arg: Type): Type {
  return arg;
}
 
let myIdentity: <Type>(arg: Type) => Type = identity;

• 제네릭 함수의 타입은 함수 선언과 유사하게 타입 매개변수가 먼저 나열되는, 비-제네릭 함수의 타입과 비슷합니다.
• 또한 타입 변수의 수와 타입 변수가 사용되는 방식에 따라 타입의 제네릭 타입 매개변수에 다른 이름을 사용할 수도 있습니다.

제네릭 클래스

class GenericNumber<NumType> {
  zeroValue: NumType;
  add: (x: NumType, y: NumType) => NumType;
}
 
let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function (x, y) {
  return x + y;
};

• 제네릭 클래스와 제네릭 인터페이스는 형태가 비슷합니다.
• 제네릭 클래스는 클래스 이름 뒤에 꺾쇠괄호(<>) 안쪽에 제네릭 타입 매캐변수 목록을 가집니다.
• 이것은 GenericNumber 클래스의 문자 그대로 사용하지만 number 타입만 쓰도록 제한하는 것은 없습니다. 대신 string이나 훨씬 복잡한 객체를 사용할 수 있습니다.