TypeScript レストパラメータ

概要: このチュートリアルでは、TypeScript レストパラメータについて、またそれらを使用して無数の引数を配列として表現する方法について学習します。

レストパラメータを使用すると、関数は指定された型の引数を 0 個以上受け取ることができます。TypeScript では、レストパラメータは次の規則に従います。

• 関数はレストパラメータを 1 つだけ持つことができます。
• レストパラメータはパラメータリストの最後に表示されます。
• レストパラメータの型は 配列型です。

1 つの型のレストパラメータ

レストパラメータを宣言するには、パラメータ名の前に 3 つのドット (「...」) をプレフィックスとして付け、型注釈として配列型を使用します。

function fn(...rest: type[]) {
   //...
}Code language: JavaScript (javascript)

次の例は、レストパラメータを使用する方法を示しています。

function getTotal(...numbers: number[]): number {
    let total = 0;
    numbers.forEach((num) => total += num);
    return total;
}Code language: JavaScript (javascript)

この例では、getTotal() は渡された数値の合計を計算します。

numbers パラメータはレストパラメータであるため、合計を計算する 1 つ以上の数値を渡すことができます。

console.log(getTotal()); // 0
console.log(getTotal(10, 20)); // 30
console.log(getTotal(10, 20, 30)); // 60Code language: JavaScript (javascript)

複数の型のレストパラメータ

TypeScript では、ユニオン型を使用して、複数の型のレストパラメータを処理できます。たとえば、次のようになります。

function combine(...args: (number | string)[]): [number, string] {
  let total = 0;
  let str = '';
  args.forEach((arg) => {
    if (typeof arg === 'number') {
      total += arg;
    } else if (typeof arg === 'string') {
      str += arg;
    }
  });

  return [total, str];
}

const [total, str] = combine(3, 'Happy', 2, 1, ' New Year');

console.log({ total });
console.log({ str });

出力

{ total: 6 }
{ str: 'Happy New Year' }Code language: CSS (css)

この例では、数値または文字列のいずれかのレストパラメータを使用して可変個数の引数を受け取る combine() 関数を定義しています。

...args: (number | string)[]

この関数は 2 つのことを行います。

• すべての数値を足し合わせます。
• すべての文字列を連結します。

その後、数値の合計と連結された文字列を含むタプルを返します。

概要

• レストパラメータを使用して、関数が同じ型または異なる型の可変個数の引数を受け取れるようにします。
• 同じ型のレストパラメータを定義するには、...args 型[] 構文を使用します。
• 異なる型のレストパラメータを定義するには、...args (型1 | 型2 ) [] 構文を使用します。