반응형

만약 Typescript에서 class로 다중상속을 하려고 하면 에러가 발생한다. 예시를 통해서 확인해보자

 

아래와 같은 코드가 있다고 가정한다.

class Test1 extends TestProblem {
  test() {}
}

class Test2 extends TestProblem {
  test() {}
}

// Error
class Diamond extends Test1, Test2 {}

이렇게 2개 이상의 클래스를 상속받으려고 하면 에러가 난다.

 

다이아몬드 문제

왜 Typescript에서는 class의 다중상속을 막아두었을까?

 

조금 더 자세한 설명을 위해 다른 코드를 예시로 들어보자.

class TestProblem {
  test(logString: string = 'TestProblem') {
    console.log(logString)
  }
}

class Test1 extends TestProblem {
  test(logString: string = 'Test1') {
    super.test(logString);
  }
}

class Test2 extends TestProblem {
  test(logString: string = 'Test2') {
    super.test(logString);
  }
}

class Diamond extends Test1, Test2 {
  test(logString: string = '???') {
    super.test(logString);
  }
}

만약 typescript 다중상속을 지원한다고 가정해보자.

위 코드에서는 Test1 클래스와 Test2 클래스는 TestProblem을 상속받았다.

그 다음 Diamond 클래스는 Test1과 Test2 클래스를 상속받았다.

 

더 간단하게 그림으로 확인해보자.

이 때 Diamond class에서는 test메서드를 사용할 때 누구를 가리키는지 알수 없게 된다.

이 형태가 생긴 모양이 다이아 같다고 해서 붙여진 이름이 다이아몬드 문제이다.

또한 위 코드는 실제로 실행하면 당연히 에러가 난다.

 

Typescript에서 다중 상속을 구현하고 싶다면 interface나 Mixin을 사용하자.

당연하지만 interface는 다중상속이 가능하다. (실제 구현이 없기 때문이다.)

반응형
얼은펭귄