Frontend/Typescript

안전한 코딩을 위한 필수 코스: 함수 타이핑 (매개변수, 반환 타입, 옵셔널 파라미터)

미니임 2026. 2. 19. 00:22

안녕하세요! 오늘은 TypeScript를 사용하면서 가장 빈번하게 작성하게 되는 함수(Function)의 타입 정의에 대해 깊이 있게 알아보겠습니다.

함수는 프로그램의 논리를 구성하는 가장 작은 단위입니다. 함수에 올바른 타입을 입히는 것만으로도 수많은 런타임 에러를 사전에 방지하고, 코드의 가독성을 획기적으로 높일 수 있습니다.

1. 함수의 기본 타이핑: 매개변수와 반환 타입

가장 기본적인 형태는 각 매개변수 뒤에 : type을 붙이고, 함수 괄호 뒤에 반환 값의 타입을 정의하는 것입니다.

기본 예제: 사칙연산 함수

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

const result = add(10, 20); // 30
// add(10, "20"); // Error: 'string' 형식의 인수는 'number' 형식의 매개변수에 할당될 수 없습니다.

반환값이 없는 경우: void

함수가 아무것도 반환하지 않을 때는 void 타입을 사용합니다.

function logMessage(message: string): void {
  console.log(`[LOG]: ${message}`);
}

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

때로는 상황에 따라 인자를 전달할 수도, 안 할 수도 있는 경우가 있습니다. 이때 매개변수 이름 뒤에 ?를 붙여 옵셔널 파라미터로 만들 수 있습니다.

예제: 사용자 인사말 함수

function greet(name: string, title?: string): string {
  if (title) {
    return `Hello, ${title} ${name}!`;
  }
  return `Hello, ${name}!`;
}

console.log(greet("Alice"));          // "Hello, Alice!"
console.log(greet("Bob", "Captain")); // "Hello, Captain Bob!"

⚠️ 주의사항: 옵셔널 파라미터는 반드시 필수 파라미터 뒤에 위치해야 합니다. function greet(title?: string, name: string) (X) - 에러 발생

3. 기본값 매개변수 (Default Parameters)

ES6 문법과 동일하게 매개변수에 기본값을 설정할 수 있습니다. 타입스크립트는 기본값을 바탕으로 타입을 추론하기도 합니다.

예제: 상품 가격 계산

function calculatePrice(price: number, taxRate: number = 0.1): number {
  return price + (price * taxRate);
}

console.log(calculatePrice(1000));      // 1100 (기본 세율 0.1 적용)
console.log(calculatePrice(1000, 0.2)); // 1200 (전달된 세율 0.2 적용)

4. 나머지 매개변수 (Rest Parameters)

인수의 개수가 정해지지 않았을 때 사용하는 가변 인자의 경우, 배열 타입을 사용하여 정의합니다.

예제: 모든 숫자의 합 구하기

function sumAll(...numbers: number[]): number {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sumAll(1, 2, 3));             // 6
console.log(sumAll(10, 20, 30, 40, 50));  // 150

5. 함수 타입 표현식 (Function Type Expressions)

함수 자체를 변수에 할당하거나, 콜백 함수의 타입을 정의할 때 화살표 함수 기호를 사용하여 타입을 선언할 수 있습니다.

예제: 고차 함수에서의 활용

// 함수 타입 정의
type MathOperation = (x: number, y: number) => number;

const multiply: MathOperation = (a, b) => a * b;
const divide: MathOperation = (a, b) => a / b;

function executeOp(a: number, b: number, operation: MathOperation): number {
  return operation(a, b);
}

console.log(executeOp(5, 4, multiply)); // 20

6. 인터페이스를 이용한 함수 타이핑

객체의 속성으로 함수가 포함되거나, 더 복잡한 구조를 정의할 때 인터페이스를 사용할 수 있습니다.

예제: 계산기 인터페이스

interface Calculator {
  brand: string;
  calculate: (a: number, b: number) => number;
}

const myCalc: Calculator = {
  brand: "Casio",
  calculate(a, b) {
    return a + b;
  }
};

💡 요약 및 마무리

  1. 매개변수와 반환 타입: (param: type): returnType 형태로 명시합니다.
  2. 옵셔널 파라미터: ?를 사용하여 선택적 인자를 정의하며, 뒤쪽에 배치합니다.
  3. 기본값: =을 통해 기본값을 설정하면 타입 추론이 일어납니다.
  4. 나머지 매개변수: ...args: type[] 형태로 여러 인자를 배열로 받습니다.
  5. 함수 타입 별칭: type이나 interface를 활용해 함수 구조를 재사용할 수 있습니다.
반응형