TypeScript 함수 타입 정의

TypeScript에서는 함수의 타입을 명확히 정의함으로써 코드의 안정성을 높이고 예기치 않은 오류를 방지할 수 있습니다. 이번 글에서는 함수 타입의 주요 구성 요소와 관련된 다양한 기술을 살펴보겠습니다.

함수의 매개변수와 반환값 타입 정의

함수의 매개변수와 반환값의 타입을 정의하면, 함수가 예상하지 않은 입력을 받거나 잘못된 출력을 반환하는 것을 방지할 수 있습니다.

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

위 코드에서 a와 b는 number 타입이고, 함수의 반환값도 number로 지정되었습니다. 만약 다른 타입을 전달하거나 반환하면 컴파일러가 오류를 경고합니다.

예제: Todo 관리

interface Todo {
  id: number;
  task: string;
  isCompleted: boolean;
}

function createTodoItem(task: string): Todo {
  return {
    id: Date.now(),
    task,
    isCompleted: false,
  };
}

이 함수는 task를 입력받아 새로운 Todo 객체를 생성합니다. 반환 타입이 명시되어 있어, 이 함수가 항상 올바른 형태의 객체를 반환하도록 강제됩니다.

---

선택적 매개변수와 기본값

선택적 매개변수는 ?를 사용하여 정의하며, 기본값은 =를 사용하여 설정합니다.

function greet(name?: string, greeting: string = '안녕하세요'): string {
  return name ? `${greeting}, ${name}!` : `${greeting}!`;
}

console.log(greet()); // "안녕하세요!"
console.log(greet('지훈')); // "안녕하세요, 지훈!"

• name?는 선택적 매개변수로, 생략이 가능합니다.
• greeting은 기본값이 설정된 매개변수입니다. 값이 전달되지 않으면 '안녕하세요'가 사용됩니다.

예제: 사용자 환영 메시지 생성

function createWelcomeMessage(
  userName?: string,
  messageTemplate: string = '환영합니다'
): string {
  return userName
    ? `${messageTemplate}, ${userName}님!`
    : `${messageTemplate}!`;
}

위 함수는 사용자 이름을 제공하지 않아도 동작하며, 기본 메시지 형식을 제공합니다.

---

함수 타입 (콜백 함수와 타입 선언)

TypeScript에서 함수의 타입은 (매개변수: 타입) => 반환타입 형태로 정의됩니다.

type Callback = (data: string) => void;

function processUserInput(input: string, callback: Callback): void {
  console.log('Processing:', input);
  callback(input.toUpperCase());
}

processUserInput('hello', (result) => {
  console.log('Callback received:', result);
});

• Callback 타입은 문자열을 매개변수로 받아 반환값이 없는 함수 타입을 정의한 것입니다.
• processUserInput 함수는 Callback 타입의 콜백을 받아 실행합니다.

예제: 게임 이벤트 처리

type EventHandler = (eventName: string) => void;

function registerGameEvent(eventName: string, handler: EventHandler): void {
  console.log(`이벤트 '${eventName}' 등록 완료`);
  handler(eventName);
}

registerGameEvent('게임 시작', (event) => {
  console.log(`'${event}' 이벤트가 발생했습니다!`);
});

콜백 함수 타입은 외부에서 정의된 규격에 맞게 함수 동작을 보장합니다.

---

함수 오버로드 (Function Overloading)

TypeScript에서는 동일한 함수 이름을 가지면서 서로 다른 매개변수 타입이나 개수를 처리하는 오버로드를 지원합니다.

function getUserInfo(id: number): string;
function getUserInfo(name: string): string;
function getUserInfo(value: number | string): string {
  if (typeof value === 'number') {
    return `유저 ID: ${value}`;
  } else {
    return `유저 이름: ${value}`;
  }
}

console.log(getUserInfo(123)); // "유저 ID: 123"
console.log(getUserInfo('지훈')); // "유저 이름: 지훈"

• 함수 오버로드를 통해 id 또는 name을 기반으로 사용자 정보를 가져옵니다.
• 구현부는 공통으로 작성되며, 매개변수 타입에 따라 다른 동작을 합니다.

예제: 쇼핑몰 상품 검색

function searchProducts(productId: number): string;
function searchProducts(productName: string): string;
function searchProducts(query: number | string): string {
  if (typeof query === 'number') {
    return `상품 ID ${query}로 검색 중입니다.`;
  } else {
    return `상품 이름 "${query}"로 검색 중입니다.`;
  }
}

console.log(searchProducts(101)); // "상품 ID 101로 검색 중입니다."
console.log(searchProducts('노트북')); // '상품 이름 "노트북"로 검색 중입니다.'

오버로드는 다양한 입력값을 처리하는 함수에서 특히 유용합니다.