タプルのRest要素
タプル型の中でRest要素を使います。
「タプルのRest要素」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
可変長タプル
タプルは通常、長さが固定されていますが、rest要素を使うと、1つの位置で任意の数の項目を受け取れるようになります。これにより、一部が固定で一部が可変であるデータを表現できます。
末尾のrest要素
[string, ...number[]]と記述すると、1つの文字列に続いて0個以上の数値を意味します。最初のスロットは固定され、残りの部分は自由に増減します。
type Row = [string, ...number[]]
const r: Row = ["scores", 9, 8, 7]
console.log(r[0], r.length) // scores 4固定部分は必須です
先頭の固定要素は存在していなければなりません。rest部分は空でもかまいませんが、固定スロットを省略することはできません。
type Row = [string, ...number[]]
const min: Row = ["label"] // ok, zero numbers
// const bad: Row = [] // Error: missing string
console.log(min)先頭のrest要素
rest要素を先頭に置き、その後ろに固定要素を続けることもできます。これにより、可変長の先頭部分に固定長の末尾部分が続く形を表現できます。
type Trailing = [...number[], boolean]
const t: Trailing = [1, 2, 3, true]
console.log(t[t.length - 1]) // true中央のrest要素
restは、先頭と末尾の固定要素の間に置くこともできます。TypeScriptは、両端のどの位置が固定されているかを判断します。
type Middle = [string, ...number[], boolean]
const m: Middle = ["start", 1, 2, false]
console.log(m[0], m[m.length - 1]) // start false1つのタプルに使えるrestは1つだけ
1つのタプルに含められるrest要素は最大1つです。restを2つ置くと要素の位置が曖昧になるため、許可されていません。
// type Bad = [...string[], ...number[]] // Error: only one rest allowed
type Ok = [string, ...number[]]
const o: Ok = ["x", 1]
console.log(o)restタプルの分割代入
分割代入はタプルのrest要素と完全に対応します。固定バインディングは固定スロットを受け持ち、restバインディングは可変部分を型付き配列として受け取ります。
type Row = [string, ...number[]]
const row: Row = ["scores", 9, 8]
const [label, ...values] = row
console.log(label, values) // scores [9, 8]ラベル付きタプル要素
ドキュメント用にタプルの各位置へ名前を付けることができます。ラベルはツールチップやシグネチャに表示されますが、実行時の値は変わりません。
type Range = [start: number, end: number]
const span: Range = [0, 10]
console.log(span[0], span[1]) // 0 10rest要素のラベル
rest要素にもラベルを付けることができます。読みやすいヒントを表示できるため、関数のパラメータタプルで特に役立ちます。
type Args = [command: string, ...flags: string[]]
const a: Args = ["build", "--watch", "--minify"]
console.log(a[0], a.slice(1))パラメータリストとしてのrestタプル
rest要素を含むタプルで関数のパラメータリストを表現できます。スプレッドを使って、固定部分の後に可変長部分が続くシグネチャを正確に定義できます。
type Params = [name: string, ...scores: number[]]
function report(...args: Params): string {
const [name, ...scores] = args
return name + ": " + scores.join(",")
}
console.log(report("Ada", 9, 8))restタプルが重要な理由
restタプルを使うと、通常の配列では表現できない形を表せます。たとえば、必須のヘッダーと可変長の本文、可変長の本文と必須のフッター、またはその両方です。restタプルは、可変長関数に型を付ける基盤となります。
type CSVRow = [id: number, ...fields: string[]]
const row: CSVRow = [1, "Ada", "Engineer"]
console.log(row[0], row.slice(1))理解度チェック
タプルのrest要素についての理解度を確認してください。
まとめ
タプルのrest要素（...T[]）を使うと、1つの位置で任意の数の項目を受け取れる一方、先頭と末尾の固定要素は必須のままになります。restは末尾、先頭、または中央に置けますが、1つのタプルに置けるrestは1つだけです。分割代入はこれらの形に対応し、ラベルによって読みやすいヒントを追加できます。restタプルは、可変長関数に型を付ける基盤です。
よくある質問
「タプルのRest要素」レッスンは無料ですか？
はい。「タプルのRest要素」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「タプルのRest要素」で何を学びますか？
タプル型の中でRest要素を使います。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「タプルのRest要素」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 関数のRestパラメーター
- 配列とオブジェクトのスプレッド
- タプルのRest要素
- 可変長関数の型付け