제네릭이란?
TS에서 매우 중요한 제네릭이다.
function anyFunction<T>(element : T) : T[] {
return [element];
}여러 타입에서 사용할 수 있는 재사용 함수나 재사용 클래스를 정의할 수 있게 해주는 특수 기능 or 특수 구문이다.
제네릭(Generics)은 클래스 또는 함수에서 사용할 타입(Type)을, 그 클래스나 함수를 사용할 때 결정하는 프로그래밍 기법을 말합니다. JavaScript와 같은 동적 타입 언어만 주로 다루던 개발자에게는 생소한 개념입니다. 하지만 TypeScript는 정적 타입 언어라 제네릭을 지원합니다.
TS 제네릭 공식문서 참조
유니온 타입 적용하면 되지 않는가?!
라고 생각할 수 있지만, 제네릭은 유니온 타입보다 훨씬 포괄적인 개념이다.
제네릭은 모든 타입을 허용하고 그 타입이 무엇이든 동일한 타입을 반환하게 만들 수 있다.
반면, 유니온은 설정한 타입만 허용한다.
// 유니온 타입 적용
function sleep(who : string | number) : string | number {
// ...
}
// 제네릭 적용
const nums: Array<number> = [];
const colors: Array<string> = [];제네릭 해석
- 인터페이스의 이름이 구문이 된다. (Array가 여기에 해당)
- 원하는 타입을
<>안에 넣어준다. (number, string, 유니온 타입 등등..)즉, 해당 예시 코드를 토대로 생각을 뻗어보면 제네릭을 이용하여 배열 타입으로 여러 타입을 찍어낼 수 있다.
제네릭 간단 요약
1. 모든 종류의 타입을 허용하는 포괄적인 방식으로 작성되고,
2. 이를 기반으로 새로운 타입을 반환한다.
타입스크립트는 타입 추론을 합니다.
때문에 제네릭을 꼭 넣을 필요가 있을까? 싶은 생각을 할 수 있습니다.
실제로 제네릭을 사용하지 않아도 반환값의 타입을 타입스크립트가 꽤 정확하게 추론하여 잡아줍니다.
하지만 모든 타입을 추론할 수 없기 때문에 제네릭이 사용되는 것입니다.
제네릭에 대한 내용은 26일까지 정리될 것
제네릭의 특징
(React TSX 파일로 작성한다는 가정)
화살표 함수를 사용했을 때, 제네릭 타입은 아래 사진과 같은 에러를 띄웁니다.
에러를 해결하기 위해서는
<T,>처럼후행 쉼표를 넣어주면 해결할 수 있습니다.
TSX 파일로 작업하면서 화살표 함수에 제네릭을 적용하여 작성할 때는
후행 쉼표를 꼭 넣어줘야 에러를 방지할 수 있습니다.
타입 파라미터 타입 제한
extens를 아래 코드처럼 사용함으로써 타입을 제한할 수 있다.
function merge<T extends object, U extends object>(obj1: T, obj2: U) {
return {
...obj1,
...obj2,
};
}
const friendsObj = merge({ name: "John" }, { age: [26, 28, 22, 30] });
console.log(merge({ name: "Sam" }, { age: 40 }));
console.log(merge({ name: "Sam" }, 40));
// error => number' 형식의 인수는 'object' 형식의 매개 변수에 할당될 수 없습니다.제네릭 기본 타입의 기본값
기본값은 타입 파라미터를 지정하지 않을 때만 개입합니다.
// 기본 타입 파라미터 설정
function makeArr<T = number>(): T[] {
return [];
}
// 아무것도 지정하지 않으면 T = number
const numArr = makeArr();
// boolean값 지정함으로써 T = boolean
const boolArr = makeArr<boolean>();