ウェブサイト検索

javascript - TypeScriptクラスでES6クラスを拡張する方法


私はES6で書かれたJavaScriptクラスを持っています:

// MyClass.js
export default class MyClass {
  myfunction() {
    console.log('myfunction called');
  }
}

私はこのクラスをTypeScriptのクラスで拡張したいです:

// MyTSClass.ts
import MyClass from './MyClass';

class MyTSClass extends MyClass {
  public initialize() {
    this.myfunction();
  }
}

これは TypeScript コンパイラのエラーを生成します:

TS2339: プロパティ 'myfunction' は型 'MyTSClass' に存在しません

私は tsconfig で esModuleInterop を true に設定しています。

これが役に立つかもしれないと思い、宣言ファイルを作ろうと試みました:

// MyClass.d.ts
export = MyClass;

declare class MyClass {
  myfunction: void;
}

これによりコンパイラは満足しますが、ブラウザで生成されたコードでは予期しないものが表示され、コンソールログは表示されません:

class MyTSClass extends WEBPACK_IMPORTED_MODULE_1__["MyClass"]...

私は何を間違っているのですか?

回答 #1

提供された情報からは判断が難しいですが、私は initialize を呼び出している部分から始めます。つまり、constructor を使うつもりではなかったのですよね? Chromeでは、debugger; ステートメントを使ってコードの特定のポイントでデバッガを起動できます。これはブレークポイントを設定するよりも簡単だと思います。そこから、コードをステップ実行して何が起こっているか確認できます。また、クラスのインスタンスを console.log してプロトタイプチェーンを調べ、myfunction メソッドが存在するか確認することもできます。