TypeScript 함수 타입 표현식과 콜백 함수 타입 선언하기 (13강)

TypeScript에서는 **함수 타입**을 명확하게 선언할 수 있는 다양한 방법을 제공합니다. 함수는 JavaScript에서 중요한 역할을 하며, TypeScript에서는 그 타입을 정확히 정의하여 코드의 안정성을 높이고, 타입 에러를 방지할 수 있습니다. 특히 **콜백 함수(callback function)**를 다룰 때 함수의 타입을 명시하는 것은 매우 중요합니다. 이번 강의에서는 **TypeScript에서 함수 타입을 선언하는 방법**과 **콜백 함수 타입을 정의하는 방법**을 살펴보겠습니다.

TypeScript 함수 타입 선언하기

TypeScript에서는 함수의 타입을 **명시적으로 선언**할 수 있습니다. 함수 타입을 선언하는 방법은 여러 가지가 있지만, 기본적으로 함수의 매개변수와 반환값의 타입을 지정하는 방식으로 이루어집니다.

1. 함수 선언문을 이용한 타입 선언

가장 기본적인 함수 타입 선언은 **함수 선언문**을 사용하여 매개변수와 반환값의 타입을 명시하는 방법입니다. 이를 통해 함수가 어떤 타입의 값을 입력받고, 어떤 타입의 값을 반환하는지 명확히 알 수 있습니다.

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

위 코드에서 **`a: number`**와 **`b: number`**는 함수의 매개변수의 타입을 지정하며, **`: number`**는 함수의 반환값 타입을 정의합니다. 이 함수는 두 개의 **`number`** 타입 값을 입력받아, **`number`** 타입 값을 반환합니다.

2. 함수 표현식을 이용한 타입 선언

함수 표현식을 사용해서도 함수 타입을 선언할 수 있습니다. **함수 표현식**은 **함수 리터럴**을 변수에 할당하는 방식입니다. 이 방법에서도 매개변수와 반환값의 타입을 지정할 수 있습니다.

const multiply: (a: number, b: number) => number = (a, b) => a * b;

위 코드에서는 **`multiply`** 변수에 함수 타입을 명시적으로 지정하고, 이후에 함수 표현식으로 실제 구현을 제공합니다. **`(a: number, b: number) => number`**는 **`multiply`** 함수가 두 개의 **`number`** 타입 값을 입력받아, **`number`** 타입 값을 반환하는 함수임을 의미합니다.

콜백 함수 타입 선언하기

콜백 함수는 다른 함수의 매개변수로 전달되어, 해당 함수에서 호출되는 함수입니다. TypeScript에서는 콜백 함수의 타입을 명확하게 선언할 수 있습니다. 콜백 함수 타입을 선언할 때는 함수 타입을 변수에 할당하거나, 매개변수로 전달된 함수의 타입을 지정하는 방식으로 할 수 있습니다.

1. 콜백 함수 타입을 매개변수로 지정하기

콜백 함수는 다른 함수의 매개변수로 전달될 때, 그 타입을 명확히 선언할 수 있습니다. 예를 들어, 배열의 각 요소에 대해 작업을 수행하는 **배열의 `map` 함수**처럼 콜백 함수 타입을 매개변수로 지정하는 방법을 살펴보겠습니다.

function processArray(arr: number[], callback: (item: number) => void): void {
  arr.forEach(callback);
}

const printItem = (item: number) => {
  console.log(item);
};

processArray([1, 2, 3], printItem);  // 1, 2, 3이 출력됨

위 예제에서 **`processArray`** 함수는 **`arr`** 배열의 각 요소에 대해 **`callback`** 함수를 실행합니다. **`callback`** 함수의 타입은 **`(item: number) => void`**로 선언되어 있습니다. 즉, 이 콜백 함수는 **`number`** 타입의 매개변수를 하나 받고, 반환값은 **`void`**임을 나타냅니다. **`printItem`** 함수는 이 콜백 함수로 전달되어 배열의 각 요소를 출력합니다.

2. 콜백 함수 타입을 반환값으로 사용하기

콜백 함수는 함수의 반환값으로도 사용할 수 있습니다. 예를 들어, **`createMultiplier`** 함수는 숫자 값을 받아 해당 값으로 다른 숫자를 곱하는 **콜백 함수**를 반환하는 방식입니다.

function createMultiplier(factor: number): (num: number) => number {
  return (num: number) => num * factor;
}

const multiplyByTwo = createMultiplier(2);
console.log(multiplyByTwo(5)); // 10

위 예제에서 **`createMultiplier`** 함수는 **`factor`** 값을 받아, **`num`**에 곱하는 **콜백 함수**를 반환합니다. 이때 반환되는 콜백 함수의 타입은 **`(num: number) => number`**로 선언되어 있습니다. **`multiplyByTwo`** 함수는 **`createMultiplier(2)`**로 생성된 콜백 함수로, **5**를 입력하면 **10**을 반환합니다.

함수 타입 표현식과 콜백 함수 활용하기

TypeScript에서 함수 타입 선언은 특히 **콜백 함수**를 다룰 때 중요한 역할을 합니다. 함수 타입을 명시적으로 선언하면 **타입 안전성**을 높이고, 코드의 가독성을 향상시킬 수 있습니다. **콜백 함수**를 사용하여 다양한 비동기 작업이나 이벤트 처리, 배열 함수 등을 처리할 수 있으며, 이를 TypeScript에서 안전하게 관리하는 방법을 익히면 더 나은 개발 환경을 만들 수 있습니다.

함수 타입 표현식과 콜백 함수 활용 예제

다음은 **콜백 함수**를 활용하여 **비동기 처리**를 안전하게 관리하는 예제입니다.

function fetchData(url: string, callback: (data: string) => void): void {
  setTimeout(() => {
    const data = `Data from ${url}`;
    callback(data);
  }, 1000);
}

const processData = (data: string) => {
  console.log(data);
};

fetchData("https://api.example.com", processData);  // "Data from https://api.example.com" 출력

위 예제에서는 **`fetchData`** 함수가 데이터를 비동기적으로 받아오고, 그 데이터를 처리할 **콜백 함수**를 매개변수로 전달받습니다. **`callback`**의 타입은 **`(data: string) => void`**로 정의되어 있으며, 데이터를 처리하는 **`processData`** 함수가 콜백으로 전달됩니다. 이 예제에서는 **타입 안전성**을 유지하면서 비동기적으로 데이터를 처리할 수 있습니다.

마무리: 함수 타입 선언과 콜백 함수 활용하기

TypeScript에서는 함수 타입을 **명시적으로 선언**하여 코드의 **안전성**과 **가독성**을 높일 수 있습니다. 특히 콜백 함수와 같은 비동기 처리나 배열 함수와 결합할 때, 함수 타입을 정확히 지정하면 **타입 오류**를 방지하고 더 안정적인 코드를 작성할 수 있습니다. 이번 강의를 통해 함수 타입 선언과 콜백 함수 타입을 제대로 이해하고 활용하는 방법을 익혔기를 바랍니다. 다음 강의에서는 TypeScript에서 **제네릭(Generic)**을 사용하여 더 재사용 가능한 타입을 정의하는 방법을 배우겠습니다.

mystory55776 님의 블로그

TypeScript 함수 타입 표현식과 콜백 함수 타입 선언하기 (13강)