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を使用してシンプルなメールテンプレートを作成する

推薦する

CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...

MySQLのメモリ使用量を表示する方法の詳細な説明

序文この記事では主にMySQLのメモリ使用量に関する関連コンテンツを紹介し、皆さんの参考と学習のため...

MySQL 自動インクリメント ID 枯渇の例

ディスプレイ定義IDテーブルに定義された自動増分IDが上限に達した場合、次のIDを申請する際に得られ...

Docker5フル機能の港湾倉庫構築プロセス

Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...

Element UI を使用してページにページング ナビゲーション バーを追加する方法

必要ページング バーを追加します。これにより、ページにジャンプしたり、ページ番号に従って特定のページ...

Vue3における7種類のコンポーネント通信の詳細

目次1. Vue3コンポーネント通信方式2. Vue3通信の使い方2.1 小道具2.2 $エミット2...

Redo ログと Undo ログに基づく MySQL クラッシュ回復の分析

目次MySQLクラッシュ回復プロセス1. ブラックボックス下のデータフローを更新する2. やり直しロ...

display または visibility を通じて HTML 要素を表示または非表示にする

場合によっては、特定の条件に基づいて Web ページ内の HTML 要素を表示するか非表示にするかを...

Vue の新しい組み込みコンポーネントの使用方法の詳細な説明

目次1. テレポート1.1 テレポートの紹介1.2 テレポートの使用1.3 プレビュー効果2. サス...

CSSテーマを簡単に切り替える方法の詳細な説明

最近、個人の Web サイトに非常にシンプルなカラー スキーム (テーマ) スイッチャーを追加しまし...

HTML と CSS を書くための 6 つの最も効果的な方法

この記事では、効率を向上させ、時間を節約することを願って、最も効果的な 6 つの方法を紹介します。 ...

Ubuntuのインストール Matlab2020b の詳細なチュートリアルとリソース

目次1. リソースファイル2. インストール2.1 詳細な手順2.1.1 ディスクイメージのマウント...

Workermanはmysql接続プールのサンプルコードを書きます

まず、接続プールを使用する理由と、接続プールによってどのような問題が解決できるかを理解する必要があり...

MySQL で GTID モードをオンラインで有効または無効にする

目次基本的な概要GTIDをオンラインで有効にする1. GTID検証ENFORCE_GTID_CONS...

フォームで完全な選択または逆選択効果を実現する JavaScript

この記事では、フォームの完全選択または逆選択を実現するためのJavaScriptの具体的なコードを参...