타입스크립트 베이직 - 9: 제네릭

위키피디아: 데이터 형식에 의존하지 않고, 하나의 값이 여러 다른 데이터 타입들을 가질 수 있는 기술에 중점을 두어 재사용성을 높일 수 있는 프로그래밍 방식.

제네릭은 위와 같이 프로그래밍 패러다임을 뜻한다.
타입스크립트에서는 어떻게 적용해볼 수 있을까?

타입스크립트에서의 제네릭 사용법

특정한 타입으로 고정시키는 것이 아니라 꺽쇠 안에 임의의 타입을 정의해놓고
그때그때 다른 타입을 넣어 쓸 수 있게 하는 것을 제네릭이라고 한다.

다음과 같이 파라미터를 출력하는 함수를 제네릭으로 만들어보자.

function printItems<T>(items: T): T { // <T>를 타입파라미터라고 한다.
	console.log(items);
}

이제 아래와 같이 함수 안에서 사용할 타입을 넘겨줄 수 있다.

printItems<string>('hi');
printItems<number>(10);
printItems<boolean>(true);
printItems("Hello Generic");
// 가독성이 좋기 때문에 흔하게 사용되지만 복잡한 코드에서 타입 추정이 되지 않는다면 꺽쇠를 통해 타입을 명시하자.

<string>이 T에 대입이 되어 (items: string): string 타입에러가 나지 않게 되었다. 즉 printItems함수의 재사용성이 매우 높아졌다!

any와의 차이?

any도 마찬가지로 모든 파라미터를 받을 수 있지만, 타입검사를 하지 않는다.
반면 제네릭은 타입정보와 함께 동작하기 때문에 함수의 입력 값에 대한 타입과 출력 값에 대한 타입이 동일한지 검증한다.

컨벤션

<T>, <U>, <V>를 이용해서 임의의 타입을 표현하는게 일반적이지만 아무 이름이나 쓸 수 있다.
다만 파라미터로 보이기도 해서 착각을 불러일으킬 수 있기 때문에 단어보다는 <T>, <U>, <V> 와 같은 컨벤션을 지켜주는 것이 좋다. 긴 이름의 타입파라미터를 만들 때는 T접두사를 활용할 수도 있다.

const stock = new Map<string, number>();
stock.set('g001', 1);
stock.set('g002', 2);
console.log(stock.get('g001'));
console.log(stock.get('g002'));

유용한 제네릭 타입들

querySelector()함수

const elem = document.querySelector<HTMLInputElement>('input.username');

Map

const productMap = new Map<string, Product>();
productMap.set(product1.id, product1);
productMap.set(product2.id, product2);

Set

const productSet = new Set<Product>();
productSet.add(product1);
productSet.add(product2);