이번에는 타입스크립트에서 어떻게 함수의 타입을 정의하는지 알아보도록 하겠습니다.

함수 타입 정의

함수의 선언과 정의 자체는 기본 자바스크립트에서 사용하던 방식과 동일합니다. 그래서 이 포스트에선 정의에 대한 설명 자체는 건너뛰고 함수의 타입을 어떻게 정의하는지 바로 알아보도록 하겠습니다.

타입스크립트에서 함수 타입은 매개변수의 타입이 어떤지, 반환값이 타입이 어떤지를 정의합니다.

function 명령

기존 자바스크립트에서 function 명령을 이용한 함수 정의는 아래와 같았습니다.

function foo(x, y) {
  return x + y;
}

타입스크립트에서는 선언 자체는 변함이 없고, 매개변수와 반환값의 타입을 함께 정의해주면 됩니다.

function 함수명(매개변수: 매개변수_타입, ...): 반환값_타입 {}

function foo (x: number, y: number): number {
  return x + y;
}

애로우 함수

애로우 함수도 동일하게 매개변수와 반환값의 타입을 정의해주면됩니다.

const 함수명 = (매개변수: 매개변수_타입, ...): 반환값_타입 => {};

const foo = (x: number, y: number): number => x + y;

---

반환값이 없는 경우에는 void 타입을 이용합니다.

const foo = (): void => console.log('hello');

반환값 타입은 생략할 경우 return문의 코드 결과를 통해 자동으로 타입 추론이 이루어집니다.

const foo = () => {
  return 123;
}; //이 함수의 반환값 타입은 number 타입으로 추론

매개변수 기본값을 사용할 경우 기본 값의 타입을 자동적으로 추론합니다.

const foo = (n = 123) => {
  return n;
}; //이 함수의 매개변수 타입은 number 타입으로 추론

기본값을 사용할 경우 생략해도 괜찮지만, 명시해줄수도 있습니다.

const foo = (n: number = 123) => {
  return n;
};

선택적 매개변수의 타입

선택적 매개변수를 사용할 경우 해당 매개변수의 타입은 지정한 타입과 undefined가 유니온된 유니온 타입으로 추론합니다.

유니온타입이 되었기 때문에 지정한 타입으로 사용하려면 타입 좁히기를 이용해서 타입을 결정해주어야합니다.

const foo = (x?: number) => { //내부적으로 number | undefined 타입으로 추론된다
  if (typeof x === 'number') { // number로 사용하고 싶다면 타입 좁히기를 사용
    console.log('x is number type');
  }
  console.log('x is undefined type');
};

---

함수 타입 표현식

type명령을 사용해서 객체 선언처럼 함수 타입도 타입 별칭으로 정의할 수 있습니다. 이러한 표현을 함수 타입 표현식이라고 부릅니다.

코드를 분리함으로써 함수의 가독성이 올라가는 효과를 볼 수 있습니다.

type 함수_타입_명 = (매개변수: 매개변수_타입, ...) => 반환값_타입;

type Operation = (x: number, y: number) => number;

const add: Operation = (x, y) => x + y;

console.log(add(1 + 1));

함수 타입 표현식을 하나 정의하면 아래와 같이 여러 용도로 활용할 수 있습니다.

type Operation = (x: number, y: number) => number;

const add: Operation = (x, y) => x + y;
const sub: Operation = (x, y) => x - y;

함수 타입 표현식은 타입 별칭에 담지 않고도 타입 주석으로 바로 사용할 수 있습니다.

const add: (x: number, y: number) => number = (x, y) => x + y;

console.log(add(1 + 1));

함수 호출 시그니쳐

자바스크립트에선 모든 것이 객체입니다. 함수도 예외는 아니고 객체의 종류 중 하나죠.

그렇기에 함수 타입을 객체 정의처럼 할 수 있습니다. 이러한 표현을 호출 시그니쳐(Call Signatures)라고 부릅니다.

type 함수_타입_명 = {
  (매개변수: 매개변수_타입, ..) => 반환값_타입;
};

type SayStr= {
  (str: string) => void;
};

const say: SayStr = str => console.log(str);

console.log(say('hello'));

호출 시그니쳐가 함수 타입 표현식과 갖는 차이점은 호출 시그니처의 정의에는 프로퍼티가 추가될 수 있다는 것 입니다.

type SayStr= {
  (str: string) => void;
  name: string;
};

---

이것으로 타입스크립트에서 함수를 정의하는 방법을 알아보았습니다.