[typescript] Generic Type #1 기초설명

reusable component를 만드는 것을 generic이라고 하는데, Typescript에서는 Type을 generic하게 사용할 수 있다.

사전적 의미

---

Generic : characteristic of or relating to a class or group of things; not specific.

사용방법

---

function

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

let output = identity<string>("myString");
let output = identity("myString"); // 2번째 방식

• function에서 사용시에는 Generic으로 사용 ()앞에 <T> 형태로 써줌
• 두가지 방식으로 invoke할 수 있는데, 2번째의 경우는 arg이 string으로 Type이 string이 된다.

function loggingIdentity<Type>(arg: Type[]): Type[] {
  console.log(arg.length);
  return arg;
}
  
function loggingIdentity<Type>(arg: Array<Type>): Array<Type> {
  console.log(arg.length); 
  return arg;
}

• Generic Type에 아래와 같이 []를 붙여서 Array형태임을 나타낼 수도 있다.

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

let myIdentity: <Input>(arg: Input) => Input = identity;

• var, let, const에 assign할때, generic type을 정의할 수 있다.

interface Lengthwise {
  length: number;
}
  
function loggingIdentity<Type extends Lengthwise>(arg: Type): Type {
  console.log(arg.length);
  return arg;
}

// keyof는 typescript에서 제공하는 operator이다.
function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3, d: 4 };

getProperty(x, "a");
getProperty(x, "m"); //error

• generic type을 다른 interface, type에 extends할 수 있다.

class

class GenericNumber<NumType> {
  zeroValue: NumType;
  add: (x: NumType, y: NumType) => NumType;
}

let myGenericNumber = new GenericNumber<number>();

• class에서는 class name 오른쪽에 generic type을 붙인다.

Reference

---

Typescript Handbook : Generics
Typescript Handbook : Keyof