関数のRestパラメーター
任意の数の引数を受け取る関数に型を付けます。
「関数のRestパラメーター」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
引数の多い関数
restパラメーターを使うと、関数は任意の数の引数を受け取り、それらを1つの配列にまとめられます。TypeScript はその配列に型を付けるため、引数の数が変わる呼び出しでも安全性を確保できます。
restパラメーターの基本
最後のパラメーターの前に ... を付け、配列型を指定します。関数内では通常の配列として扱えます。
function sum(...nums: number[]): number {
return nums.reduce((a, b) => a + b, 0)
}
console.log(sum(1, 2, 3, 4)) // 10引数なしで呼び出す
restパラメーターは引数0個にも対応でき、その場合は配列が空になるだけです。引数なしの場合のために特別な処理を用意する必要はありません。
function sum(...nums: number[]): number {
return nums.reduce((a, b) => a + b, 0)
}
console.log(sum()) // 0固定パラメーターの後のrest
restパラメーターは固定パラメーターの後に置けますが、必ず最後でなければなりません。固定パラメーターが先にバインドされ、残りがすべて rest 配列に入ります。
function join(separator: string, ...parts: string[]): string {
return parts.join(separator)
}
console.log(join("-", "a", "b", "c")) // a-b-crestは1つだけで、必ず最後
restパラメーターは最大1つまでしか指定でき、その後には何も置けません。rest の後にパラメーターを置くと、構文エラーになります。
// function bad(...nums: number[], last: number) {} // Error
function ok(first: number, ...rest: number[]) {
return first + rest.length
}
console.log(ok(10, 1, 2)) // 12要素の型による制約
rest 配列の要素型によって、すべての引数が制約されます。誤った型を渡すと、コンパイル時に検出されます。
function tags(...labels: string[]): string {
return labels.join(",")
}
console.log(tags("a", "b"))
// tags("a", 5) // Error: 5 is not a stringユニオン型を使ったrest
要素型にはユニオン型も指定できるため、異なる型の引数を混在させられます。関数内では、各項目を使う前に型を絞り込んでください。
function show(...items: (string | number)[]): string {
return items.map(String).join(" ")
}
console.log(show("x", 1, "y", 2)) // x 1 y 2タプル型を使ったrest
restパラメーターにはタプル型を指定して、固定部分と可変部分からなる形を表せます。ここでは、最初の引数が string で、その後に任意の数の number が続きます。
function record(...args: [string, ...number[]]): string {
const [label, ...values] = args
return label + ": " + values.join(",")
}
console.log(record("scores", 9, 8, 7))タプルのrestで引数の個数を強制する
タプルの rest 型では、先頭の要素が必須になります。必須の最初の引数を省略するとコンパイルエラーになり、通常の配列より強い制約を設定できます。
function record(...args: [string, ...number[]]): number {
return args.length
}
console.log(record("x")) // 1
// record() // Error: missing string argumentrestの呼び出しにスプレッド構文を使う
呼び出し側でスプレッド構文を使うと、既存の配列を restパラメーターに渡せます。配列の要素型は、パラメーターの型と一致していなければなりません。
function sum(...nums: number[]): number {
return nums.reduce((a, b) => a + b, 0)
}
const values = [1, 2, 3]
console.log(sum(...values)) // 6実際のrestの使い方
restパラメーターは、ログ出力ヘルパー、フォーマッター、数学ユーティリティなど、共通の型または構造化された型で可変数の入力を扱う処理に役立ちます。
function max(first: number, ...rest: number[]): number {
return rest.reduce((m, n) => (n > m ? n : m), first)
}
console.log(max(3, 7, 2, 9, 1)) // 9クイックチェック
型付き restパラメーターについての理解度を確認しましょう。
まとめ
restパラメーターでは、最後のパラメーターに ... を付け、追加の引数を型付き配列にまとめます。必ず最後に置き、1つしか指定できません。単純な配列、ユニオン型の配列、またはタプルとして型を付けることで、固定部分と可変部分からなる形を表し、引数の個数を制約できます。呼び出し側で既存の配列にスプレッド構文を使うと、restパラメーターに渡せます。
よくある質問
「関数のRestパラメーター」レッスンは無料ですか？
はい。「関数のRestパラメーター」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「関数のRestパラメーター」で何を学びますか？
任意の数の引数を受け取る関数に型を付けます。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「関数のRestパラメーター」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- 関数のRestパラメーター
- 配列とオブジェクトのスプレッド
- タプルのRest要素
- 可変長関数の型付け