타입스크립트 제너릭 과 인터페이스 응용

Generic과 Interface

Generic의 제약 조건 및 Interface 확장을 이용해 풀 수 있는 문제입니다.

문제에서 Player 클래스의 인스턴스를 생성하고, 메소드를 호출하는 부분을 살펴보겠습니다.

const player = new Player<IVideo>();
player.openFile({title: '타입스크립트', runningTime: 60, extention: 'MPEG'});
player.play();

player 객체에 Generic으로 IVideo를 넘겨주고 있는 것을 볼 수 있습니다. 하지만 작성되어 있는 코드에서는 Player 클래스의 Generic에서 string을 사용하도록 제약 조건이 걸려있어, 이를 IVideo로 수정합니다.

class Player<T extends IVideo> {
  ...

그리고 IVideo Interface에는 없는 titel이나 runningTime 속성을 사용하고 있는데, 이는 IFile Interface에 존재하는 것입니다. 따라서 IVideo에서 이를 상속하여 사용할 수 있도록 작성해주면 끝입니다.

interface IVideo extends IFile {
  ...

다만 현재 Player 클래스에서 Generic으로 사용하는 타입에 대해 IVideo 타입으로 반드시 제약 조건이 필요한 것은 아니기 때문에, 그냥 제약 조건을 제거해도 됩니다.

class Player<T> {
  ...

하지만 만약 아래와 같은 메소드가 클래스에 포함되었다면, 반드시 IVideo 타입으로 제약 조건이 필요합니다.

  printTitle(): void {
    console.log(this.file.title);
  }

답안 코드

interface IFile {
  title: string
  runningTime: number    
}

// interface를 확장해주세요.
interface IVideo extends IFile{
  extention: string
}

// Genric 제약조건을 변경해주세요.
class Player<T extends IVideo> {
  private file: T;
  
  openFile(file: T): void {
    this.file = file;
  }
     
  play(): void {
    console.log(this.file);
  }
}

// 아래 코드는 수정을 하지 않습니다. 
const player = new Player<IVideo>();
player.openFile({title: '타입스크립트', runningTime: 60, extention: 'MPEG'});
player.play();