TypeScript，解构 (Destructuring)

解构（Destructuring）是一种在 JavaScript 和 TypeScript 中用来从数组或对象中提取值并赋给变量的语法。它可以使代码更简洁、可读，并且可以方便地访问复杂数据结构中的数据。

数组解构

数组解构允许你通过位置来提取数组中的值，并将它们赋给变量。在 TypeScript 中，你可以选择性地为变量指定类型。

const numbers: number[] = [1, 2, 3];
const [first, second, third]: number[] = numbers;

console.log(first); // 输出: 1
console.log(second); // 输出: 2
console.log(third); // 输出: 3

在这个例子中，我们从 numbers 数组中提取值，并将它们赋给变量 first、second 和 third，同时指定了它们的类型为 number。

对象解构

对象解构允许你从对象中提取属性并赋给变量。同样，在 TypeScript 中，你也可以指定变量的类型。

interface Person {
  name: string;
  age: number;
}

const person: Person = { name: 'Alice', age: 30 };
const { name, age }: { name: string, age: number } = person;

console.log(name); // 输出: Alice
console.log(age); // 输出: 30

在这个例子中，我们从 person 对象中提取 name 和 age 属性，并将它们赋给变量 name 和 age，同时指定了它们的类型为 { name: string, age: number }。

重命名

使用重命名时，可以在解构模式中为提取的属性指定新的变量名。

const person = { firstName: 'John', lastName: 'Doe' };
const { firstName: first, lastName: last } = person;

console.log(first); // 输出: John
console.log(last); // 输出: Doe

在这个例子中，我们从 person 对象中提取 firstName 属性并将其赋给变量 first，同时提取 lastName 属性并将其赋给变量 last。

默认值

为解构的变量指定默认值可以在提取的属性值为 undefined 或不存在时使用。

const { a = 1, b = 2 } = { a: 3 };

console.log(a); // 输出: 3
console.log(b); // 输出: 2（使用了默认值）

在这个例子中，b 变量使用了默认值 2，因为提取的对象中不存在 b 属性。

嵌套解构

嵌套解构允许从嵌套的对象或数组中提取值。

const data = {
  person: {
    name: 'John',
    age: 30
  },
  scores: [90, 85, 95]
};

const { person: { name, age }, scores: [math, english, science] } = data;

console.log(name); // 输出: John
console.log(age); // 输出: 30
console.log(math); // 输出: 90
console.log(english); // 输出: 85
console.log(science); // 输出: 95

在这个例子中，我们从 data 对象中提取了 person 和 scores 属性，并从中获取相应的值。person 属性是一个对象，我们再次对其进行解构以获取 name 和 age 属性的值；scores 属性是一个数组，我们从中提取了数学、英语和科学的分数。