1. ホーム
  2. タイプスクリプト

[解決済み】既存のJavaScriptライブラリから.d.tsの「型付け」定義ファイルを作成する方法は?

2022-04-10 10:11:15

質問

自作とサードパーティーの両方のライブラリをたくさん使っています。 typings"ディレクトリにJqueryとWinRT用のものがあるようですが、どのように作成されるのですか?

解決方法は?

問題のライブラリ、その書き方、どの程度の精度を求めるかによって、いくつかの選択肢があります。その選択肢を、望ましい順におおまかに確認してみましょう。

すでにあるのかもしれない

常にDefinitelyTypedをチェックすること ( https://github.com/DefinitelyTyped/DefinitelyTyped をご覧ください。これは文字通り何千もの.d.tsファイルでいっぱいのコミュニティリポで、あなたが使っているものがすでにそこにある可能性が非常に高いのです。 また、TypeSearch ( https://microsoft.github.io/TypeSearch/ これはNPMで公開されている.d.tsファイルの検索エンジンです; DefinitelyTypedより少し多くの定義があります。 また、いくつかのモジュールはNPM配布の一部として独自の定義を配布していますので、独自の定義を書こうとする前にそのようなことがないか確認してください。

たぶん、あなたは1つも必要ない

TypeScriptは現在 --allowJs フラグを使用して、.js ファイルでより多くの JS ベースの推論を行うようになります。コンパイル時に、.js ファイルを --allowJs を設定して、十分な型情報を得られるかどうかを確認します。TypeScriptはこれらのファイル内のES5スタイルのクラスやJSDocコメントなどを認識しますが、ライブラリが奇妙な方法で自身を初期化している場合は、トリップしてしまうかもしれません。

で始める --allowJs

もし --allowJs で十分な結果が得られたので、より良い定義ファイルを自分で書きたい場合は、次のように組み合わせます。 --allowJs--declaration をクリックすると、ライブラリの型に対するTypeScriptの"best guess"が表示されます。もしJSDocのコメントがきちんと書かれていて、コンパイラがそれを見つけることができたなら、これは手作業で書かれたファイルと同じくらい良いものだろう。

dts-genをはじめよう

もし --allowJs がうまくいかなかった場合は、dts-gen ( https://github.com/Microsoft/dts-gen ) を使って、出発点を得ることができます。このツールは、オブジェクトの実行時の形状を使用して、利用可能なすべてのプロパティを正確に列挙します。プラス面では、これは非常に正確である傾向がありますが、このツールはまだ、追加のタイプを入力するためにJSDocコメントをスクレイピングすることをサポートしていません。あなたはこれを次のように実行します。

npm install -g dts-gen
dts-gen -m <your-module>

これは your-module.d.ts を現在のフォルダにコピーします。

スヌーズボタンを押す

TypeScript 2.0では、以下のように記述できるようになりました。

declare module "foo";

を実行することで import その "foo" モジュールで、型は any . もし、後で処理したいグローバルがある場合は、次のように書きます。

declare const foo: any;

を与えることになります。 foo 変数を使用します。