文章目录
在 TypeScript 中，函数的参数处理方式灵活多样，包括传统的可选参数和函数重载。不过，为了应对更多变的参数需求，TypeScript 引入了
Rest参数和扩展语法，以支持处理不定数量的参数。本文将深入探讨Rest 参数、Rest Arguments和参数解构，帮助你更好地掌握这一部分的知识。
一、Rest 参数
1. Rest 参数的基本概念
Rest 参数允许我们定义一个函数，该函数可以接收任意数量的参数，而不需要预先确定参数的数量。通过在参数前加上 ...，我们可以将这些参数收集成一个数组来处理。
例如，以下的函数 multiply 使用了 Rest 参数来处理多个输入值：
function multiply(n: number, ...m: number[]) {
return m.map((x) => n * x);
}
// 结果为 [10, 20, 30, 40]
const a = multiply(10, 1, 2, 3, 4);
在这个例子中，multiply 函数的第一个参数 n 是一个数值，而其余的参数通过 Rest 参数 ...m 传入，形成一个数组。函数将 m 数组中的每个元素乘以 n，并返回结果。
2. 类型注解与 Rest 参数
在 TypeScript 中，Rest 参数的类型注解可以是数组类型 Array<T> 或简写形式 T[]。需要注意的是，Rest 参数必须始终位于参数列表的最后。
function sum(...numbers: number[]): number {
return numbers.reduce((acc, num) => acc + num, 0);
}
上述函数 sum 可以接受任意数量的数值，并返回它们的和。
3. Rest 参数与可选参数的区别
Rest 参数与可选参数的主要区别在于，Rest 参数允许接收不定数量的参数，而可选参数仅允许某些参数为可选。虽然二者都可以灵活应对不同的参数需求，但它们在实际应用中有不同的场景。可选参数适用于参数数量已知但可能不传入的情况，而 Rest 参数则适用于参数数量完全未知的场景。
二、Rest Arguments（展开语法）
1. 展开语法的概念
与 Rest 参数相反，Rest Arguments（也称为扩展语法）允许我们将一个可迭代对象（例如数组）的元素展开为单独的参数传递给函数。TypeScript 中的扩展语法与 JavaScript 保持一致，使用 ... 符号将数组元素展开。
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
arr1.push(...arr2); // 将 arr2 中的元素依次传递给 push 方法
在这个例子中，arr2 中的元素被展开为单独的参数传递给 arr1.push 方法，从而实现了数组的合并。
2. 扩展语法的类型推断
扩展语法在 TypeScript 中也会进行类型推断。例如：
const args = [8, 5];
const angle = Math.atan2(...args);
在此例中，args 数组被展开为两个单独的参数传递给 Math.atan2 函数。不过，TypeScript 可能会将 args 推断为 number[]，而不是特定长度的元组类型，这会带来一些潜在问题。为了解决这种情况，我们可以使用 as const 将数组推断为长度固定的元组类型：
const args = [8, 5] as const;
const angle = Math.atan2(...args); // 正确
这样，TypeScript 就能够正确推断出 args 是一个长度为 2 的元组，从而避免了类型不匹配的问题。
3. 下层迭代（Downlevel Iteration）
如果需要在较旧的 JavaScript 运行环境中使用展开语法，可能需要启用 TypeScript 编译选项中的 downlevelIteration。这样可以确保扩展语法在不支持原生迭代器的环境中正常工作。
三、参数解构
1. 参数解构的基本概念
参数解构允许我们在函数定义中直接将对象的属性解构为局部变量。这使得代码更加简洁，特别是在处理复杂对象时。这种语法与 ES6 的解构赋值类似，在 TypeScript 中同样适用。
function sum({
a, b, c }: {
a: number; b: number; c: number }) {
console.log(a + b + c);
}
sum({
a: 10, b: 3, c: 9 });
在这个例子中，函数 sum 的参数是一个对象，通过参数解构的方式，直接将对象中的属性 a、b 和 c 提取出来用于函数体内的运算。
2. 使用类型别名简化参数解构
虽然直接在解构时声明类型是可行的，但在实际项目中，使用类型别名会让代码更加简洁易读。我们可以定义一个类型别名，然后在解构时使用它：
type ABC = {
a: number; b: number; c: number };
function sum({
a, b, c }: ABC) {
console.log(a + b + c);
}
这种方式不仅提高了代码的可读性，还增强了代码的复用性，尤其是在多个地方需要使用相同的对象结构时。
3. 参数解构的应用场景
参数解构在处理复杂对象时尤其有用，特别是在函数参数较多且结构复杂时。例如，当我们需要传递多个参数给一个函数时，通常会将这些参数封装成一个对象。通过参数解构，我们可以轻松地从对象中提取所需的值：
function logPerson({
name, age }: {
name: string; age: number }) {
console.log(`Name: ${
name}, Age: ${
age}`);
}
logPerson({
name: 'Alice', age: 30 });
在这个例子中，logPerson 函数使用参数解构来提取 name 和 age，从而简化了函数内部的逻辑。
四、函数的返回类型与 void
1. void 类型的特殊性
在 TypeScript 中，void 类型通常用于表示函数没有返回值。然而，即使一个函数被标注为返回 void 类型，它仍然可以返回 undefined 或其他值，只是这些值会被忽略。例如：
type voidFunc = () => void;
const f1: voidFunc = () => {
return true; // 这个返回值会被忽略
};
尽管函数 f1 返回了 true，但由于它的返回类型为 void，这个值实际上被忽略了。这样的设计是为了兼容某些场景，例如数组的 forEach 方法，虽然它的回调函数期望一个返回类型为 void 的函数，但实际上允许返回任意值。
2. 字面量函数的 void 返回值限制
值得注意的是，当我们明确声明一个函数的返回类型为 void 时，TypeScript 会禁止该函数返回任何值：
function f2(): void {
// @ts-expect-error
return true; // 这里会报错，因为函数声明返回 void
}
在这个例子中，f2 函数显式声明了返回类型为 void，因此 TypeScript 会提示返回 true 是无效的。
五、总结
TypeScript 提供了丰富的函数参数处理方式，包括 Rest 参数、展开语法和参数解构，这些特性让开发者能够更灵活地定义和调用函数。通过合理使用这些特性，可以简化代码结构，提高可读性和可维护性。此外，理解函数的返回类型，特别是 void 的使用规则，有助于编写更加严谨和高效的 TypeScript 代码。
推荐：
