타입스크립트 제네릭(Generic) 타입

타입스크립트의 제네릭(Generic) 타입은 타입의 재사용성을 높이고, 다양한 타입에 대응하는 함수나 클래스를 작성할 수 있게 도와준다.

간단히 말하면 타입을 변수화 한 것이다.

 

제네릭 함수

 

다음과 같이 함수에서 꺾쇠 괄호와 대문자 T 변수로서 지정함으로서, 제네릭을 통해 코드에 선언한 타입을 변수화 하고, 나중에 타입을 정하는 식으로 유연하게 사용이 가능하다.

function add<T>(x: T, y: T): T { // 제네릭 : 꺾쇠와 문자 T를 이용해 표현. T는 변수명이라고 보면 된다.
   return x + y;
}

add<number>(1, 2); // 제네릭 타입 함수를 호출할때 <number> 라고 정해주면, 함수의 T 부분이 number로 바뀌며 실행되게 된다.
add<string>('hello', 'world'); // 'helloworld'

 

제네릭 인터페이스

 

interface에서 꺾쇠 괄호와 대문자 T 변수로서 지정함으로서, 나중에 타비을 정하는 식으로 유연하게 사용가능하다.

interface KeyValuePair<T> {
    key: T;
    value: T;
}

let pair1: KeyValuePair<number> = { key: 1, value: 25 };
let pair2: KeyValuePair<string> = { key: "1", value: "apple" };

 

무조건 T만 사용하는것이 아니라 자신이 원하는대로 사용도 가능하다.

 

interface KeyValuePair<V> {
    key: V;
    value: V;
}

let pair1: KeyValuePair<number> = { key: 1, value: 25 };
let pair2: KeyValuePair<string> = { key: "1", value: "apple" };

 

두 가지 제네릭을 사용하는 방법도 있다.

 

interface KeyValuePair<K, V> {
    key: K;
    value: V;
}

let pair1: KeyValuePair<string, number> = { key: "age", value: 25 };
let pair2: KeyValuePair<number, string> = { key: 1, value: "apple" };

 

더 많은 사용방법이 있지만 너무 깊게 들어가는 것 같아서 래퍼런스 블로그를 통해서 나중에 정리하도록 하자.

 

https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0#%EC%A0%9C%EB%84%A4%EB%A6%AD_%EC%A0%9C%EC%95%BD_%EC%A1%B0%EA%B1%B4_extends