[TypeScript] 타입스크립트에서의 함수

in Study on typescript


타입스크립트에서 함수는 크게 3가지로 타입을 정의할 수 있습니다.

  • 함수의 매개변수 타입
  • 함수의 반환 타입
  • 함수의 구조 타입

함수의 기본적인 타입 선언

타입스크립트의 함수 선언 방법을 이해하기 위해 자바스크립트 함수를 먼저 만들고

function sum(a, b) {
  return a + b;
}

위 자바스크립트 함수에 타입을 부여하면 아래와 같습니다.

function sum(a: number, b: number): number {
  return a + b;
}

함수의 반환 값에 타입을 정하지 않을 때는 void 사용


함수의 인자

타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주합니다. 따라서, 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어왔는지 확인합니다. 달리 말하면 정의된 매개변수 값만 받을 수 있고, 추가로 인자를 받을 수 없다는 의미입니다.

function sum(a: number, b: number): number {
  return a + b;
}

sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

위와 같은 특성은 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대됩니다. 만약 이러한 특성을 살리고 싶다면 ?를 이용해서 아래와 같이 정의할 수 있습니다.

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 10

매개변수 초기화 가능합니다.

function sum(a: number, b = "100"): number {
  return a + b;
}
sum(10, undefined); // 110
sum(10, 20, 30); // error, too many parameters
sum(10); // 110


REST 문법이 적용된 매개변수

ES6 문법에서 지원하는 Rest문법은 타입스크립트에서 다음과 같이 사용할 수 있습니다.

function sum(a: number, ...nums: number[]): number {
  const totalNumber = 0;
  for (let key in nums) {
    totalNumber += nums[key];
  }
  return a + totalNumber;
}