タイプスクリプト、マイナスタイプスクリプト

長年にわたり、TypeScriptはJavaScript開発の不可欠な部分となっています。 JavaScriptに基づいたタイプシステムを追加し、コードの読みやすさと保守性を高めます。ただし、タイプスクリプトの追加の構文とコンパイルの手順により、開発の負担が増すことがあります。幸いなことに、TypeScriptチームは、JSDOCを使用して純粋なJavaScriptコードのタイプチェックをサポートしています。

プロジェクト設定

JSDOCでタイプチェックを開始するには、nodejsとnpmが必要です。新しいプロジェクトを作成し、 npm initを実行します。この記事では、コードエディターとしてVSコードを使用します。 TypeScriptのインストール：

 NPM I -D TypeScript

tsconfig.jsonファイルを作成し、次の構成を追加します。

 {
  「コンパイラポーション」：{
    「ターゲット」：「esnext」、
    「モジュール」：「esnext」、
    「moduleResolution」：「ノード」、
    「lib」：["es2017"、 "dom"]、
    「Allowjs」：本当、
    「checkjs」：本当、
    「ノエミット」：本当、
    「厳格」：偽、
    「noimplicthis」：本当、
    「Alwaysstrict」：本当、
    「esmoduleinterop」：true
  }、
  "include"：["script"、 "test"]、
  「除外」：["node_modules"]
}

重要な構成は、 allowJsとcheckJsであり、どちらもtrueに設定されているため、typescriptがJavaScriptコードを確認できます。また、 /scriptディレクトリをコードの場所として指定しました。

簡単な例

index.jsファイルを作成し、簡単な追加関数を書き込みます。

 /**
 * 2つの番号を一緒に追加します
 * @param {number} x
 * @param {number} y
 * @return {number}
 */
関数add（x、y）{
  xyを返します。
}

jsdoc annotations @param and @returnを使用して、パラメーターの種類と返品値を指定します。エラータイプで関数を呼び出してみてください、VSコードはエラーをプロンプトします。

JSDOCアノテーションは、タイプスクリプトコードと同等です。

 /**
 * 2つの番号を一緒に追加します
 */
関数add（x：number、y：number）：number {
  xyを返します。
}

JSDOCは、 HTMLElement 、 MutationRecordなどのstring 、 object 、 Array 、DOMタイプなど、さまざまな組み込みタイプをサポートしています。

JSDOCでは、 WeakMapなどのオブジェクトにタイプ制約を追加することもできます。

 /** @type {weakmap<object string> } */
const metadata = new weakMap（）;

const object = {};
const otherObject = {};

metadata.set（オブジェクト、42）; //値が文字列metadata.set（otherObject、 'hello world'）ではないため、エラーが報告されます。</object>

カスタムタイプ

JSDOCでは、 Personタイプなど、カスタムタイプを定義できます。

 /**
 * @typedefの人
 * @property {string} name-人の名前
 * @property {number} age-人の年齢
 * @property {string} [趣味]  - オプションの趣味
 */

@typedefを使用してタイプを定義し、 @propertyまたは@propを使用してプロパティを定義します。

カスタムタイプを使用します：

 /** @type {person}*/
const person = {name： 'John doe'、age：30、趣味： 'reading'};

限られた一連のオプションは、組合タイプを使用して定義できます。

 /**
 * @Typedef {'cat' | 'dog' | 'fish'}ペット
 */

ジェネリック

JSDOCは、 identity関数などのジェネリックをサポートしています。

 /**
 * @template t
 * @param {t}ターゲット
 * @return {t}
 */
関数ID（ターゲット）{
  ターゲットを返します。
}

@templateを使用して、一般的なタイプを定義します。

タイプ変換

イベントリスナーの処理など、タイプの変換が必要な場合があります。

 document.getElementById（ 'input'）。AddEventListener（ 'input'、event => {
  console.log（/** @type {htmlinputelement}*/（event.target）.value）;
}）;

/** @type {类型} */型変換の場合。

要約します

JSDOCは、純粋なJavaScriptコードを作成しながら、タイプチェックとコードプロンプトを取得する方法を提供します。これは、追加の構文とコンピレーションの手順を導入せずにコード品質を改善したいプロジェクトに役立ちます。タイプスクリプトコンパイラは強力ですが、JSDOCは柔軟な代替品を提供します。

以上がタイプスクリプト、マイナスタイプスクリプトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。