[Typescript] Call Signatures, 함수 오버로딩, 제네릭

진히·2023년 10월 12일
0

공부중🤓

목록 보기
13/17

Call Signatures

함수 위에 마우스를 올렸을 때 보게 되는 것.
함수를 구현하기 전에 함수의 매개변수와 반환값의 타입을 만들고 어떻게 작동하는지 미리 서술한다.

type Add = (a:number, b:number) => number;
//함수의 타입을 지정, Call Signatures라고 함.

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

Overloading

함수가 여러 개의 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)
  }
}

Generics Recap

타입을 고정하지 않고, 변수에 따라 타입이 결정되도록 하여 다양한 타입을 사용할수록 있게 한다.
재사용성이 높은 컴포넌트를 만들기에 좋다.
<>를 변수명, 함수명 뒤에 작성해 주어야 하고 제네릭명은 관습적으로 대문자 알파벳 한글자로 처리한다.

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 타입 정복하기

profile
티모누나예요🐶

0개의 댓글