TypeScript を使用した JavaScript での静的型チェック

JavaScript は、その柔軟性と動的な性質で知られる人気のあるプログラミング言語です。ただし、この柔軟性により、予期せぬバグや大規模なアプリケーションのバグが発生する場合があります。この問題を解決するために、静的な型チェック機能を提供する TypeScript が JavaScript のスーパーセットとして導入されました。この記事では、TypeScript を使用した JavaScript での静的型チェックの基本を、コード例と開始手順とともに説明します。

静的型チェックとは何ですか?

静的型チェックは、実行時ではなくコンパイル時に型を変数、関数パラメーター、関数の戻り値に関連付けるプロセスです。これにより、コンパイラはコードを実行する前に型エラーを検出できるため、実行時エラーの可能性が減り、コードの品質が向上します。

TypeScript: JavaScript に静的型付けを導入する

TypeScript は、静的型付けをサポートするために JavaScript の構文を拡張します。新しい構文と構造が導入され、開発者が型を明示的に定義できるようになります。 TypeScript を使用すると、開発中に型エラーを検出し、より優れたコード エディター サポートの恩恵を受け、コード全体の保守性を向上させることができます。

TypeScriptをインストールする

TypeScript の使用を開始するには、Node.js と npm (ノード パッケージ マネージャー) がシステムにインストールされている必要があります。

次のコマンドを使用して TypeScript をグローバルにインストールできます -

リーリー

TypeScript をインストールした後、tsc コマンドを使用して TypeScript コードを JavaScript にコンパイルできます。

型を使用した変数の宣言

TypeScript では、:type 構文を使用して変数の型を明示的に宣言できます。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃

文字列型 -

の変数メッセージを宣言する例を考えてみましょう。 リーリー

イラスト

このコード スニペットでは、:string 構文を使用して、変数 message を文字列として宣言します。コンパイラは、文字列値のみを変数に代入できるように強制します。

＃＃＃出力＃＃＃

このコードの出力は -

です。 リーリー

型を使用した関数宣言

TypeScript を使用すると、関数のパラメーターと戻り値の型を定義できます。 ＃＃＃＃＃＃例＃＃＃＃＃＃ ＃＃＃

2 つの数値を加算する単純な関数の例を見てみましょう -

リーリー

イラスト

このコードでは、addNumbers 関数は 2 つの数値型パラメーターを受け入れ、数値型の値を返します。変数 num1、num2、および result は数値として明示的に型指定されます。

＃＃＃出力＃＃＃

このコードの出力は -

です。 リーリー

型推論

TypeScript には、割り当てに基づいて変数の型を自動的に推論できる強力な型推論メカニズムがあります。 ＃＃＃＃＃＃例＃＃＃ リーリー

このコードでは、年齢と名前の種類を明示的に宣言しません。ただし、TypeScript は、割り当てられた値に基づいて型を推測します。

インターフェイスと型の注釈

TypeScript は、カスタム タイプを定義するためのインターフェイスを提供します。インターフェイスは、オブジェクトのプロパティの名前やタイプなど、オブジェクトの構造を定義します。ユーザー オブジェクトのインターフェイスを定義する例を考えてみましょう。 ＃＃＃＃＃＃例＃＃＃ リーリー

イラスト

このコードでは、ID、名前、電子メールの 3 つのプロパティを持つ User という名前のインターフェイスを定義します。次に、User 型の変数 user を宣言し、インターフェイス構造に従うオブジェクトを割り当てます。

＃＃＃出力＃＃＃

このコードの出力は -

です。 リーリー

ユニオンタイプ

以下に示すコードを考えてみましょう。

リーリー

イラスト

この例では、displayResult 関数が受け取る引数は文字列または数値です。これは、関数シグネチャで共用体型 (String | Number) を使用することで実現されます。

エイリアスを入力してください

リーリー

イラスト

この例では、x プロパティと y プロパティを持つオブジェクトの型エイリアス Point を定義します。 CalculateDistance 関数は 2 つの Point オブジェクトをパラメータとして受け取り、ピタゴラスの定理を使用してそれらの間の距離を計算します。

＃＃＃出力＃＃＃ リーリー ＃＃＃結論は＃＃＃

TypeScript を静的型チェックに使用すると、型エラーの早期発見、コード エディターのサポートの向上、コードの保守性の向上など、JavaScript 開発に多くのメリットがもたらされます。 TypeScript を採用することで、開発者は JavaScript の柔軟性と動的な性質を享受しながら、より安全で信頼性の高いコードを作成できます。

この記事では、変数宣言、関数宣言、型推論、インターフェイス、共用体型、型エイリアスなど、TypeScript を使用した JavaScript での静的型チェックの基本について説明しました。この知識があれば、TypeScript を使用して堅牢でスケーラブルな JavaScript アプリケーションの構築を開始できるようになります。

以上がTypeScript を使用した JavaScript での静的型チェックの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。