[Vue] 自作JSライブラリの型定義ファイルを作る その2 [TypeScript]

mayatasomayataso

前の記事(https://coneta.jp/article/show/2908)

型定義ファイルを作っていく。

先方が用意したJSファイル (簡略化済み)

// src/apis/sample_api.js
export default class SampleApi {
   static debug(message) { console.warn(message); }

   constructor() {
      var caller = this;
      new SampleChannel(function (channel) {
         caller._testApi = channel.api;
      });
      caller._testApi = 
   }

   onConnect() { ... }
}

ちょっと長くなったが、2つのメソッド、1つのプライベート変数の定義が必要そうな感じ。

用意した型定義ファイル

Vue-CLIで作成したプロジェクトは、デフォルトで src/@types/ が型定義ファイルの置き場所になっているので、ここに配置する。

declare module "@/apis/sample_api.js" {
   import SampleApi from "@/apis/sample_api.js";

   _testApi: any;
   static debug(message);
   onConnect();

   export default SampleApi;
}

これでOK

declareが肝心の型宣言キーワードですが、これに関しては前記事の参考文献を参照。