配列とタプル

JavaScript では、配列にあらゆるタイプの要素を含めることができ、動的に拡大または縮小できます。 TypeScript は静的型チェックを追加して、コレクションが同種であること、または固定型構造を尊重していることを確認します。

配列 (同種のコレクション)

TypeScript では、同じ型の要素を含む配列の型を定義する同等の方法が 2 つあります。

1. 要素タイプの後に角括弧を続ける ([]):

   TS

   コピー

   const numbers: number[] = [1, 2, 3];
   const strings: string[] = ['a', 'b', 'c'];

2. 汎用 Array<T> 型を使用します。

   TS

   コピー

   const numbers: Array<number> = [1, 2, 3];

どちらの構文も完全に有効ですが、最初の構文 (type[]) が従来の最も一般的なスタイルです。無効な値 (number[] 配列の numbers.push("hello") など) を挿入しようとすると、TypeScript はコンパイル時エラーを生成します。

タプル (固定長配列)

タプルは、固定数の要素を持つ特別なタイプの配列であり、各要素はその位置に基づいて事前定義された特定の型を持ちます。

たとえば、ステータス コード (数値) とメッセージ (文字列) で構成される HTTP 応答を保存するには、次のようにします。

const response: [number, string] = [200, 'OK'];

この場合：

• 最初の要素 (response[0]) は number である必要があります。
• 2 番目の要素 (response[1]) は string である必要があります。
• 配列は正確に 2 つの要素で初期化する必要があります。

読み取り専用タプル (readonly)

TypeScript のタプルに関する重要な点は、実行時にはタプルが通常の JavaScript 配列であるということです。これは、.push() や .pop() のような変更メソッドが技術的に利用可能であり、型チェックを部分的にバイパスしてタプルの長さを変更できる可能性があることを意味します。

この動作を防止し、真の不変性を強制するには、readonly 修飾子を使用できます。

const point: readonly [number, number] = [10, 20];
// point.push(30); // Compile-time error!

自分で試してみてください

演習 1: 数値の配列

演習 2: 3D 座標タプル

演習 3: 位置情報タプル

演習 4: ログ エントリ タプル