【Typescript】スプレッド構文と残余引数（レスト構文）の違い #JavaScript

Typescriptを学習中、スプレッド構文と残余引数（レスト構文）の違いで少し悩んだので、復習も兼ねて投稿します。

■スプレッド構文とは

配列やオブジェクトの中身を展開する。

同じ配列の中身やオブジェクトの中身を展開して複合するのに便利。

const array: number[] = [1,2,3];

const array2: number[] = [...array, 4];
// [1, 2, 3, 4] 


const obj = {
    name : "sample",
    age : 25,
}

const newObj = {...obj, from: "japan"};
// { "name": "sample", "age": 25, "from": "japan" }

■残余引数(レスト構文)

複数の要素を一つのオブジェクトにまとめる。

関数の引数の数が決まっていない時に使うと便利。
残余引数は受け取った引数を配列にする。

function returnArr(...numbers: number[]) {
    return numbers;
}
console.log(returnArr(1,2,3,4,5,6,7,8,9));

//  [1, 2, 3, 4, 5, 6, 7, 8, 9]

■共通点・違い

スプレッド構文も残余引数も、どちらも

...変数名

という記法で記入する。
しかし、使用方法に明確な違いがある。

また、
スプレッド構文は記入する順番を問わないが、
残余引数は必ず最後に書かなくてはいけない。

// Spread Syntax
const arr = [1,2,3]
const newArray: number[] = [0,...arr, 4];
// [0, 1, 2, 3, 4] 

const obj = {
    name : "sample",
    age : 25,
}
const newObj = {id:1,...obj, from: "japan"};
//  {"id": 1, "name": "sample", "age": 25, "from": "japan"} 


// Respt Parameters
function returnArr(...numbers: number[], num: number) {
    return numbers;
}
// ...numbers: number[]で構文エラー
//A rest parameter must be last in a parameter list.(1014)

■補足

スプレッド構文も残余引数も、どちらも空でも呼び出せる。
これは、スプレッド構文が０個以上の要素を要求しているため。

// Spread Syntax
const arr: number[] = [];
const newArray: number[] = [...arr, 4];
// [4]


// Respt Parameters
function returnArr(...numbers: number[]) {
    return numbers;
}
console.log(returnArr()); // OK。

■よく見るスプレッド構文の例と「Typescript」

ネットでスプレッド構文の例を見てみると、以下のような構文を目にする。

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));

しかし、これをそのままTypescriptで行おうとすると構文エラーが発生する。

以下のように型を指定してもNG。

function minus(x: number, y: number, z: number) {
    return x - y - z;
}
const arrayNum: number[] = [1,2,3];
console.log(minus(...arrayNum));

// 構文エラー

正解は、タプル型を使用することで解決する。

function minus(x: number, y: number, z: number) {
    return x - y - z;
}
const arrayNum: [number, number, number] = [1,2,3];
console.log(minus(...arrayNum));
// -4

■10月15日追記

■よく見るスプレッド構文の例と「Typescript」 にて記載した例は、
以下のようなケースではスプレッド構文を用いた配列の展開を利用して呼び出すことができる。

function minus(...nums: number[]):number {
    for(let num of nums) {
    result += num;
  }
    return result;
}
const arrayNum: number[] = [1,2,3];
console.log(minus(...arrayNum));  // OK.

ポイントは
定義した関数の引数が3個で固定されているか、可変長引数であるかという点。

引数が3個で固定されている関数を呼び出す際に、スプレッド構文で関数を呼び出しすると、それは
要素数不明の何らかの配列という扱いになってしまう。

よって関数の引数の数が限定されている時は、
タプル型を利用したスプレッド構文を利用する。

関数の引数の数が可変長引数であれば、
スプレッド構文をそのまま利用することが可能。

【Typescript】スプレッド構文と残余引数（レスト構文）の違い

目次

■スプレッド構文とは

■残余引数(レスト構文)

■共通点・違い

■補足

■よく見るスプレッド構文の例と「Typescript」

■10月15日追記