teklog

TypeScript 입문하기 4 - Call Signature

2022/09/05

n°5

category : TypeScript

/*migrated from old blog */


Call Signature


: 에디터에서 타입스크립트 컴파일러가 해당 변수, 함수의 타입을 알려주는 작은 노트.

주로 함수의 타입을 정의할 때 자주 사용된다.

함수를 어떻게 호출해야 하는 지 알려주는 문구 (parameter의 타입, return 값의 타입을 알려줌)

타입 앨리어스를 이용해 매번 합수에 type을 지정해줄 필요가 없게 만들 수 있다. (type 재활용)



type NumFuncType= (a: number, b: number) => number
// NumFuncType은 아래 함수들의 Call Signature가 된다.
const Add : NumFuncType = (a, b) => a + b;
const Min : NumFuncType = (a, b) => a - b;


Overloading


콜 시그니쳐를 덮어쓴다.

즉 하나의 함수가 여러개의 콜 시그니쳐를 갖게 될 때.



type CallSign = {
  (a : number, b: number) : number 
  (a: number, b: string ) : number
  }
  
const Add2 : CallSign = (a, b) => {
  if(typeof b === 'string') return a + a
  else {
    return (a + a) + b
  }
  }

자주 쓰이는 예



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.state)
    }
  }
// push 함수의 인자가 문자열이냐, 객체이냐에 따라 다르게 실행되도록 함수 선언

인자의 숫자가 다르게 overloading 된 call signature



type Overload = {
    (a: number, b: number) : number
    (a: number, b: number, c: number): number
  }

  const AddOver1 : Overload  = (a, b) => {
    return a + b
  }

// AddOver2는 컴파일 에러 발생.
  const AddOver2 : Overload  = (a, b, c) => {
    return (a + b) + c
  }
// Type '(a: number, b: number, c: number) => number' is not assignable to type 'Overload'

// C는 반드시 필요한 매개변수는 아니기 때문에, 즉 함수 타입을 정의할 때
// 함수의 매개변수가 2개 혹은 3개로 지정해주기 위해서 call signature가 overload 됨.
// 함수를 선언할 때 3개 인자를 사용하도록 하려면 다음과 같이 선언.

const AddOver2 : Overload  = (a, b, c?:number) => {
    if(c) return a + b + c
    return (a + b) 
  }

  AddOver2(1,2,3)