0Pricing
TypeScript Academy · 课时

带类型的剩余参数与展开运算

为剩余参数和展开运算指定类型

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

欢迎

剩余参数会将多个参数收集到数组中。TypeScript 会将剩余参数的类型设为元素类型的数组。

为剩余参数指定类型

对剩余参数使用 `...name: T[]` 语法。它会将所有剩余参数收集为一个数组。
function sum(...nums: number[]): number {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

必需参数之后的剩余参数

剩余参数必须位于最后。其他必需参数应放在它们之前。
function log(level: string, ...messages: string[]): void {
  console.log(level, messages.join(' '));
}
log('INFO', 'Server', 'started', 'on', 'port', '3000');

将数组展开传入函数

使用展开语法 `...` 将数组元素作为独立参数传入。TypeScript 会检查展开后的类型是否与参数匹配。
function add(a: number, b: number): number { return a + b; }
const args: [number, number] = [1, 2];
add(...args); // OK — tuple spread is type-safe

展开普通数组

将普通数组展开传入参数数量固定的函数可能会导致错误,因为 TypeScript 无法验证参数数量是否匹配。
const nums = [1, 2]; // number[] — length unknown
// add(...nums); // Error: spread must match parameters
const pair: [number, number] = [1, 2];
add(...pair); // OK — tuple has known length

剩余参数与参数对象

剩余参数替代了旧式的 `arguments` 对象。与 `arguments` 不同,剩余参数是真正的数组,并且拥有完整的 TypeScript 类型支持。

展开对象(不是剩余参数)

展开对象会创建一个浅拷贝。TypeScript 会推断展开结果的合并类型。
const a = { x: 1, y: 2 };
const b = { z: 3 };
const c = { ...a, ...b }; // { x: number; y: number; z: number }

使用展开覆盖属性

展开对象时,后出现的同名属性会覆盖先出现的属性。
const base = { color: 'red', size: 5 };
const updated = { ...base, color: 'blue' };
// { color: 'blue', size: 5 }

数组中的带类型展开

数组展开会创建一个新数组。TypeScript 会推断合并后的元素类型。
const a: number[] = [1, 2];
const b: number[] = [3, 4];
const c: number[] = [...a, ...b]; // [1, 2, 3, 4]

可变参数元组中的剩余元素

TypeScript 支持在元组类型中使用剩余元素,以实现高级的可变参数模式。
type Strings = string[];
type StringsAndNumber = [...Strings, number];
const t: StringsAndNumber = ['a', 'b', 42];

解构中的剩余元素

在解构时使用剩余语法,将剩余元素收集到带类型的数组中。
const [first, ...rest]: number[] = [1, 2, 3, 4];
// first: number, rest: number[]

快速检查

在 `function collect(...items: string[])` 中,TypeScript 会为剩余参数 `...items` 推断出什么类型?

回顾

剩余参数(`...args: T[]`)会将剩余参数收集为带类型的数组。使用元组将数组展开传入函数,以确保类型安全。展开对象可以创建浅拷贝,并推断合并后的类型。

常见问题解答

「带类型的剩余参数与展开运算」课时是免费的吗?

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

「带类型的剩余参数与展开运算」这节课中我会学到什么?

为剩余参数和展开运算指定类型 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 TypeScript Academy 需要有经验吗?

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

「带类型的剩余参数与展开运算」课时需要多长时间?

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

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

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

此课程中的所有课时

  1. 参数与返回值类型注解
  2. 可选参数与默认参数
  3. 带类型的剩余参数与展开运算
  4. void、never 与函数签名
← 返回 TypeScript Academy