(小ネタ)TypeScriptで型定義ファイルが無いモジュールの読み込み方法

はじめに

ml5を利用しようとしたところ、型定義が無く、エラーが発生したため、型定義が無い時のモジュールの読み込み方法について調べました。
＊なお、ml5の型定義は現在draft版を作成中。
https://gist.github.com/dikarel/38a12ce263199a41ad67c15eac7f4b45

型定義が無い時のエラー

ml5を以下のようにモジュールをインポートするとエラーとなる。

import * as ml5 from "ml5";

具体的には以下のようなコンパイルエラーが発生する。

Could not find a declaration file for module 'ml5'.
Try npm install @types/ml5 if it exists or add a new declaration (.d.ts) file containing declare module 'ml5';

型定義が無い時の読み込み方法

型定義ファイル( d.ts )を自作すれば良いが、面倒な時はrequire でモジュールを読み込みます。
暗黙的に any 型になるので、型定義ファイル d.ts が見つからないエラーは消えます。

const ml5 = require('ml5')

ただし TSLint の設定によっては [tslint] require statement not part of an import statement (no-var-requires) という警告がでます。
// tslint:disable-next-line:no-var-requires とコメントで require('ml5') についてだけ警告を無効にします。

// tslint:disable-next-line:no-var-requires
const ml5 = require('ml5')

この状態では ml5 が any 型になり、型チェックも賢い補完も行われません。
自分の使う API だけ型付けして置くと、開発がスムーズです。

App.tsx

type ImageClassifierOptions = {
  alpha: number;
  topk: number;
  version: number;
};

interface IMl5 {
   imageClassifier(
    model: "MobileNet" | "Darknet" | "Darknet-tiny" | string,
    callback?: (error: any, result: any) => void
  ): undefined | Promise<any>;
  
  imageClassifier(
    model: "MobileNet" | "Darknet" | "Darknet-tiny" | string,
    options?: ImageClassifierOptions,
    callback?: (error: any, result: any) => void
  ): undefined | Promise<any>;
  
  imageClassifier(
    model: "MobileNet" | "Darknet" | "Darknet-tiny" | string,
    video?: MediaElement | HTMLVideoElement,
    options?: ImageClassifierOptions,
    callback?: (error: any, result: any) => void
  ): undefined | Promise<any>;

}
const ml5 = require('ml5') as IMl5;

終わりに

以上。