함수 위에 마우스를 올렸을 때 보게 되는 것.
함수를 구현하기 전에 함수의 매개변수와 반환값의 타입을 만들고 어떻게 작동하는지 미리 서술한다.
type Add = (a:number, b:number) => number;
//함수의 타입을 지정, Call Signatures라고 함.
const add:Add = (a, b) => a + b
함수가 여러 개의 Call Signatures를 가지고 있을 때 발생한다.
외부 라이브러리나 패키지에서 많이 사용됨.
type Add = {
(a: number, b: number) : number
(a: number, b: string) : number
const add: Add = (a, b) => {
if (typeof b === "string") return a;
return a + b;
}
type Push = {
(path:string):void
(config:Congif):void
}
const push:Push (config) => {
if(typeof config === "string"{ console.log(config)) }
else{
console.log(config.path)
}
}
타입을 고정하지 않고, 변수에 따라 타입이 결정되도록 하여 다양한 타입을 사용할수록 있게 한다.
재사용성이 높은 컴포넌트를 만들기에 좋다.
<>를 변수명, 함수명 뒤에 작성해 주어야 하고 제네릭명은 관습적으로 대문자 알파벳 한글자로 처리한다.
const generic = <T>(a: T, b: T): T[] => { ... }
generic(1, 2);
generic('1', '2');
//많은 타입 중 하나가 달라질 수 있는 경우라면 아래와 같이 쓸 수 있음
type User<E> = {
name: string
extraInfo: E
}
type NancyExtra = {
food:string,
}
type NancyUser = User<NancyExtra>
const nancy: NancyPlayer = {
name: "nancy"
extraInfo: {
favFood : "noodle"
}
}
// extraInfo가 null인 user
const jessi: Player<null> = {
name: "jessi",
extraInfo: null
}
// 복수의 제네릭을 선언하면 제네릭의 순서를 기반으로 제네릭 타입을 추론
type SuperPrint = <T, M>(a: T[], b: M) => T
const superPrint: SuperPrint = (a) => a[0]
const a = superPrint([1, 2, 3, 4])
const b = superPrint([false, true, true, true], "2")
출처
노마드코더 - Typescript
타입스크립트 Generic 타입 정복하기