1. ユニオンタイプいわゆるユニオン型は、いくつかの型を定義するものです。定義された変数は、いずれかの型を満たすだけで済みます。ユニオン型は | を使用して定義されます。サンプル コードは次のとおりです。 // | シンボルを使用して共用体型を定義します。let value: number | boolean | string = '一碗周' 値 = 18 上記のコードでは、数値、ブール値、または文字列型の値変数を定義します。 2. クロスオーバータイプまず、ユニオン型を紹介し、次にユニオン型に非常によく似た交差型について説明します。 いわゆるクロス型はすべての型を満たす必要があり、クロス型は & 記号を使用して定義されます。 サンプルコードは次のとおりです。 // 3つの共通インターフェース型を定義する interface Name { 名前: 文字列 } インターフェース Age { 年齢: 番号 } インターフェース 趣味 { 趣味: 弦楽器 } // 上記の3つのオブジェクトの結合型であるオブジェクトを定義します。let person: Name & Age & Hobby = { // 1 つの型が割り当てられていない場合は例外がスローされます name: '一碗周', 年齢: 18歳 趣味:「コーディング」 } 3. 型保護ここで、任意のタイプの配列の最初の数値を取得するという要件があります。 実装コードは次のとおりです。 // 数値または文字列を含む配列を定義する const arr: (number | string)[] = [1, 'number'] // 配列を走査して最初の数値を返します const getValue: (arr: (number | string)[]) => number = ( arr: (数値 | 文字列)[], ): 数値 => { (i = 0 とします; i < arr.length; i++) { // 現在の値が数値に変換されたときに NaN でない場合は、if (!isNaN(Number(arr[i]))) { を返します。 return arr[i] // 型 'string | number' は型 'number' に割り当てることはできません。 } } } 上記のコードでは、 上記の機能は、型アサーションを通じて実現できます。サンプル コードは次のとおりです。 const getValue: (arr: (数値 | 文字列)[]) => 数値 = ( arr: (数値 | 文字列)[], ): 数値 => { (i = 0 とします; i < arr.length; i++) { // 現在の値が数値に変換されたときに NaN でない場合は、if (!isNaN(Number(arr[i]))) { を返します。 return arr[i] as number // 数値を返すことをコンパイラに伝える } } } 型アサーションとは何ですか? 型アサーションを参照してください。 型アサーションを使用して説明する場合、目的のデータ型が異なるとさらに面倒になります。現時点では、この機能を完了するには型保護が必要です。 型保護には主に 3 つの種類があります。 3.1 カスタム型保護カスタム型保護を定義する方法は、戻り構造が型述語である サンプルコードは次のとおりです。 // カスタム型保護を使用する // 1. 戻り値が型述語である関数を定義します。つまり、parameterName is Type です。これは、parameter name is type function isNumber(value: number | string): value is number { の形式です。 // trueが返された場合、渡された値はisの後の型であることを意味します !isNaN(数値(値)) を返します } // 2. 数値を取得する関数を定義する const getNumber: (value: number | string) => number = ( 値: 数値 | 文字列、 ): 数値 => { // isNumber の呼び出し値が true の場合、値は数値であることを意味するので、数値を返します if (isNumber(value)) { 戻り値 } } // 3. 最終値を取得するために呼び出します const getValue: (arr: (number | string)[]) => number = ( arr: (数値 | 文字列)[], ): 数値 => { (i = 0 とします; i < arr.length; i++) { // 数値が返された場合は、それをブール値 true に変換します getNumber(arr[i]) の場合 || getNumber(arr[i]) === 0) { getNumber(arr[i]) を返す } } } 2 番目の関数を定義する理由は、配列内の戻り値として i を直接使用するとまだ問題があるため、関数を遷移として定義するためです。 3.2 保護の種類
この要件にはこれで十分です。次に、 サンプルコードは次のとおりです。 // 1. 数値を取得する関数を定義する const getNumber: (value: number | string) => number = ( 値: 数値 | 文字列、 ): 数値 => { // 現在の値が文字列かどうかを確認し、文字列の場合は現在の値を返します。if (typeof value === 'number') { 戻り値 } } // 2. 最終値を取得するために呼び出します const getValue: (arr: (number | string)[]) => number = ( arr: (数値 | 文字列)[], ): 数値 => { (i = 0 とします; i < arr.length; i++) { // 数値が返された場合は、それをブール値 true に変換します getNumber(arr[i]) の場合 || getNumber(arr[i]) === 0) { getNumber(arr[i]) を返す } } } 3.3instanceof型保護
サンプルコードは次のとおりです。 /** * instanceof は参照型のみをサポートし、プリミティブ型はサポートしないため、ここでいくつか変更を加えて、配列を次のように変更する必要があります。 */ const arr2: (Number | String)[] = [new String('彼岸繁华'), new Number(10)] // 1. 数値を取得する関数を定義する const getNumber: (value) => number = (value): number => { // 現在の値が数値型かどうかを判定し、現在の値を文字列に変換して返します。if (value instanceof Number) { 数値(値)を返す } } // 2. 最終値を取得するために呼び出します const getValue: (arr: (Number | String)[]) => number = ( arr: (数値 | 文字列)[], ): 数値 => { (i = 0 とします; i < arr.length; i++) { // 数値が返された場合は、それをブール値 true に変換します getNumber(arr[i]) の場合 || getNumber(arr[i]) === 0) { getNumber(arr[i]) を返す } } } instanceof を使用する際に注意すべき点が 2 つあります。
これで、TypeScript の共用体型、交差型、および型保護に関するこの記事は終了です。TypeScript の共用体型、交差型、および型保護の詳細については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: @Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法
>>: HTMLを使用してシンプルなメールテンプレートを作成する
目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...
序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...
ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...
Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...
必要ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページ...
目次1. Vue3コンポーネント通信方式2. Vue3通信の使い方2.1 小道具2.2 $エミット2...
目次MySQLクラッシュ回復プロセス1. ブラックボックス下のデータフローを更新する2. やり直しロ...
場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...
目次1. テレポート1.1 テレポートの紹介1.2 テレポートの使用1.3 プレビュー効果2. サス...
最近、個人の Web サイトに非常にシンプルなカラー スキーム (テーマ) スイッチャーを追加しまし...
この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...
目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...
まず、接続プールを使用する理由と、接続プールによってどのような問題が解決できるかを理解する必要があり...
目次基本的な概要GTIDをオンラインで有効にする1. GTID検証ENFORCE_GTID_CONS...
この記事では、フォームの完全選択または逆選択を実現するためのJavaScriptの具体的なコードを参...