TypeScript 中三个点的含义探究

在 TypeScript 中，三个点(…)是一个常用的语法结构，它具有多种含义和应用场景。以下是三个点在 TypeScript 中的主要含义和用法：

1. 类型展开操作符（Type Spread Operator）
   类型展开操作符用于将一个类型中的属性展开到另一个类型中。通过使用三个点(…)，可以将一个对象的类型展开到另一个对象的类型中，继承其中的属性和类型。这在创建具有多个可选属性的对象时非常有用。
   例如，假设我们有一个接口User和一个对象userData，我们想创建一个新的对象user，它具有与User接口相同的属性，但某些属性可能缺失。我们可以使用类型展开操作符来实现：

   interface User {
   name: string;
   age: number;
   email?: string;
   }
   const userData = {
   name: 'John',
   age: 30,
   };
   const user: User = { ...userData };

   在上面的例子中，user对象继承了User接口中的所有属性，包括可选的email属性。通过使用类型展开操作符，我们可以轻松地创建一个具有自定义属性的新对象，同时保持类型安全。
2. 剩余参数（Rest Parameters）
   在函数参数列表中，三个点(…)用于表示剩余参数。当函数需要接受不定数量的参数时，可以使用剩余参数来捕获所有额外的参数。这些参数在函数体内作为一个数组来访问。
   例如，假设我们有一个函数sum，它需要接受任意数量的参数，并将它们相加：

   function sum(...args: number[]) {  // 使用剩余参数
   return args.reduce((acc, val) => acc + val, 0);
   }
   console.log(sum(1, 2, 3));  // 输出 6
   console.log(sum(1, 2, 3, 4, 5));  // 输出 15

   在上面的例子中，sum函数使用剩余参数args来捕获所有传递给函数的参数。在函数体内，我们使用reduce方法将所有参数相加并返回结果。通过使用剩余参数，我们可以编写灵活的函数来处理任意数量的参数。
3. 剩余属性（Rest Properties）
   在对象解构中，三个点(…)用于表示剩余属性。当从一个对象中解构出部分属性后，剩余的属性可以通过剩余属性来捕获。这在使用解构赋值更新对象时特别有用。
   例如，假设我们有一个对象user和一个新对象newData，我们想更新user中的某些属性，同时保留其他属性不变：

   const user = { name: 'John', age: 30, email: 'john@example.com' };
   const newData = { name: 'Jane', age: 40 };
   const { name: newName = '', ...rest } = newData;
   const updatedUser = { ...user, ...rest };
   console.log(updatedUser);