TypeScript タプル

概要: このチュートリアルでは、TypeScript タプルとその使用方法について説明します。

TypeScript タプル型の概要

タプルは 配列 と同じように動作しますが、追加の考慮事項があります。

• タプル内の要素の数は固定されています。
• 要素の型が既知で、すべて同じである必要はありません。

たとえば、タプルを使用して値を string と number のペアとして表現できます。

let skill: [string, number];
skill = ['Programming', 5];Code language: TypeScript (typescript)

タプル内の値の順序は重要です。skill タプルの値の順序を [5, "Programming"] に変更すると、エラーが発生します。

let skill: [string, number];
skill = [5, 'Programming'];Code language: TypeScript (typescript)

エラー

error TS2322: Type 'string' is not assignable to type 'number'.Code language: JavaScript (javascript)

このため、特定の順序で互いに関連するデータを使用するタプルを使用することをお勧めします。

たとえば、常に 3 つの数値のパターンで表される RGB カラーを定義するためにタプルを使用できます。

(r,g,b)

たとえば

let color: [number, number, number] = [255, 0, 0];Code language: JavaScript (javascript)

color[0]、color[1]、および color[2] は、論理的に Red、Green、および Blue の色値に対応します。

オプションのタプル要素

TypeScript 3.0 以降、タプルには疑問符 (?) サフィックスを使用して指定したオプション要素を含めることができます。

たとえば、オプションのアルファチャネル値を使用して RGBA タプルを定義できます。

let bgColor, headerColor: [number, number, number, number?];
bgColor = [0, 255, 255, 0.5];
headerColor = [0, 255, 255];Code language: JavaScript (javascript)

RGBA は赤、緑、青、アルファモデルを使用して色を定義することに注意してください。アルファは色の不透明度を指定します。

概要

• タプルとは、型が既知の固定数の要素を持つ配列のことです。