0Pricing
TypeScript Academy · レッスン

タプル: 固定長の型付き配列

既知の位置に構造化データを持つタプルを定義します。

「タプル: 固定長の型付き配列」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。

ようこそ

タプルは要素数が固定された配列で、各位置に固有の型があります。座標やキーと値のペアのような構造化データに最適です。

タプルの定義

タプル型では、各要素の型を順番に列挙します。長さは固定され、各位置には宣言された型の値を格納する必要があります。
const point: [number, number] = [10, 20];
const entry: [string, number] = ['age', 25];

タプル要素へのアクセス

インデックスを使ってタプル要素にアクセスします。TypeScriptは各位置の型を把握しています。
const pair: [string, number] = ['Alice', 30];
const name: string = pair[0]; // string
const age: number = pair[1];  // number

タプルの分割代入

タプルを分割代入すると、各変数には位置に基づいて推論された固有の型が割り当てられます。
const [x, y]: [number, number] = [5, 10];
console.log(x + y); // 15

タプルと配列

配列は、同じ型の要素を可変個数持ちます。タプルは、特定の位置に異なる型の要素を固定個数持ちます。
const arr: number[] = [1, 2, 3, 4];   // variable length
const tup: [number, string] = [1, 'a']; // fixed: 2 elements

オプショナルなタプル要素

`?`を付けると、タプル要素をオプショナルにできます。オプショナルな要素は必須要素の後に置く必要があります。
type Named = [string, string?]; // name, optional nickname
const a: Named = ['Alice'];
const b: Named = ['Bob', 'Bobby'];

タプルのレスト要素

タプルにはレスト要素を含めることができ、特定の型の末尾要素を可変個数まとめて受け取れます。
type StringAndNumbers = [string, ...number[]];
const data: StringAndNumbers = ['scores', 90, 85, 78];

ラベル付きタプル要素

TypeScript 4.0では、ラベル付きタプル要素が追加されました。ラベルは型システムに影響を与えず、可読性を高めます。
type Range = [start: number, end: number];
const r: Range = [0, 100];

readonlyタプル

`readonly`を付けると、作成後のタプルの変更を防げます。
const origin: readonly [number, number] = [0, 0];
// origin[0] = 5; // Error

関数の戻り値としてのタプル

関数からタプルを返すことは、異なる型の複数の値を返すために、React hooksやユーティリティ関数で使われるパターンです。
function useCounter(): [number, () => void] {
  let count = 0;
  return [count, () => { count++; }];
}

as constによるタプルの推論

`as const`を付けない場合、タプルリテラルが配列型に拡大されることがあります。正確なタプル型を推論するには`as const`を使います。
const pair = [1, 'hello'] as const;
// type: readonly [1, 'hello'] — not (number | string)[]

クイックチェック

アノテーションなしで`const t = [1, 'hello']`と記述した場合、TypeScriptは何を推論しますか？

まとめ

タプルは、型が指定された位置を持つ固定長配列を定義します。座標、キーと値のペア、複数の値を返す関数に使います。変更を防ぐにはreadonlyを追加し、リテラルのタプル型を推論するにはas constを使います。

よくある質問

「タプル: 固定長の型付き配列」レッスンは無料ですか？

はい。「タプル: 固定長の型付き配列」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。

「タプル: 固定長の型付き配列」で何を学びますか？

既知の位置に構造化データを持つタプルを定義します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

TypeScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「タプル: 固定長の型付き配列」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このTypeScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. 型付き配列: T[] と Array
  2. Readonly 配列と不変データ
  3. タプル: 固定長の型付き配列
  4. 列挙型：数値定数と文字列定数
← TypeScript Academyに戻る