타입스크립트 함수 호출 시그니처 설정하기

함수의 호출 방식이 하나일 때

함수의 호출 방식이 하나라는 것은 파라미터 타입, 리턴 타입이 1개의 종류로 고정되어 있다는 뜻이다.

함수 정의 시에 한번 입력하기

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

Type 을 이용해 정의하기

type AddType = (a: number, b: number) => number;

const addType: AddType = (a, b) => a + b;

Interface 를 이용해 정의하기

interface AddInterface {
  (a: number, b: number): number;
}

const addInterface: AddInterface = (a, b) => a + b;

오버로딩: 함수의 호출 방식이 여러개 일 때

오버로딩이란? 메서드의 이름은 같지만, 여러 케이스의 parameter 를 가질 수 있는 것을 말한다.

예제 코드 1: 파라미터의 타입이 다를 수 있을 때

interface Person {
  name: string;
  age?: number;
}

interface MakePerson {
  (param: string): Person;
  (param: Person): Person;
}

const makePerson: MakePerson = (param) => {
  if (typeof param === "string") {
    return {
      name: param,
    };
  }

  return param;
};

• makePerson 이라는 함수는 string 문자열만 받았을 때는 해당 문자열을 name 프로퍼티에 넣어 Person 오브젝트를 생성한다.
• Person 오브젝트에 대한 정보를 받았을 때는 그냥 그대로 반환한다.

이러한 방식은 프레임워크에서 사용자에게서 선택적으로 최소한의 정보 혹은 최대한의 구체적인 정보를 받아 프레임워크 내부 함수를 사용할 수 있게 도와준다.

예제 코드 2: 파라미터의 개수가 다를 수 있을 때

interface Add {
  (first: number, second: number): number;
  (first: number, second: number, third: number): number;
}

const add: Add = (a, b, c?: number) => {
  if (c) {
    return a + b + c;
  }

  return a + b;
};

add(1, 2); // 3
add(1, 2, 3); // 6

위와 같이 c 라는 하나의 파라미터는 Optional 할 때에도 오버로딩을 통해서 타입을 지정할 수 있다.