들어가는 말

제네릭은 다른 프로그래밍 언어에도 존재하나 자바스크립트에는 없고 타입스크립트에만 있는 개념입니다.

목차

왜 제네릭을 사용하지

사용해보기

제네릭의 제약 조건

제네릭 클래스

특수한 타입스크립트 타입

왜 제네릭을 사용하지?

제네릭은 하나의 타입이 아닌 다양한 타입에 대응할 수 있는 컴포넌트를 만들기 유용합니다. 이말은 곧 재사용이 가능한 함수나 컴포넌트를 만들기 용이하다는 것을 이야기합니다.

일반적으로 제네릭은 아래와 같은 모습을 보이고 있습니다

const name2: Array<string> = [];
//프로미스타입
const promise: Promise<string> = new Promise((re, rej) => {
  setTimeout(() => {
    re("done");
  }, 2000);
});

현재 배열의 타입이 문자열이여야 함을 명시해 주고 있습니다. 제네릭은 위처럼 사용할 수도 있으나. 인자를 이용해주는 방향으로도 사용이 가능합니다. 자세한 사용 예를 확인해볼까요?

제네릭 이용해보기

만약 특정한 객체 두가지를 합쳐주는 함수가 있다고 가정해봅시다. 이 함수는 어떤 인자를 사용해 줄지 명확하지 않은 함수로 아래와같은 모습을 보이고 있습니다

function merge(abjA:object, objB:object) {
  return Object.assign(abjA, objB);
}
const mergeObject = merge({ name: "Max" }, { age: 12 });

그런데 이러한 경우에는 만약 변수에 반환된 객체를 저장했을 경우에는 프로퍼티에 접근하기 어려울 수도 있습니다.

이는 현재 우리가 타입스크립트에게 단순히 객체를 반환해 오는 것으로 설정을 해주었기 때문입니다. 물론 현재 반환받는 데이터 타입을 알고 있는 것은 도움이 되나, 여기서 사용할 수 있는 정보를 모두 담고 있지 않아서 위와같은 현상이 발생하게 됩니다

물론 형변환을 사용해주어도 되나 매번 하기에는 조금 무리가 있어 보입니다. 그래서 이번에는 제네릭을 통해 아래와같이 사용해줄 수 있습니다

function merge<T, U>(abjA: T, objB: U) {
  return Object.assign(abjA, objB);
}