TypeScript のユニオン型、交差型、型ガード

TypeScript のユニオン型、交差型、型ガード

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' に割り当てることはできません。
    }
  }
}


上記のコードでは、 returnときに、返される値が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 カスタム型保護

カスタム型保護を定義する方法は、戻り構造が型述語であるparameterName is type 」の形式である関数を定義することです。 parameterName 、現在の関数パラメータからのパラメータ名である必要があります。

サンプルコードは次のとおりです。

// カスタム型保護を使用する // 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 保護の種類

JavaScriptの typeof キーワードは現在の型を判別できますが、判別できるのはnumberstringbooleansymbol 4 つの型だけです。

この要件にはこれで十分です。次に、 typeofを通じて型保護を実装する方法を見てみましょう。

サンプルコードは次のとおりです。

// 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演算子も、 JavaScriptで提供されているネイティブ演算子です。インスタンスがコンストラクターによって作成されたのか、それとも ES6 構文を使用したクラスによって作成されたのかを判断するために使用されます。 TypeScript では、 instanceof演算子を通じて型保護を実現することもできます。

サンプルコードは次のとおりです。

/**
 * 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 をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • TypeScript のユニオン型、交差型、型ガード
  • TypeScript 2.0 マーク付き共用体型の詳細な説明
  • TypeScriptの型保護メカニズムについての簡単な説明

<<:  @Font-face の基本的な使い方と、すべてのブラウザと互換性を持たせる方法

>>:  HTMLを使用してシンプルなメールテンプレートを作成する

推薦する

HTML 基本コントロール入門_PowerNode Java アカデミー

<input> タグ<input> タグはユーザー情報を収集するために使用さ...

VueプロジェクトでReactを書く方法の詳細

jsx/tsxファイルを直接作成できます今回のプロジェクト構成は以下のとおりです。 vueファイルで...

MySQLデータベースは何をするのか

MySQL は、スウェーデンの会社 MySQL AB によって開発されたリレーショナル データベース...

Vue モバイル開発で better-scroll を使用するときにクリック イベントが失敗する問題の解決策

最近、モバイル プロジェクトの開発方法を学ぶために vue を使用し、スクロールには better-...

突然外部ネットワークからDockerにアクセスできなくなる問題の解決方法

マスターのメソッドによると、原因は sysctl net.ipv4.ip_forward であること...

MySQLオンラインログライブラリの移行例

最近の事例をお話ししましょう。オンライン Alibaba Cloud RDS 上のゲーム ログ ライ...

Nodejs で WeChat アカウント分割を実装するためのサンプルコード

会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...

CSS 動的高さ遷移アニメーション効果の実装

この質問は、Nuggets のメッセージから生まれました。友人が、次のコードの高さ遷移アニメーション...

MLSQLコンパイル時権限制御例の詳細な説明

序文MySQL の権限を簡単に理解すると、MySQL では自分の能力の範囲内で操作が許可され、その限...

ウェブフロントエンドエンジニアにおすすめのヒント

まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクショ...

MySQL 実験: explain を使用してインデックスの傾向を分析する

概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...

Windows で MySQL サービスを停止または削除できない問題の解決策

圧縮パッケージを解凍して Windows に MySQL をインストールしました。インストール方法は...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

写真とテキストによる MySQL 8.0.11 インストール チュートリアル

インターネット上には多くのチュートリアルがありますが、基本的には同じです。ただし、細かい原因でソフト...