[타입스크립트] Call Signatures

TS의 다양한 함수 표현 중 Call signiture에 대해 찾아보던 중, TS핸드북의 예제 코드가 이해되지 않았다.

스택오버플로우의 친절한 설명덕에 이해할 수 있어 정리해본다.

Call Signitures

• 타입스크립트에서, interface로 function을 정의하는 것은 콜 시그니쳐를 추가해주면 가능해진다.

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

• 프로퍼티로 호출 가능한 것을 설명하려면 객체 타입에 Call Signature을 작성할 수 있습니다.

• Call Signatures는 다음과 같이 함수의 매개 변수(parameter)와 반환 타입을 지정합니다.

  // JS에서는 fucntion도 object이기 때문에 function 자체가 
  // callable해 함수에 추가 property를 가질 수 있다.
  
  const func = () => {
    return 123;
  }
  func.a = 'a';
  console.log(func.a)
  console.log(func())
  

  // 그러나 타입스크립트의 경우에는 미리 선언된 파라미터, 반환 타입 외
  // 새로운 property가 호출될 수 없다.
  // 그러나 콜시그니쳐를 이용하면 가능하다.
  
  type DescribableFunction = {
      description: string;
      (someArg: number): boolean;
  };
  
  function doSomething(fn: DescribableFunction) {
      console.log(fn.description + " returned " + fn(6));
  }
  // 여기까지가 TS 핸드북 예제
  // 위 콜 시그니쳐를 이해하기 위해 greaterThanTen 함수를 정의해본다
  function greaterThanTen(someArg: number) {
      return someArg > 10;
  }
  
  // DescribableFunction 콜 시그니쳐를 통해 아래 호출이 가능하다.
  greaterThanTen.description = "greaterThanTen";
  doSomething(greaterThanTen); // "greaterThanTen returned false"