TypeScript Academy · 课时

函数中的剩余参数

Q: 「函数中的剩余参数」这节课中我会学到什么？

为能够接受任意数量参数的函数标注类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

为能够接受任意数量参数的函数标注类型。

函数中的剩余参数 是 CoddyKit 上的免费 TypeScript Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。

带有多个参数的函数

剩余参数让函数可以接受任意数量的参数，并将它们收集到一个数组中。TypeScript 会为该数组添加类型，因此即使调用时参数数量可变，也能保证安全。

基本剩余参数

在最后一个参数前加上 ...，并为它指定数组类型。在函数内部，它的行为就像普通数组一样。

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
console.log(sum(1, 2, 3, 4)) // 10

使用零个参数调用

剩余参数可以匹配零个参数，此时数组只是空的。对于无参数的情况，无需进行特殊处理。

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
console.log(sum()) // 0

固定参数之后的剩余参数

剩余参数可以跟在固定参数之后，但必须是最后一个参数。固定参数会先完成绑定，剩余的所有参数都会进入剩余数组。

function join(separator: string, ...parts: string[]): string {
  return parts.join(separator)
}
console.log(join("-", "a", "b", "c")) // a-b-c

只能有一个剩余参数，且必须位于末尾

最多只能有一个剩余参数，且其后不能再有任何内容。在剩余参数后放置另一个参数会导致语法错误。

// function bad(...nums: number[], last: number) {} // Error
function ok(first: number, ...rest: number[]) {
  return first + rest.length
}
console.log(ok(10, 1, 2)) // 12

元素类型约束

剩余数组的元素类型会约束每个参数。传入错误类型会在编译时被捕获。

function tags(...labels: string[]): string {
  return labels.join(",")
}
console.log(tags("a", "b"))
// tags("a", 5) // Error: 5 is not a string

带联合类型的剩余参数

元素类型可以是联合类型，从而允许传入混合类型的参数。在函数内部，请先缩小每个元素的类型范围，再使用它。

function show(...items: (string | number)[]): string {
  return items.map(String).join(" ")
}
console.log(show("x", 1, "y", 2)) // x 1 y 2

带元组类型的剩余参数

剩余参数可以使用元组类型，以描述先固定后可变的结构。这里第一个参数是字符串，后面可以跟任意数量的数字。

function record(...args: [string, ...number[]]): string {
  const [label, ...values] = args
  return label + ": " + values.join(",")
}
console.log(record("scores", 9, 8, 7))

元组剩余参数会强制要求参数数量

使用元组剩余类型时，开头的元素是必需的。省略必需的第一个参数会导致编译错误，这比普通数组的约束更严格。

function record(...args: [string, ...number[]]): number {
  return args.length
}
console.log(record("x")) // 1
// record() // Error: missing string argument

将数组展开到剩余参数调用中

您可以在调用位置使用展开语法，将已有数组传给剩余参数。数组的元素类型必须与参数的元素类型匹配。

function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0)
}
const values = [1, 2, 3]
console.log(sum(...values)) // 6

实践中的剩余参数

剩余参数可用于日志记录辅助函数、格式化函数和数学工具等场景——任何需要处理数量可变且类型相同或结构化的输入的场景都适用。

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

快速检查

测试您对带类型剩余参数的理解。

回顾

剩余参数在最后一个参数上使用 ...，将额外参数收集到带类型的数组中。它必须位于末尾，并且只能有一个。您可以将其声明为普通数组、联合类型数组或元组，以表达先固定后可变的结构并强制要求相应的参数数量。在调用位置展开已有数组，即可将其传给剩余参数。

常见问题解答

「函数中的剩余参数」课时是免费的吗？

是的 — 「函数中的剩余参数」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。

「函数中的剩余参数」这节课中我会学到什么？

为能够接受任意数量参数的函数标注类型。你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「函数中的剩余参数」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 TypeScript Academy 课中编写并运行代码吗？

能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 TypeScript Academy