제네릭은 타입 안전성을 확보하면서, 재사용 가능한 컴포넌트를 만들기 위한 TypeScript의 강력한 기능 중 하나입니다. 이번에는 제네릭 인터페이스를 사용하여 함수의 매개변수와 반환값의 타입을 동적으로 설정하는 방법을 살펴보겠습니다.

제네릭 인터페이스란?

제네릭 인터페이스는 여러 종류의 타입에 대해 동작할 수 있도록 유연성을 제공하는 인터페이스입니다. 이를 활용하면 함수나 클래스를 정의할 때, 타입 정보를 파라미터화하여 보다 유연하고 안전하게 사용할 수 있습니다.

제네릭 함수 선언

다음은 제네릭 인터페이스를 사용하여 함수의 매개변수와 반환값의 타입을 동적으로 설정하는 예제입니다.

interface Pair<T, U> {
  first: T;
  second: U;
}

function getFirstValue<T, U>(pair: Pair<T, U>): T {
  return pair.first;
}

const pair: Pair<number, string> = { first: 10, second: "Hello" };
const firstValue: number = getFirstValue(pair);
console.log(firstValue); // 10

위 예제에서 Pair 인터페이스는 두 개의 제네릭 타입 T와 U를 가지고 있으며, 이를 활용하여 함수 getFirstValue의 매개변수와 반환값의 타입을 동적으로 설정하고 있습니다.

제네릭 인터페이스를 활용한 다양한 활용 예

제네릭 인터페이스를 활용하면 다양한 상황에서 유연하게 타입을 다룰 수 있습니다. 예를 들어, 배열을 다루는 함수나 Promise와 같은 비동기 처리를 다루는 함수에서도 유용하게 활용할 수 있습니다.

interface Result<T> {
  success: boolean;
  data: T;
}

function fetchData<T>(url: string): Promise<Result<T>> {
  // 비동기 처리 로직
}

fetchData<number>('/api/data')
  .then((result) => {
    if (result.success) {
      console.log(result.data);
    } else {
      console.error('Failed to fetch data');
    }
  });

위 예제에서 Result 인터페이스의 제네릭 타입을 활용하여, 비동기 처리 결과의 타입을 동적으로 설정하고 있습니다.

제네릭 인터페이스를 통해 타입의 유연성과 안전성을 확보하면서, 여러 종류의 타입을 다루는 함수나 컴포넌트를 작성할 수 있습니다. TypeScript의 강력한 기능으로서 제네릭 인터페이스를 적극적으로 활용하여 보다 안전하고 유연한 코드를 작성해보시기 바랍니다.