残余引数に型をつける

01 / 06

「残りぜんぶ」の型

残余引数（...scores）は、呼び出し側がいくつでも渡せるようにする書き方だった。TypeScript では配列の型をつけるよ。

...scores: number[] と書けば「いくつでも、ぜんぶ数値」という意味になる。

function sum(...scores: number[]): number {  let total = 0;  for (const s of scores) {    total += s;  }  return total;}console.log(sum(80, 65, 92));

実行結果

02 / 06

文字列が混ざったら止まる

number[] と書いた以上、文字列を渡すと止めてくれる。いくつでも渡せるからこそ、型があると安心だよ。

function sum(...scores: number[]): number {  let total = 0;  for (const s of scores) { total += s; }  return total;}console.log(sum(80, "65", 92));

実行結果

型のエラー: 型 'string' の引数を型 'number' のパラメーターに割り当てることはできません。

03 / 06

ふつうの引数と混ぜられる

残余引数はいつも最後に置く。前にふつうの引数を置いて、残りを全部受け取る、という形はよく見るよ。

function log(level: string, ...messages: string[]): void {  for (const m of messages) {    console.log(`[${level}] ${m}`);  }}log("INFO", "起動しました", "準備完了");

実行結果

[INFO] 起動しました
[INFO] 準備完了

04 / 06

0個で呼び出しても動く

残余引数は1つも渡さなくてもエラーにならない。そのときは空の配列 [] として受け取るよ。

「いくつでも」には「0個」も含まれる、と覚えておこう。

function sum(...scores: number[]): number {  let total = 0;  for (const s of scores) {    total += s;  }  return total;}console.log(sum());

実行結果

05 / 06

書けるのは配列やタプルの型だけ

残余引数は呼び出し側がいくつでも渡せる仕組みなので、型も「並んだもの」にしかできない。number[] のような配列型か、[string, number] のようなタプル型を書くよ。

オブジェクトの形（{ ... }）は書けない。オブジェクトを複数まとめて渡したいときは、配列にして ...list: { namae: string }[] のように書くよ。

function names(...people: { namae: string }[]): string[] {  return people.map((p) => p.namae);}console.log(names({ namae: "ゆい" }, { namae: "けい" }));

実行結果

["ゆい", "けい"]

06 / 06

アロー関数でも同じ書き方

function でもアロー関数でも、残余引数の書き方は変わらない。(...引数名: 型[]) => ... の形だよ。

const total = (...nums: number[]): number => {  return nums.reduce((a, b) => a + b, 0);};console.log(total(1, 2, 3));

実行結果