함수 타입 (Function Types)

TypeScript에서는 함수의 매개변수(Parameter)와 반환값(Return value)에 타입을 지정할 수 있다. 이를 통해 잘못된 인자 전달이나 예상치 못한 반환 타입을 방지하며, 함수 시그니처 자체가 문서 역할을 한다.

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

function sayHi(name: string, greeting: string = "Hi"): string {
  return `${greeting}, ${name}`;
}

1. Parameter 타입

함수에 전달되는 매개변수의 타입을 지정하면 개수와 타입 모두 검사된다.

// 예제1
function add(x: number, y: number): number {
  return x + y;
}

add(10, 5);
add(10); // 오류: 인자 부족
add(10, 5, 20); // 오류: 인자 초과

// 예제2
function addToCart(name: string, price: number, quantity: number) {
  return `${name}, ${price}, ${quantity}`;
}

addToCart("pineapple", 100, 2);
addToCart("apple", 100); // 오류
addToCart("grape", 10, 10, false); // 오류

1-1. 기본값 설정 (Default Parameter)

기본값을 지정하면 인자가 생략될 경우 해당 값이 사용된다.

function addToCart(name: string, price: number, quantity: number = 1) {
  return `${name}, ${price}, ${quantity}`;
}

addToCart("orange", 100); // orange, 100, 1
addToCart("cherry", 100, 3); // cherry, 100, 3

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

매개변수가 필수가 아닐 때 ?를 붙인다.

function addToCart(name: string, price: number, quantity?: number) {
  return `${name}, ${price}, ${quantity}`;
}

addToCart("orange", 1000); // orange, 1000
addToCart("banana", 2000, 2); // banana, 2000, 2

로직 처리 예제

// Optional parameter + if문
function addToCart(name: string, price: number, quantity?: number) {
  if (quantity) {
    // Logic 추가
  }
  return `${name}, ${price}, ${quantity}`;
}

// Optional parameter + || 연산자
// quantity가 0, undefined, null 등 falsy 값일 경우 1 사용
function addToCart(name: string, price: number, quantity?: number) {
  return `${name}, ${price}, ${quantity || 1}`;
}

addToCart("apple", 1000, 0); // apple, 1000, 1 (0도 falsy로 처리됨)

// Optional parameter + ?? 연산자
// quantity가 undefined 또는 null일 경우에만 기본값 사용
function addToCart(name: string, price: number, quantity?: number) {
  return `${name}, ${price}, ${quantity ?? 1}`;
}

addToCart("apple", 1000, 0); // apple, 1000, 0 (0은 허용됨)
addToCart("banana", 2000); // banana, 2000, 1

2. 컨텍스트 타입 (Contextual Typing)

함수 표현식에서 맥락에 따라 매개변수 타입이 자동 추론된다. 특히 콜백 함수에서 유용하다.

const numbers: number[] = [1, 2, 3, 4, 5];
const letters: string[] = ["a", "b", "c", "d"];

numbers.map((element) => element.toFixed()); // element: number
letters.forEach((letter) => letter.toUpperCase()); // letter: string

3. Return 타입

함수가 반환하는 값의 타입을 명시하면 코드 가독성과 안정성이 높아진다.

3-1. 함수 선언문

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

// string
function addTwoValues(x: number, y: number): string {
  return `${x}${y}`;
}

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

// boolean
function isTen(x: number, y: number): boolean {
  return x + y === 10;
}

3-2. 화살표 함수

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

// string
const addTwoValues = (x: number, y: number): string => {
  return `${x}${y}`;
};

// number
const addTwoValues = (x: number, y: number): number => {
  return x + y;
};

// boolean
const isTen = (x: number, y: number): boolean => {
  return x + y === 10;
};

4. 특수 반환 타입

4-1. void

값을 반환하지 않는 함수.

function logMessage(message: string): void {
  console.log(message);
}

4-2. never

절대 정상적으로 반환하지 않는 함수. (ex. 무한 루프, 오류 발생)

function throwError(message: string): never {
  throw new Error(message);
}