Typescript-Challenge 3

January·2022년 6월 29일
0

call signatures

const add = (a:number, b:number) => a + b

// const add: (a:number, b:number) => number

함수 위에 마우스를 올렸을 때 보게 되는 것. 인자의 타입과 함수의 반환 타입을 알려준다.

type Add = (a:number, b:number) : number

const add:Add = (a, b) => a + b

// call signatures은 type Add = (a:number, b:number) => number

함수의 타입을 미리 정해둔 것을 call signatures라고 한다. 프로그램을 디자인하면서 타입을 먼저 생각하고 코드를 생각하는 것.

overloading

type Add = {
  (a:number, b:number) : number,
  (a:number, b:string) : number
}

const add:Add = (a, b) => a + b
// b는 number | string이기 때문에 string일때는 a:number와 계산할 수 없다. 에러 발생

overloading은 함수가 서로 다른 여러개의 call signatures를 갖고 있을때 발생한다.

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)
  }
}

가장 자주 보게 될 예시이다. 만약 string이나 Config 타입을 갖고 있다면 타입스크립트는 타입을 체크해서 상응하는 로직을 처리한다.

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
}
// c는 옵션이다.

매개변수의 갯수가 다를땐 추가 파라미터가 옵션이라는 뜻히다. 그래서 함수에서 추가적으로 타입을 줘야하고 선택사항이라는 것을 알려주어야 한다.

polymorphism

polymorphism은 무슨 뜻일까?

  • poly는 그리스어로 many, several, much, multi이다. (많은, 다수)
  • morpho는 form, structure이다. (형태, 구조)
type SuperPrint = {
  <TypePlaceholder>(arr: TypePlaceholder[]): TypePlaceholder
}
// 해당 타입이 배열이 될 것을 인지하고 그 타입 중 하나를 리턴하도록 한다.

const superPrint: SuperPrint = (arr) => arr[0]

const a = superPrint([1, 2, 3, 4])
const b = superPrint([true, false, true])
const c = superPrint(["a", "b", "c"])
const d = superPrint([1, 2, true, false, "hello"])  // 에러가 나지 않는다.

// 각각 타입지정을 하지 않아도 타입스크립트는 placeholder에서 타입스크립트가 타입을 알아낸걸로 대체를 해준다.

placeholder를 통해서 call signatures를 변경해준다.(타입스크립트에게 타입을 유추하도록 알려주는 것) 각 실행 함수마다. 이게 polymorphism(다형성)이다. superPrint 함수는 많은 형태를 가지고 있다.

0개의 댓글