はじめに
ml5を利用しようとしたところ、型定義が無く、エラーが発生したため、型定義が無い時のモジュールの読み込み方法について調べました。
＊なお、ml5の型定義は現在draft版を作成中。
https://gist.github.com/dikarel/38a12ce263199a41ad67c15eac7f4b45
型定義が無い時のエラー
ml5を以下のようにモジュールをインポートするとエラーとなる。
import*asml5from"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が見つからないエラーは消えます。
constml5=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-requiresconstml5=require('ml5')この状態では ml5が any型になり、型チェックも賢い補完も行われません。
自分の使う API だけ型付けして置くと、開発がスムーズです。
App.tsx
typeImageClassifierOptions={alpha:number;topk:number;version:number;};interfaceIMl5{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>;}constml5=require('ml5')asIMl5;終わりに
以上。