【TypeScript入門】可変長引数の使い方

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、TypeScriptでの可変長引数の使い方ついて解説して行きます。

前回は、JavaScriptでの可変長引数の使い方について解説していきました。

JavaScriptでの可変長引数のPointを振り返りながらTypeScriptでの使い方を見ていきます！

【JavaScript】可変長引数の使い方

【JavaScript入門可変長引数の使い方】

1 基本的な可変長引数の使い方
2 配列を可変長引数として渡す方法
3 【おまけ】可変長引数を利用した Method の使い方
4 TypeScript書籍
5 参考・引用
6 最近の投稿

基本的な可変長引数の使い方

可変長引数とは、固定された引数ではなく可変的な引数のことです。

JavaScriptの可変長引数は「 … 」で表現します。

これは「Spread-構文」と同じ記述の仕方ですね。

可変長引数を受け取る側は、引数たちを「配列」の形で受け取ります。

TypeScriptの場合は、可変長引数を受け取る側が「配列」であることを前提に「引数」に対して型定義をする必要があります。

可変長引数の基本的な使い方

1. 可変長引数は、「...」(Spread-構文)と同じ記述の仕方をします。
2. 可変長引数を設定すると、受け取る側では「配列」の形で受け取ります。
3. TypeScriptの場合は、可変長引数を受け取る側が「配列」であることを前提に、「引数」に対して型定義をする！

// < TypeScript-可変長引数 >

// 1. 可変長引数は、「...」(Spread-構文)と同じ記述の仕方をします。
const robotamaFunc = (...robotamaParams: string[]) => {

    // 1-1. 可変長引数は、配列の形で受け取る => 引数は配列で型定義！
    console.log(robotamaParams);

    // 1-2. 可変長引数は、配列の形式で渡ってくるので、lengthでParameterの数をCheckできます！
    console.log(robotamaParams.length);

    console.log(robotamaParams[0]);
    console.log(robotamaParams[1]);
    console.log(robotamaParams[2]);
    console.log(robotamaParams[3]);
};

// 2. 今回は、3つの引数を渡してみる！
robotamaFunction('グンマー帝国', 'ロボ玉', '翔んで埼玉');

// < 実行結果 >
// (3) ['グンマー帝国', 'ロボ玉', '翔んで埼玉']
// 3
// グンマー帝国
// ロボ玉
// 翔んで埼玉
// undefined

配列を可変長引数として渡す方法

配列を可変長引数-対応のMethodに渡すときは、Spread構文で配列を展開して渡します。

実際にCodeで確認していきましょう。


// < TypeScript-可変長引数 Ver. 配列を可変長引数として渡すPattern >

// 1. 可変長引数は、「...」(Spread-構文)と同じ記述の仕方をします。
const robotamaFunc = (...robotamaParams: string[]) => {

    // 1-1. 可変長引数は、配列の形で受け取る => 引数は配列で型定義！
    console.log(robotamaParams);

    // 1-2. 可変長引数は、配列の形式で渡ってくるので、lengthでParameterの数をCheckできます！
    console.log(robotamaParams.length);

    console.log(robotamaParams[0]);
    console.log(robotamaParams[1]);
    console.log(robotamaParams[2]);
    console.log(robotamaParams[3]);
};

// 2. 配列を可変長引数として渡すPattern！
const robotamaProtoType = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];

// 3. 配列を可変長引数-対応のMethodに渡すときは、Spread構文で配列を展開する！
robotamaFunction(...robotamaProtoType);

// < 実行結果 >
// (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']
//  3
// ロボ玉試作1号機
// ロボ玉試作2号機
// ロボ玉試作3号機
// undefined

【おまけ】可変長引数を利用した Method の使い方

最後に、可変長引数を利用したMethodの使い方を見ていきましょう。

可変長引数に対応した Array.prototype.push() と Math.max() に対して「 … 」(Spread-構文)で配列の中身をまとめて引数として渡してみます！

// < Array.prototype.push() >

const robotamaDevlopList = ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機'];
const robotamatama: string[] = [];

// 1. 配列を展開して、push => まとめて Push
robotamatama.push(...robotamaDevlopList);

console.log({robotamatama});
// robotama: (3) ['ロボ玉試作1号機', 'ロボ玉試作2号機', 'ロボ玉試作3号機']


// < Math.max() >

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

// 2. Math.max() に、配列を展開して値を渡す！
const highest = Math.max(...numbers);

console.log({highest});
// {highest: 12}