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を使用してシンプルなメールテンプレートを作成する
使用する仮想マシンは、サーバー環境をシミュレートする CentOS 8.4 です。外部ネットワークに...
この記事は主に、nginx に基づいてブラウザネゴシエーションキャッシュを設定する詳細なプロセスを紹...
ビジネス ソーシャル ネットワーキング サイト LinkedIn は最近、ナビゲーション バーとユー...
XHTML は現在国際的に推奨されている標準的な Web サイト設計言語です。Webjx.com も...
MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...
この記事では、星空アニメーションを実現するための高度な CSS3 LESS のサンプルコードを次のよ...
Go は、シンプルで信頼性が高く、効率的なソフトウェアを簡単に構築できるオープンソース プログラミン...
この記事では、参考までに、シンプルなチャットルームを実装するためのnode+socketの具体的なコ...
1. ディスクパーティション: 2. fdiskパーティションディスクが2 TB未満の場合はfdis...
#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...
ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...
下図のように、 selectポップアップレイヤーの下部に操作ボタンを配置するのが一般的な設計方法です...
最近、Microsoft は Docker をネイティブにサポートする Windows Server...
最初に書くこの記事では、ELK 7.3.0 の展開についてのみ説明します。展開環境:システムセントO...
1. ダウンロードして解凍します: /Users/xiechunping/Softwares/mys...