中級

タプル型は要素数も型として扱われる（余分な要素はエラーになる）

[number, number]のようなタプル型は、要素の型だけでなく要素数も型情報の一部です。通常のnumber[]と違い、決められた数より多い（または少ない）要素を持つ配列は代入できません。

エラーメッセージの読み方

main.ts(1,7): error TS2322: Type '[number, number, number]' is not assignable to type '[number, number]'.

main.ts

ファイル名

1

行番号

7

列番号 — この位置でtscが検査に失敗しました

TS2322

エラーコード — 検索するとTypeScriptの解説が見つかります

Type '[number, number, number]' is not assignable to type '[number, number]'.

内容 — 期待していたもの、または受け付けられなかったもの

このエラーが出る典型パターン

 1  const point: [number, number] = [1, 2, 3];
                                        ^
 2  console.log(point);

 1  const rgb: [number, number, number] = [255, 0]   ;
                                               ^
 2  console.log(rgb);

 1  const entry: [string, number] = ["Al", 30, true];
                                            ^
 2  console.log(entry);

 1  const coord: [number, number, number] = [1, 2]   ;
                                                ^
 2  console.log(coord);

 1  const pair2: [string, string] = ["a"]     ;
                                         ^
 2  console.log(pair2);

よくある誤解

「タプルもただの配列だから、要素数は自由なはず」という考えは誤りです。タプル型は固定長の構造として定義されており、要素数が違う時点で別の型として扱われます。

実務での勘所

JavaScriptの実行時にはタプルという概念自体が存在しません。[number, number]という型のタプルも、コンパイル後は普通の配列とまったく区別が付かないただのJavaScriptの配列になります。要素数のチェックはTypeScriptがコンパイル時にだけ行う、型システム上の約束事です。any型を経由するなどして型チェックをすり抜ければ、実行時にはタプルのつもりの配列へpush()で要素を追加することも技術的には可能です。「タプル」という安全性は、あくまでtscの検査を信頼して初めて成り立ちます。

演習をはじめる

関連するエラー

• is not assignable to type の原因と直し方変数への代入・関数の戻り値・プロパティへの代入など、宣言した型と違う型の値を渡そうとしたときにtscが検出するエラーです。
• インデックスシグネチャと矛盾する型のプロパティを宣言するとエラーになる[key: string]: numberのようなインデックスシグネチャを持つinterfaceでは、個別に宣言する具体的なプロパティも、インデックスシグネチャの型と互換性がなければ宣言できません。