: 함수의 인자 타입과 리턴 타입을 알려주는 (mouse hover 하면 뜨는 그거)
: 함수의 타입을 만들고 어떻게 작동하는지 서술해둘 수 있는 느낌
type Add = (a:number, b:number) => number; //call signature
const add:Add = (a, b) => a + b
: 함수가 서로 다른 여러 개의 call signatures를 가지고 있을 때 발생
같은 개수의 파라미터가 여러 타입을 가질 때
//예시 1
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
}
//예시 2 (Next.js)
Router.push("/home")
Router.push({
path: "/home",
state: 1
})
// 위의 상황인 경우 이렇게 작성할 수 있다
type Config = {
path: string,
state: object
}
type Push = {
(path:string):void
(config:Config):void
}
const push:Push = (config) => {
if(typeof config === "string") console.log(config)
else console.log(config.path, config.state)
}
파라미터의 개수가 다를 때
type Add = {
(a:number, b:number): number,
(a:number, b:number, c:number): number
}
const add:Add = (a, b, c?number) => {
if(c) return a + b + c
return a + b
}
어떤 타입이든 상관없이 배열이면 요소를 모두 출력하는 함수
type SuperPrint = {
<TypePlaceholder>(arr: TypePlaceholder[]):void //generic
}
const superPrint: SuperPrint = (arr) => {
arr.forEach(i => console.log(i))
}
type SuperPrint = <T, M>(a: T[], b: M) => T
: 많은 변수들 중 하나가 달라질 수 있는 타입이라면 제네릭을 사용해라..
function superPrint<T>(a: T[]){
return a[0]
}
type Player<E> = {
name:string
extraInfo:E
}
type SiaExtra = {
favFood:string
}
type SiaPlayer = Player<SiaExtra>
const sia: SiaPlayer = {
name:"sia",
extarInfo: {
favFood: "meat"
}
}
const test: Player<null> = {
name:"test",
extraInfo:null
}
둘이 같은 표현이다.
function printAllNumbers(arr: number[])
function printAllNumbers(arr: Array<number>) //제네릭 사용