解释 TypeScript 中的剩余参数和实参
TypeScript 是一种功能丰富的编程语言，在使用 TypeScript 开发 Web 应用程序时，了解 TypeScript 的所有功能至关重要。其中之一就是 TypeScript 中的剩余参数和实参。
本教程将通过各种代码示例教我们如何在 TypeScript 中使用剩余参数和实参。
什么是剩余参数和实参?
当我们不知道需要向函数传递多少个实参时，可以使用剩余参数将多个实参传递给函数。剩余参数名称的书写方式为，后跟"…"(三个点)。
当我们在调用函数时传递多个参数时，这些参数被称为剩余参数。
剩余参数和参数的使用规则
剩余参数接受 0 到 N 个参数。
始终将剩余参数放在参数列表的最后。
该函数只包含一个剩余参数。
剩余参数的类型应该是字符串数组、数字、布尔值、对象、用户定义类型等。
剩余参数的名称可以像普通参数名称一样随意。
语法
用户可以按照以下语法在 TypeScript 中使用剩余参数。
function func1(...numbers: number[]) {
}
func1(1, 2, 3, 4, 5);
在上述语法中，func1() 函数包含名为"numbers"的剩余参数，这是一个未指定元素的数组。之后，我们通过将多个数字作为参数传递来调用该函数。
示例
在下面的示例中，我们创建了 changeSign() 函数来更改数字的符号，该函数接受"nums"剩余参数。在 changeSign() 函数中，我们使用 map() 方法将符号相反的数字映射到更新后的数组，并从函数返回新的数组。
我们通过传递不同数量的参数来调用 changeSign() 参数，在输出中，我们可以观察到它打印了输出而没有显示任何错误。这样，我们就可以在使用剩余参数的同时向函数传递多个参数。
// TypeScript 中剩余参数用于改变数字的符号。
function changeSign(...nums: number[]): number[] {
return nums.map((num) => num * -1);
}
let changedSigns = changeSign(1, -2, 3, 4, 5);
console.log(changedSigns);
changedSigns = changeSign(10, -12);
console.log(changedSigns);
编译后，它将生成以下 JavaScript 代码 -
function changeSign() {
var nums = [];
for (var _i = 0; _i < arguments.length; _i++) {
nums[_i] = arguments[_i];
}
return nums.map(function (num) { return num * -1; });
}
var changedSigns = changeSign(1, -2, 3, 4, 5);
console.log(changedSigns);
changedSigns = changeSign(10, -12);
console.log(changedSigns);
示例
在下面的示例中，stringMerger() 函数接受两个参数。第一个是字符串参数，第二个是字符串类型的剩余参数。由于第一个字符串参数，我们在调用该函数时始终需要传递一个字符串值。之后，我们可以传递剩余参数将处理的未指定数量的参数。
在函数中，我们遍历通过剩余参数获取的字符串数组，并将所有数组元素合并到 str1。最后，我们返回 str1 字符串。
我们通过传递多个字符串来执行 stringMerger() 函数。str1 将处理第一个参数，str2 将处理我们在输出中可以观察到的所有其他参数。
// 用于连接字符串的函数
function stringMerger(str1: string, ...str2: string[]): string {
for(let i=0; i<str2.length; i++){
str1 += str2[i];
}
return str1;
}
// 使用不同数量的参数执行函数
let finalStr = stringMerger("Hello", " ", "World", "!");
console.log(finalStr);
finalStr = stringMerger("Hello", " ", "World", "!", " ", "How", " ", "are", " ", "you", "?");
console.log(finalStr);
finalStr = stringMerger("ABCDEF");
console.log(finalStr);
编译后，将生成以下 JavaScript 代码 -
// 用于连接字符串的函数
function stringMerger(str1) {
var str2 = [];
for (var _i = 1; _i < arguments.length; _i++) {
str2[_i - 1] = arguments[_i];
}
for (var i = 0; i < str2.length; i++) {
str1 += str2[i];
}
return str1;
}
// Executing the function with different number of arguments
var finalStr = stringMerger("Hello", " ", "World", "!");
console.log(finalStr);
finalStr = stringMerger("Hello", " ", "World", "!", " ", "How", " ", "are", " ", "you", "?");
console.log(finalStr);
finalStr = stringMerger("ABCDEF");
console.log(finalStr);
示例
以下示例演示了如何使用用户定义数据类型的剩余参数。我们定义了包含"name"和"id"属性的"User"接口。
createUser() 函数接受"User"类型的剩余参数，并打印所有用户的详细信息。此外，我们还创建了多个用户对象。
我们执行了三次 createUser() 函数，并传递了不同数量的 User 对象作为参数。在输出中，我们可以看到它打印了用户详细信息，没有任何错误。
// 创建用户定义类型的接口
interface User {
name: string;
id: number;
}
// Rest parameter of User type
function createUser(...users: User[]) {
// Printing all user details
users.forEach(user => {
console.log(`Name: ${user.name}, ID: ${user.id}`);
});
}
// Creating user objects
let user1: User = { name: "Man", id: 1 };
let user2: User = { name: "Shah", id: 2 };
let user3: User = { name: "Shubham", id: 3 };
let user4: User = { name: "Ram", id: 4 };
console.log("First function call!")
createUser(user1, user2, user3, user4);
console.log("Second function call!")
createUser(user1, user2);
console.log("Third function call!")
createUser(user1, user2, user3);
编译后，将生成以下 JavaScript 代码 -
// User 类型的 Rest 参数
function createUser() {
var users = [];
for (var _i = 0; _i < arguments.length; _i++) {
users[_i] = arguments[_i];
}
// Printing all user details
users.forEach(function (user) {
console.log("Name: ".concat(user.name, ", ID: ").concat(user.id));
});
}
// Creating user objects
var user1 = { name: "Man", id: 1 };
var user2 = { name: "Shah", id: 2 };
var user3 = { name: "Shubham", id: 3 };
var user4 = { name: "Ram", id: 4 };
console.log("First function call!");
createUser(user1, user2, user3, user4);
console.log("Second function call!");
createUser(user1, user2);
console.log("Third function call!");
createUser(user1, user2, user3);
我们学习了在 TypeScript 中使用剩余参数。使用剩余参数的主要目的是在不确定传递给函数的参数数量时处理参数。基本上，它用于处理可选参数。
