TypeScript で条件付きタイプを作成するにはどうすればよいですか?

WBOY
リリース: 2023-08-23 18:33:11
転載
1010 人が閲覧しました

如何在 TypeScript 中创建条件类型?

TypeScript では、厳密な言語型であり、条件型も含まれるため、すべての変数とオブジェクトの型を定義する必要があります。

条件タイプという単語から、特定の条件に基づいて変数を選択する必要があることが予測できます。はい、正しく聞こえました。 if-else ステートメントを使用して特定の条件に基づいてコードの特定のブロックを実行するのと同じように、特定の条件に基づいて変数の型を選択することもできます。

このチュートリアルでは、TypeScript で条件付きタイプを作成する方法を学習します。

###文法###

ユーザーは、次の構文に従って TypeScript で条件付きタイプを作成できます。

リーリー

上記の構文では三項演算子を使用して条件型を作成します。

オペランドの説明

  • First_type

    - 型または変数です。

  • Second_type

    - 数値、文字列、ブール値などの型です。

  • True_type

    - first_type に Second_type が含まれる場合、true_type が変数に割り当てられます。

  • False_type

    - first_type が Second_type を拡張しない場合、false_type が変数に割り当てられます。

  • ここでは、TypeScript の条件型について詳しく学ぶために、さまざまな例を見ていきます。
###例###

次の例では、2 つのインターフェイスを定義します。 TypeScript では、インターフェイスはオブジェクトまたはクラスの構造を定義するという点で型エイリアスと同じように機能します。

その後、インターフェイス 2 をインターフェイス 1 で拡張しました。これは、インターフェイス 2 にインターフェイス 1 のすべてのプロパティが含まれていることを意味します。その後、三項演算子を使用して条件タイプを type1 および type2 エイリアスに割り当てます。

出力で、ユーザーは var1 変数と var2 変数の型を確認できます。

リーリー

コンパイルすると、次の JavaScript コードが生成されます -

リーリー

出力

上記のコードは次の出力を生成します -

リーリー

条件型の基本とその作成方法を学習しました。

なぜ条件付きタイプを使用するのでしょうか?

条件型が実際の開発においてなぜ、どのように役立つのかを見ていきます。

パラメーターの型に基づいて戻り値の型を変更することで func1() 関数をオーバーロードする次のコードを見てみましょう。パラメーターの型がブール型の場合、戻り値の型は文字列であることがわかります。さらに、パラメータの型が文字列と数値の場合、戻り値の型はそれぞれ数値とブール値になります。

リーリー

関数内に複数の定義を記述する代わりに、1 行に 1 つの定義を含む条件型を作成することで、この関数をオーバーロードできます。

###例###

次の例では、test_type という名前の条件タイプを作成します。値を取得し、値の型に基づいて型を返します。値の型が数値の場合はブール値を返し、文字列値の場合は数値を返し、ブール値の場合は文字列型を返します。

出力では、test_type から取得した変数と abc 変数の型を確認できます。

リーリー

コンパイルすると、次の JavaScript コードが生成されます:

リーリー

出力

上記のコードは次の出力を生成します -

リーリー

変数に条件型を使用したため、関数のパラメーターや戻り値の型に条件型を使用できます。

このチュートリアルのユーザーは、別の変数の型または値に基づいて特定の変数を選択できる条件型の作成方法を学習しました。さらに、関数パラメーターと戻り値の型に条件付き型を使用する方法を学びました。

以上がTypeScript で条件付きタイプを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:tutorialspoint.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!