[TypeScript] 함수(Function) 타입 정의하기

자바스크립트에서 함수를 설명할 때 가장 중요한 것은 "어떤 매개변수를 받아서, 어떤 값을 반환하는가" 이다. 타입스크립트도 마찬가지다. 단지 그 설명에 타입만 추가하면 된다.

1. 기본적인 함수 타입 정의

함수의 타입은 매개변수의 타입과 반환값의 타입으로 결정된다.

1-1. 함수 선언식

매개변수 뒤에 타입을 적고, 소괄호 뒤에 반환값의 타입을 적는다.

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

💡 반환값 타입 추론 타입스크립트는 return문을 보고 반환값의 타입을 자동으로 추론할 수 있다. 따라서 반환 타입은 생략해도 무방하다.

function func(a: number, b: number) {
  return a + b; // 자동으로 number 반환으로 추론됨
}

1-2. 화살표 함수

화살표 함수도 선언식과 동일한 방식으로 타입을 정의한다.

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

// 반환값 타입 생략 가능
const add2 = (a: number, b: number) => a + b;

2. 매개변수 다루기

함수의 매개변수를 정의할 때 사용할 수 있는 유용한 기능들이다.

2-1. 매개변수 기본값 (Default Parameter)

매개변수에 기본값이 설정되어 있다면, 타입스크립트가 해당 기본값을 기준으로 타입을 자동으로 추론한다.

function introduce(name = "조태민") {
  console.log(`name : ${name}`);
}

// introduce(1); // ❌ 오류: string 타입에 number 할당 불가

만약 기본값과 다른 타입으로 명시하거나, 다른 타입의 값을 인수로 전달하면 에러가 발생한다.

2-2. 선택적 매개변수 (Optional Parameter)

매개변수가 있어도 되고 없어도 되는 경우, 변수명 뒤에 물음표(?)를 붙여 선택적 매개변수로 만들 수 있다.

function introduce(name = "조태민", tall?: number) {
  console.log(`name : ${name}`);
  
  // tall은 number | undefined 타입이 됨
  if (typeof tall === "number") {
    console.log(`tall : ${tall + 10}`);
  }
}

introduce("조태민", 178); // ✅
introduce("조태민");      // ✅ (tall 생략 가능)

주의할 점:

선택적 매개변수의 타입은 자동으로 undefined와 유니온 된 타입(Type | undefined)이 된다. 따라서 사용 시 타입 좁히기가 필요할 수 있다.
선택적 매개변수는 필수 매개변수보다 앞에 올 수 없다. 항상 뒤에 배치해야 한다.

// ❌ 오류 발생: 필수 매개변수(age)는 선택적 매개변수(tall) 뒤에 올 수 없음
// function introduce(name = "조태민", tall?: number, age: number) {}

3. 나머지 매개변수 (Rest Parameter)

가변적인 개수의 인수를 배열 형태로 받을 때 사용하는 나머지 매개변수(...rest)의 타입 정의 방법이다.

3-1. 배열로 정의하기

일반적으로는 특정 타입의 배열(Type[])로 정의한다.

function getSum(...rest: number[]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

getSum(1, 2, 3); // [1, 2, 3]으로 전달됨

3-2. 튜플로 정의하기 (개수 제한)

만약 인수의 개수를 정확히 제한하고 싶다면 튜플 타입을 사용할 수 있다.

// 정확히 숫자 3개만 받을 수 있음
function getSum(...rest: [number, number, number]) {
  let sum = 0;
  rest.forEach((it) => (sum += it));
  return sum;
}

getSum(1, 2, 3);    // ✅
// getSum(1, 2, 3, 4); // ❌ 오류: 3개만 허용됨

요약

기본 정의: 매개변수와 반환값의 타입을 명시한다. (반환값은 추론 가능)
기본값: param = value 형태이며, 타입이 자동 추론된다.
선택적 매개변수: param?: type 형태이며, 필수 매개변수 뒤에 와야 한다.
나머지 매개변수: ...rest: type[] 형태이며, 튜플을 쓰면 개수 제한이 가능하다.

Taemni's Blog