제네릭은 타입스크립트 코드에서 재사용 가능한 컴포넌트를 만들 수 있도록 도와주는 강력한 도구입니다. 제네릭을 활용하여 인터페이스를 정의하고, 이를 확장하고 구현하는 방법에 대해 알아보겠습니다.

제네릭 인터페이스의 정의

제네릭 인터페이스는 특정 타입을 포함하는 인터페이스를 선언할 때 사용됩니다. 예를 들어, Box라는 제네릭 인터페이스를 만들어보겠습니다.

interface Box<T> {
  value: T;
}

위의 코드에서 Box 인터페이스는 T 라는 타입 파라미터를 갖고, value 필드를 포함하는 것을 정의하고 있습니다.

제네릭 인터페이스의 확장

다른 제네릭 인터페이스를 확장하는 것은 제네릭을 이용해 더 범용적이고 유연한 구현을 할 수 있도록 해줍니다. 다음은 Box 인터페이스를 확장하는 BoxWithNumber 인터페이스의 예시입니다.

interface BoxWithNumber<T> extends Box<T> {
  multiply: (value: T) => T;
}

위의 코드에서 BoxWithNumber 인터페이스는 Box 인터페이스를 확장하고, multiply 메서드를 추가로 포함하고 있습니다.

제네릭 인터페이스의 구현

확장된 제네릭 인터페이스를 구현하는 방법은 다음과 같습니다.

class NumberBox implements BoxWithNumber<number> {
  value: number;

  constructor(value: number) {
    this.value = value;
  }

  multiply = (factor: number) => this.value * factor;
}

const box = new NumberBox(10);
console.log(box.multiply(2)); // 20

위의 코드에서 NumberBox 클래스는 BoxWithNumber 인터페이스를 구현하고 있으며, multiply 메서드를 정의하고 있습니다.

이처럼 제네릭 인터페이스를 정의하고, 확장하며 구현함으로써 타입스크립트에서 더욱 유연하고 강력한 코드를 작성할 수 있습니다.

참고 자료: https://www.typescriptlang.org/docs/handbook/2/generics.html

위의 내용은 제네릭을 활용한 타입스크립트 인터페이스의 확장과 구현에 대한 내용을 다루고 있습니다. 이를 참고하여 보다 효율적이고 유용한 타입스크립트 코드를 작성할 수 있습니다.