More than 5 years have passed since last update.

jQueryに追加した関数のTypeScript型定義を作成する

Last updated at 2018-10-02Posted at 2018-10-02

問題

拡張されたjQueryをTypeScriptから使おうとしたら、コンパイル時このようなエラーが出た。

TS2339: Property 'request' does not exist on type 'JQueryStatic<HTMLElement>'.

この request は下記のように追加された関数なので、当然jQueryの型定義ファイルには含まれていないため、このエラーが発生した。

$.fn.request = function (handler, option) {
    ...
    return new Request($this, handler, options);
};

型定義ファイルにこのrequest関数を定義してやればよい。

interface JQueryStatic {
    request(handler: string, options: any): any;
}

TypeScriptのinterfaceは同じシグネチャの定義を複数記述すると、上書きや無視ではなく、ちゃんと合体してもらえる。おかげで、全て再定義せずに拡張することができる。

エラー文言から、$はJQueryStaticと認識されていることがわかるので、JQueryStaticインタフェースを定義している。また、ここではとりあえずコンパイルが通るようにしたいだけなので、よくわからない型はanyとした。

型定義は任意のファイル名に拡張子「.d.ts」でOK。そして、tsconfig.jsonなどでコンパイラにこのファイルを読み込むように場所を教えてやる。

{
    ...
    "compilerOptions": {
        ...
        "baseUrl": "./",
        "typeRoots": ["types", "node_modules/@types"]
    }
}

baseUrlで相対パスの起点となるディレクトリを設定し、typeRootsに型定義ファイルが格納されているディレクトリを設定する。

ここでは、typesというディレクトリに自作の型定義ファイルを格納した。

これで、$.request(...)とこの関数を使ってもちゃんとコンパイルするようになる。

もし下記のようなエラーが発生した場合、型定義ファイルがコンパイル対象のファイルとして認識されてしまっていないか確認する。

Module build failed: Error: Typescript emitted no output for ...

私の場合、他のコンパイルすべき.tsファイルと同じディレクトリに型定義ファイル(.d.ts)を入れて、ディレクトリ中の.tsファイルをすべてコンパイルするように指定していたため、このエラーに遭遇した。