静的分析

静的分析は、自動チェックを行うテストの一種で、 コードを実際に実行したり自動テストを作成したりする必要がありません。これで、 VSCode のような IDE を使用している場合、この種のテストはおそらくすでにあるでしょう。 TypeScript によるチェックは静的分析の一種です。 エラーや警告の下に波線が現れます

ESLint は、Google Workspace で起こりうる問題について 学びました。タイプセーフであってもエラーや標準以外の動作 あります。ESLint では、さまざまなルールを適用でき、 「推奨」ページにある多くのコードベースを含め、あります。

ESLint ルールの好例が、 no-unsafe-finally 適用できます。これにより、プログラムのインフラストラクチャを変更するステートメントを finally ブロック内の制御フロー。これがルールです。このようにすると、 は、使いづらい JavaScript の書き方としては一般的ではありません。ただし、 健全なコードレビュープロセスで検出できる 問題もあります

  try {
    const result = await complexFetchFromNetwork();
    if (!result.ok) {
      throw new Error("failed to fetch");
    }
  } finally {
    // warning - this will 'overrule' the previous exception!
    return false;
  }

そのため、ESLint は、健全なレビュー プロセス(および コードベースがどのようなものになるかを定義します。 デベロッパーが導入しがちなあらゆる型破りなアプローチを 組み込むことが重要ですGoogle のエンジニアリング プラクティス ガイドには、「シンプルに徹する」に関する短いセクションがあります。

ESLint を使用すると、ルールに違反し、コードに「許可される」アノテーションを付けることができます。たとえば、 次のようにアノテーションを付けて、以前のロジックを許可できます。

  finally {
    // eslint-disable-next-line no-unsafe-finally
    return false;
  }

ルールに繰り返し違反している場合は、この機能をオフにすることをご検討ください。これらの 特定の方法でコードを記述することが推奨されますが、チームによっては 異なる方法でコードを記述することのリスクをすでに認識しており、 アプローチです

最後に、大規模なコードベースで静的分析ツールを有効にすると、 役に立たないノイズ(およびリファクタリングの煩雑な作業)を 大丈夫ですそのため、プロジェクトのライフサイクルの早い段階で有効にするほうが簡単です。

ブラウザ サポート用の ESLint プラグイン

広く利用されていない API の使用にフラグを立てるプラグインを ESLint に追加できます。 ターゲット ブラウザ リストでサポートされているか、サポートされていないかを示します。「 eslint-plugin-compat 用意されているため、ユーザーが API を使用できない可能性がある場合に警告が表示され、 自分で常に追跡する必要がありません。

静的分析の型チェック

新しいデベロッパーは通常、JavaScript を学ぶ際にその考え方に触れます。 弱い型付け言語であることがわかります。つまり、1 つの Pod 内で 変数を 1 つの型として定義し、まったく同じ場所を使用します。 異なりますこれは Python などのスクリプト言語と似ていますが、 C/C++、Rust などのコンパイル言語。

この種の言葉は、使い始めるのに適しているかもしれません — 間違いなく、 JavaScript の人気が高まっていますが、これは往々にして失敗しがちです。 または少なくとも、混乱を生じさせるようなエラーを できます。たとえば、number を渡します。ここで、string またはオブジェクト タイプは、 誤った型で入力された値は、さまざまなアプリケーションや 最終的に混乱を招く TypeError の原因になりました。

TypeScript

TypeScript は JavaScript の型付けの欠如に対する最も主流のソリューションです。 情報です。このコースでは、これを幅広く使用します。このコースは Google Kubernetes Engine(GKE)の TypeScript では、 静的解析です

簡単な例を挙げます。このコードは、受け取ったコールバックを受け取ることが想定されています。 string さんの名前と number 人の年齢:

const callback = (name: string, age: string): void => {
  console.info(name, 'is now', age, 'years old!');
};
onBirthday(callback);

TypeScript を通じて実行したとき、またはカーソルを合わせたときでも、次のエラーが生成される IDE で変更できます

bad.ts:4:12 - error TS2345: Argument of type '(name: string, age: string) => void' is not assignable to parameter of type '(name: string, age: number) => void'.
  Types of parameters 'age' and 'age' are incompatible.
    Type 'number' is not assignable to type 'string'.

4 onBirthday(callback);
             ~~~~~~~~

Found 1 error in bad.ts:4
<ph type="x-smartling-placeholder">
</ph> 次のコードは、
  IDE で表示され、エラー メッセージとともに
  ポップアップが表示されます。
間違った値を渡したことを示す VSCode 説明します。

TypeScript の最終的な目標は、次のようなエラーを防ぐことです。 age を string ではなく number にする必要があり、プロジェクトに入り込みます。この 他の種類のテストでは検出が困難な場合があります。 また、テストが作成される前に型システムがフィードバックを返すこともできます。 これにより、早期のフィードバックが提供されるため、コードの記述プロセスが容易になります。 型エラーについて考えるのではなく、 実行されます。

TypeScript を使用するうえで最も難しい点は、正しく設定することです。毎 プロジェクトに tsconfig.json ファイルが必要です。このファイルは主に tsc によって使用されます。 コマンドライン ツール自体も、VSCode やその他多くの IDE によって読み取られます。 Vitest などのビルドツールや ツールが用意されていますこのファイルには その設定に役立つリソースがあります。

TypeScript に関する一般的なヒント

tsconfig.json ファイルを介して TypeScript を設定して使用する場合は、 次の点に留意してください

  • ソースファイルが実際にインクルードされ、チェックされていることを確認します。ファイルが おそらくチェックが行われていないのでしょう
  • .d.ts ファイル内に型とインターフェースを明示的に記述する。 関数の記述時に暗黙的に記述されることで、 コードベースをテストしやすくなります。モックや「偽物」の方が簡単に記述できるバージョン コードを書き直す必要はありません。 .

TypeScript 暗黙的 Any

TypeScript の最も強力で有益な構成オプションの 1 つは、 noImplicitAny フラグ。ただし多くの場合、これを有効にするのは すでに大規模なコードベースがある場合はなおさらです(noImplicitAny フラグは、 strict モードの場合はデフォルトで有効になり、それ以外の場合は有効になりません)。

このフラグを指定すると、この関数はエラーを返します。

export function fibonacci(n) {
  if (n <= 1) {
    return 0;
  } else if (n === 2) {
    return 1;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

ただし、n が数値でなければならないことはよくわかります。 TypeScript では、これを確信をもって確認することができません。VSCode を使用している場合は、 この関数は次のように記述します。

function fibonacci(n: any): any

この関数の呼び出し元は、any 型の値を渡すことができます。 (他の型を許可する型)であり、number だけでなく、この機能を有効にすると、 noImplicitAny フラグを使用すると、この種のコードは開発時に保護できます。 コードパスのために広範なビジネス ロジック テストを記述する必要がない 特定の場所で間違ったデータ型を検出できます

ここでの簡単な修正は、n 引数と fibonacci の戻り値の型の両方を number としてマークすることです。

noImplicitAny フラグを指定しても、any が明示的に 説明します。引き続き、メッセージを受け取り、返す関数を any 型。確実にすべての変数に型を与えるだけです。