[TS] 학급의 방법과 속성이 다르다

개시하다

이번에는 Typescript 상속관계가 있는 반에서 super 부모를 호출하는 방법으로 발생한 오류를 소개한다.
이유를 알면 별 것도 아니지만 생각보다 잘 어울려 정보 공유가 쉽지 않다.

문제 코드

hoge이라는 함수ParentClass와 그ChildClass를 계승한 두 가지 유형이 있다.ChildClass의hoge에서 부모의ParentClass의hoge를 호출했다.

/**
 * 親クラス
 */
class ParentClass {
  hoge : () => void = () => console.log("Hoge");
}

/**
 * 子クラス
 */
class ChildClass extends ParentClass {
  hoge : () => void = () => {
    super.hoge();
    console.log("Hoge2");
  }
}

const child = new ChildClass();
console.log(child.hoge()); // ---> "Hoge"のあとで"Hoge2"が表示されそうだが・・・？

super 오류

실제로 상기 코드는 ChildClass의hoge 내에서 오류가 발생할 수 있다.
구체적으로 부류hoge를 호출한 곳super.hoge()에서는 다음과 같은 오류가 발생할 수 있다.

'super' キーワードを使用してアクセスできるのは、基底クラスのパブリック メソッドと保護されたメソッドのみです。ts(2340)

는 생략했지만 hoge 자체는public이어서 문제가 없는 것 같습니다.
그렇다면 어떤 원인이 이 잘못을 야기시켰을까?

왜 틀렸지?

이것ParentClass의 작법에 문제가 있다.
Arro-함수 사용은 현재 쓰고 있지만 실제로는'반 속성'이 정의되어 있습니다.hoge에서 처리할 수 있는 것은'클래스 방법'이기 때문에 비방법 속성에 대한 지정super에서도 이 오류가 발생할 수 있습니다.

수정

수정super의ParentClass의 문법.
원래 있는 아로 함수의 문법이 아니라 클래스 내 방법으로 정의되었다.

class ParentClass {
  // これはプロパティ
  //hoge : () => void = () => console.log("Hoge");
  // これはメソッド
  hoge() {
    console.log("Hoge");
  }
}

실행 결과

Hoge
Hoge2

결과는 예상한 바와 같다.

총결산

이번에 hoge의 상속 관계가 있는 반의 속성과 방법을 소개했다.
최근Typescript과 React 모두 함수 구성 요소만 썼는데 원래 반을 쓸 기회가 없었고 그 이유에 푹 빠진 것을 도무지 알아차리지 못했다.
속성으로 기재된 경우에도 동작하기 때문에 사용하지 않는 경우ReactNative 등에서는 오류가 발생하기 어렵다.