TS Generic

TypeScript

Generic을 알기 전에 먼저 타입스크립트를 알아야한다.
타입스크립트란 자바스크립트의 타입을 부여하여 강제시키는 언어이다.
자바스크립트의 확장된 언어라고 볼 수 있다.
더 자세한 내용은 이전에 👉블로그를 참고해보면 좋다.

Generic

제네릭(Generic)이란 데이터의 타입을 일반화를 한다는 것을 의미한다.
제네릭은 자료형을 정하지 않고 여러 타입을 사용할 수 있게 해주는데, 이는 선언 시점이 아닌 생성 시점에 타입을 명시하여 하나의 타입만이 아닌 다양한 타입을 사용할 수 있도록 하는 기법이다.
한번의 선언으로 다양한 타입에 재사용이 가능하다는 장점이 있다.

사용방법

// 1. 문자 타입
const getString = (args: string): string => {
  return args;
};

const result1 = getString("철수");

먼저 가장 기본적인 문자열 타입의 사용방법이다.
매개변수에 타입을 지정하고 리턴하는 값에도 타입을 지정해주는 것이다.

// 2.generic - 함수 선언식
function getGenericsT<T1, T2, T3>(arg1: T1, arg2: T2, arg3: T3): [T3, T2, T1] {
  return [arg3, arg2, arg1];
}

const result2 = getGenericsT("철수", 10, "다람쥐초등학교");

위는 제네릭타입에서 가장 많이 사용되는 방법이다.
제네릭 타입은 무슨 타입인지는 모르나 들어오는 매개변수 타입과 리턴하는 타입이 모두 같다는 의미를 가지고 있다.
위는 함수 선언식으로 작성 되었다.

// 3.generic - 화살표 함수
const getGenericsTUV = <T, U, V>(arg1: T, arg2: U, arg3: V): [V, U, T] => {
  return [arg3, arg2, arg1];
};

위 처럼 리턴하는 함수가 배열이라면 똑같이 타입도 배열로 감싸줘야 한다.
위는 화살표 함수로 작성 되었다.

출처 : Positive Ko