타입스크립트에서는 제네릭을 사용하여 재사용 가능한 컴포넌트를 만들 수 있습니다. 제네릭 인터페이스를 사용하면 여러 가지 유형의 데이터와 함께 작동하는 범용 인터페이스를 설계할 수 있습니다.

제네릭 인터페이스 정의하기

제네릭을 사용하여 매개변수화된 인터페이스를 생성하려면 다음과 같이 작성할 수 있습니다.

interface Container<T> {
  value: T;
}

위의 예제에서 Container 인터페이스는 T라는 제네릭 타입 매개변수를 갖습니다. 이제 Container 인터페이스는 다양한 유형의 value 속성을 포함하는 객체를 다룰 수 있습니다.

다른 제네릭 인터페이스와의 결합

제네릭 인터페이스를 다른 제네릭 인터페이스와 결합하여 보다 유연한 타입을 정의할 수 있습니다. 다음은 두 개의 다른 인터페이스를 결합하는 예제입니다.

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

interface Container<T> {
  value: T;
}

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

const container: Container<Pair<number, string>> = {
  value: { first: 10, second: "Hello" }
};

const value: number = getValueFromPair(container.value);
console.log(value); // 출력 결과: 10

위의 코드에서 Pair와 Container 두 인터페이스를 결합하여 Container가 Pair 객체를 가리킬 수 있도록 하였습니다.

이러한 방식으로 제네릭 인터페이스를 결합하면 더 다양한 상황에서 유연하게 활용할 수 있습니다.

결론

타입스크립트에서 제네릭 인터페이스를 다른 제네릭 인터페이스와 결합하여 더 다양한 타입을 다룰 수 있습니다. 이를 통해 코드의 재사용성을 높이고 일반화된 솔루션을 구현할 수 있습니다.