TypeScript のコメントディレクティブ

TypeScript はいくつかの注釈ディレクティブを受け入れます。

いわゆる「コメント命令」とは、JS のダブルスラッシュコメントの形式でコンパイラーに発行されるコマンドを指します。

`// @ts-nocheck`

// @ts-nocheck は、現在のスクリプトの型チェックを行わないようにコンパイラーに指示します。これは、TypeScript スクリプトまたは JavaScript スクリプトに使用できます。

// @ts-nocheck

const 要素 = document.getElementById(123);

上記の例では、document.getElementById(123) に型エラーがありますが、コンパイラはスクリプトの型チェックを実行しないため、エラーは報告されません。

`// @ts-check`

// @ts-check が JavaScript スクリプトの先頭に追加される場合、コンパイラーは、checkJs コンパイルオプションが有効かどうかに関係なく、スクリプトの型チェックを行います。

// @ts-check
isChecked = true;

console.log(isChceked); // エラーレポート

上の例は JavaScript スクリプトです。// @ts-check は TypeScript コンパイラーに型チェックを指示するため、最後の行はエラーを報告し、スペルミスを促します。

`// @ts-ignore`

// @ts-ignore は、コードの次の行を型チェックしないようにコンパイラーに指示します。これは TypeScript スクリプトまたは JavaScript スクリプトに使用できます。

x:数値にしましょう。

x = 0;

// @ts-ignore
x = false; // エラーは報告されませんでした。

上の例では、最後の行は型エラーです。変数 x の型は number であり、ブール値と等しくすることはできません。ただし、// @ts-ignore が先頭に追加されているため、コンパイラはこの行の型チェックをスキップし、エラーは報告されません。

`// @ts-expect-error`

// @ts-expect-error は主にテストケースで使用され、次の行に型エラーがある場合、TypeScript エラーメッセージを抑制し (つまり、エラーメッセージを表示せず)、エラーをそのまま残します。コード自体。

関数 doStuff(abc: 文字列, xyz: 文字列) {
  assert(abc の種類 === "文字列");
  assert(typeof xyz === "文字列");
  // いくつかのことを行います
}

期待(() => {
  // @ts-expect-error
  doStuff(123, 456);
}).toThrow();

上記の例はテストケースであり、最後から 2 行目の doStuff(123, 456) のパラメーターの型が定義と矛盾しているため、TypeScript エンジンはエラーを報告します。ただし、テストケース自体はこのエラーをテストしており、特別な処理コードがすでに存在するため、ここで // @ts-expect-error を使用してエンジンのエラーメッセージを表示しないようにできます。

次の行に型エラーがない場合、// @ts-expect-error はプロンプトの行を表示します。

// @ts-expect-error
コンソール.ログ(1 + 1);
// 出力 未使用の '@ts-expect-error' ディレクティブ。

上記の例では、2 行目が正しいコードです。この時点で、システムは @ts-expect-error が使用されていないことを示すプロンプトを表示します。

JSDoc

TypeScript が JS ファイルを直接処理する場合、型を推測できない場合は、JS スクリプト内の JSDoc コメントが使用されます。

JSDoc を使用する場合、2 つの基本的な要件があります。

(1) JSDoc コメントは /** で始まり、アスタリスク (*) の数は 2 つでなければなりません。他の形式の複数行コメントが使用されている場合、JSDoc はそのコメントを無視します。

(2) JSDoc コメントは、コメントが上に、コードが下に配置されて、記述されているコードに隣接する必要があります。

以下は JSDoc の簡単な例です。

/**
 * @param {string} 誰か
 */
関数 SayHello(誰か) {
  console.log('こんにちは' + 誰か);
}

上の例では、コメント内の @param は JSDoc 宣言であり、次の関数 sayHello() のパラメーター somebody が string 型であることを示しています。

TypeScript コンパイラは、ほとんどの JSDoc 宣言をサポートしていますが、その一部については以下で説明します。

@typedef

@typedef コマンドは、TypeScript の型エイリアスに相当するカスタム型を作成します。

/**
 * @typedef {(数値 | 文字列)} NumberLike
 */

上記の例では、NumberLike という名前の新しい型が定義されています。これは、number と string で構成される共用体型であり、TypeScript の次のステートメントと同等です。

NumberLike = 文字列番号を入力します。

@タイプ

@type コマンドは変数の型を定義します。

/**
 * @type {文字列}
 */
しましょう。

上の例では、@type は変数 a の型を string として定義します。

@typedef コマンドで作成した型は、@type コマンドで使用できます。

/**
 * @typedef {(数値 | 文字列)} NumberLike
 */

/**
 * @type {NumberLike}
 */
a = 0 とします。

TypeScript の型とその構文は、@type コマンドで使用できます。

/**@type {true | false} */
しましょう。

/** @type {number[]} */
b にしましょう。

/** @type {Array<number>} */
c としましょう。

/** @type {{ readonly x: 数値, y?: 文字列 }} */
d;

/** @type {(s: 文字列, b: ブール値) => 数値} */
e;

@param

@param コマンドは、関数パラメータのタイプを定義するために使用されます。

/**
 * @param {文字列} x
 */
関数 foo(x) {}

オプションのパラメータの場合、パラメータ名を角括弧 [] で囲む必要があります。

/**
 * @param {文字列} [x]
 */
関数 foo(x) {}

角括弧内でパラメータのデフォルト値を指定することもできます。

/**
 * @param {文字列} [x="バー"]
 */
関数 foo(x) {}

上の例では、パラメータ x のデフォルト値は文字列 bar です。

@return、@returns

@return と @returns コマンドは同じ効果があり、関数の戻り値のタイプを指定します。

/**
 * @return {ブール値}
 */
関数 foo() {
  true を返します。
}

/**
 * @returns {数値}
 */
関数 bar() {
  0を返します。
}

@extends と型修飾子

@extends コマンドは、継承された基本クラスを定義するために使用されます。

/**
 * @extends {Base}
 */
class Derived extends Base {
}

@public、@protected、および @private はそれぞれ、クラスのパブリックメンバー、保護されたメンバー、プライベートメンバーを指定します。

@readonly は読み取り専用メンバーを指定します。

クラスベース{
  /**
   * @公共
   * @readonly
   */
  x = 0;

  /**
   * @保護されています
   */
  y = 0;
}