TS核心语法：解构与展开（实战详解，新手零踩坑）

前端那点事2026-04-13 16:05

在TypeScript开发中，解构（Destructuring）与展开（Spread Operator）是两个高频且实用的语法，它们源于ES6，被TS完美继承并增加了严格的类型约束。很多新手容易混淆两者的用法------解构是"拆"，从数组/对象中提取指定元素赋值给变量；展开是"合"，将数组/对象的元素展开为独立项。

本文将彻底拆解两者的核心用法、类型约束、实战场景，搭配可直接复制的TS代码示例，帮你快速掌握，避免踩坑，提升编码效率。

一、解构（Destructuring）：精准"拆"出需要的数据

解构的核心作用是「批量提取」------无需逐一访问数组索引或对象属性，通过"模式匹配"，一次性从数组、对象中提取指定元素，赋值给对应变量，让代码更简洁。TS在ES6解构的基础上，增加了类型注解，确保提取的数据类型符合预期，提前规避错误。

TS支持两种核心解构场景：数组解构、对象解构，两者语法略有差异，分开讲解更清晰。

1. 数组解构（适用于可迭代对象：数组、Set、Generator等）

数组解构按照「位置匹配」的原则，从数组中提取元素，可搭配默认值、剩余参数，满足不同提取需求。从TypeScript 1.5版本开始，TS正式支持ES6的数组解构语法，兼容所有可迭代数据结构。

基础用法（位置匹配）

按照数组元素的顺序，在左侧声明对应变量，即可完成提取，TS会自动进行类型推断，也可手动添加类型注解。

typescript 复制代码 
// 基础示例：提取数组元素
const arr: number[] = [10, 20, 30];
// 位置一一对应，提取前两个元素
const [a, b] = arr;
console.log(a); // 10（类型：number）
console.log(b); // 20（类型：number）

// 跳过不需要的元素（空占位）
const [x, , y] = arr; // 跳过第二个元素
console.log(x); // 10
console.log(y); // 30

// 手动添加类型注解（明确约束，更规范）
const [m, n]: [number, number] = [100, 200];

进阶用法：默认值、剩余参数、不完全解构

实际开发中，经常遇到数组长度不确定、元素可能缺失的情况，可通过默认值避免变量为undefined；通过剩余参数（...）提取剩余所有元素；不完全解构则是只匹配部分元素，依然能正常生效。

javascript 复制代码 
// 1. 默认值：当提取的元素为undefined时，使用默认值
// 注意：ES6内部用严格相等（===）判断，null不会触发默认值
const [a = 5, b = 10] = [1]; 
console.log(a); // 1（有值，不触发默认值）
console.log(b); // 10（无值，触发默认值）
const [c = 5] = [null];
console.log(c); // null（null !== undefined，不触发默认值）

// 2. 剩余参数（...rest）：提取剩余所有元素，类型为数组
const [first, ...rest] = [1, 2, 3, 4];
console.log(first); // 1
console.log(rest); // [2, 3, 4]（类型：number[]）

// 3. 不完全解构：左侧模式只匹配右侧部分元素，依然成功
const [x, y] = [1, 2, 3];
console.log(x); // 1，y：2（忽略第三个元素）

// 4. 可迭代对象解构（Set、Generator等）
const set = new Set(["a", "b", "c"]);
const [s1, s2] = set;
console.log(s1); // "a"，s2："b"

// Generator函数（原生具备Iterator接口）
function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b]; // 解构交换变量
  }
}
const [f1, f2, f3, f4] = fibs();
console.log(f1, f2, f3, f4); // 0, 1, 1, 2

注意点

如果解构的右侧不是可迭代对象（如数字、布尔值、null、undefined、普通对象），会直接报错，因为这些数据结构不具备Iterator接口，无法进行数组解构。

python 复制代码 
// 以下代码均会报错
const [a] = 1; // 报错：Type 'number' is not iterable
const [b] = null; // 报错：Type 'null' is not iterable
const [c] = {}; // 报错：Type '{}' is not iterable

2. 对象解构（最常用，适用于对象、接口实例）

对象解构按照「属性名匹配」的原则，提取对象中的指定属性，与数组解构的"位置匹配"不同，对象解构无需关注属性顺序，只要属性名一致，就能成功提取。这是TS开发中最常用的解构场景，尤其适合处理接口返回的数据。

基础用法（属性名匹配）

typescript 复制代码 
// 基础示例：提取对象属性
interface User {
  name: string;
  age: number;
  gender?: string; // 可选属性
}
const user: User = { name: "张三", age: 20 };

// 提取name和age属性（属性名一致）
const { name, age } = user;
console.log(name); // "张三"（类型：string）
console.log(age); // 20（类型：number）

// 手动添加类型注解（明确约束）
const { name: userName, age: userAge }: User = user;
console.log(userName); // "张三"（重命名变量，避免命名冲突）
console.log(userAge); // 20

进阶用法：默认值、剩余属性、嵌套解构

对象解构同样支持默认值（处理可选属性）、剩余属性（提取未指定的所有属性），以及嵌套解构（提取嵌套对象的属性），覆盖复杂场景需求。

typescript 复制代码 
// 1. 默认值：处理可选属性，避免undefined
const { gender = "男" } = user;
console.log(gender); // "男"（user中无gender，触发默认值）

// 2. 剩余属性（...rest）：提取未指定的所有属性
const { name, ...restProps } = user;
console.log(restProps); // { age: 20 }（类型：Omit<User, "name">）

// 3. 嵌套解构：提取嵌套对象的属性
interface UserWithAddress {
  name: string;
  address: {
    city: string;
    street: string;
  };
}
const userWithAddr: UserWithAddress = {
  name: "李四",
  address: { city: "北京", street: "朝阳路" }
};
// 嵌套提取city属性
const { address: { city } } = userWithAddr;
console.log(city); // "北京"

// 4. 解构默认值引用其他解构变量（需确保变量已声明）
const { x = 1, y = x } = {};
console.log(x, y); // 1, 1
// const { x = y, y = 1 } = {}; // 报错：x用到y时，y未声明

二、展开（Spread Operator）：灵活"合"出全新数据

展开运算符用「...」表示，核心作用是「批量展开」------将数组、对象、可迭代对象的元素/属性，展开为独立项，常用于合并数据、复制数据、传递函数参数。TS同样为展开操作添加了类型约束，确保展开的数据类型符合预期，避免类型混乱。

展开的核心场景的是：数组展开、对象展开、函数参数展开，其中数组和对象展开最常用。

1. 数组展开：合并、复制数组

数组展开可快速合并多个数组，或创建数组的浅拷贝，无需使用concat方法，代码更简洁。支持所有可迭代对象的展开，与数组解构的可迭代对象范围一致。

ini 复制代码 
// 1. 合并数组（最常用）
const arr1: number[] = [1, 2, 3];
const arr2: number[] = [4, 5, 6];
// 展开两个数组，合并为新数组
const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // [1, 2, 3, 4, 5, 6]

// 2. 复制数组（浅拷贝）
const originalArr = [1, 2, 3];
const copyArr = [...originalArr];
copyArr.push(4);
console.log(originalArr); // [1, 2, 3]（原数组不受影响）

// 3. 在push中使用，批量添加元素
const arr3 = [1, 2];
const arr4 = [3, 4];
arr3.push(...arr4);
console.log(arr3); // [1, 2, 3, 4]

// 4. 替代apply方法，传递数组参数
// 旧方法：Math.max.apply(null, arr1)
const maxNum = Math.max(...arr1); // 3（展开数组为独立参数）

2. 对象展开：合并、复制对象

对象展开可快速合并多个对象，或创建对象的浅拷贝，当多个对象有同名属性时，后面的属性会覆盖前面的属性（遵循"后定义覆盖前定义"原则）。这是TS中处理对象合并、属性更新的核心方式。

ini 复制代码 
// 1. 合并对象
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { a: 1, b: 2, c: 3, d: 4 }

// 2. 复制对象（浅拷贝）
const originalObj = { a: 1, b: 2 };
const copyObj = { ...originalObj };
copyObj.a = 100;
console.log(originalObj); // { a: 1, b: 2 }（原对象不受影响）

// 3. 覆盖/新增属性（实战高频）
interface User {
  name: string;
  age: number;
}
const user: User = { name: "张三", age: 20 };
// 复制user，同时更新age属性，新增gender属性
const updatedUser = { ...user, age: 21, gender: "男" };
console.log(updatedUser); // { name: "张三", age: 21, gender: "男" }

3. 函数参数展开：传递可变参数

展开运算符可将数组展开为独立的函数参数，无需手动遍历数组传递，尤其适合处理参数数量不确定的场景，常与剩余参数配合使用。

typescript 复制代码 
// 1. 传递数组参数
function greet(name: string, age: number): string {
  return `Hello, ${name}! 你${age}岁了`;
}
const args = ["李四", 22] as const; // as const 确保类型不被拓宽
greet(...args); // "Hello, 李四! 你22岁了"

// 2. 与剩余参数配合（展开接收，展开传递）
function sum(...numbers: number[]): number {
  return numbers.reduce((acc, num) => acc + num, 0);
}
const nums = [1, 2, 3, 4];
console.log(sum(...nums)); // 10（展开数组为独立参数）

// 3. 剩余参数 vs 展开运算符（易混淆点）
// 剩余参数：收集剩余参数为数组（函数参数中使用）
function log(first: string, ...rest: string[]) {
  console.log(first, rest);
}
log("a", "b", "c"); // "a", ["b", "c"]
// 展开运算符：将数组展开为独立参数（函数调用中使用）

展开的关键注意点

  • 浅拷贝限制：展开运算符只能实现浅拷贝，如果数组/对象包含嵌套引用（如嵌套对象、嵌套数组），修改嵌套数据会影响原数据。
  • 类型约束：TS会自动推断展开后的数据类型，若展开的是不同类型的数组/对象，会提示类型错误，确保类型安全。
  • 对象展开限制：只能展开对象的自身可枚举属性，继承的属性不会被展开。
ini 复制代码 
// 浅拷贝痛点示例
const original = [{ a: 1 }];
const copy = [...original];
copy[0].a = 2;
console.log(original[0].a); // 2（嵌套对象被修改，原数据受影响）

三、解构与展开：核心区别与实战对比

很多新手容易混淆解构和展开，核心区别在于「操作方向」：解构是"从整体到局部"（拆），展开是"从局部到整体"（合），结合下表和实战场景，彻底分清两者用法。

对比维度 解构（Destructuring） 展开（Spread Operator）
核心作用 从数组/对象中提取指定元素/属性（拆数据） 将数组/对象展开为独立项，合并为新数据（合数据）
语法标识 数组：[ ]，对象：{ } ...（三个点）
类型约束 需匹配数组/对象的类型，可手动添加类型注解 展开后的数据类型与原数据一致，TS自动推断
实战场景 1. 提取接口返回的指定字段；2. 批量声明变量；3. 函数参数提取；4. 变量交换 1. 合并数组/对象；2. 复制数组/对象（浅拷贝）；3. 传递函数参数；4. 更新对象属性
核心特点 按需提取，不改变原数据，简化变量声明 批量合并，创建新数据，不改变原数据（浅拷贝）

实战对比示例（最易混淆场景）

typescript 复制代码 
// 场景：处理用户数据
interface User {
  name: string;
  age: number;
  hobbies: string[];
}
const user: User = {
  name: "张三",
  age: 20,
  hobbies: ["打球", "看书"]
};

// 1. 解构：提取需要的字段（拆数据）
const { name, hobbies } = user;
console.log(name); // "张三"
console.log(hobbies); // ["打球", "看书"]

// 2. 展开：合并数据、更新属性（合数据）
const newUser = {
  ...user, // 展开原用户数据
  age: 21, // 覆盖age属性
  hobbies: [...user.hobbies, "编程"] // 展开原hobbies，新增元素
};
console.log(newUser); 
// { name: "张三", age: 21, hobbies: ["打球", "看书", "编程"] }

四、TS专属：解构与展开的类型约束进阶

与JS不同，TS的解构和展开会严格遵循类型约束，避免因类型混乱导致的bug，以下是两个高频进阶场景，新手必掌握。

1. 解构的类型注解规范

数组解构的类型注解需用「元组类型」（明确每个位置的类型），对象解构的类型注解可直接使用接口或类型别名，确保提取的元素/属性类型符合预期。

typescript 复制代码 
// 数组解构：元组类型注解（明确每个位置的类型）
const [a, b]: [number, string] = [10, "hello"];

// 对象解构：接口类型注解
interface User {
  name: string;
  age: number;
}
const { name, age }: User = { name: "张三", age: 20 };

// 错误示例：类型不匹配，TS编译报错
const [x, y]: [number, number] = [10, "20"]; // 报错：Type 'string' is not assignable to type 'number'

2. 展开的类型兼容性

展开不同类型的数组/对象时，TS会进行类型检查，只有类型兼容才能展开，否则会提示错误；展开联合类型时，TS会自动推断为联合类型的交集。

ini 复制代码 
// 1. 类型兼容：可正常展开
const arr1: number[] = [1, 2];
const arr2: number[] = [3, 4];
const merged = [...arr1, ...arr2]; // 类型：number[]

// 2. 类型不兼容：TS编译报错
const strArr: string[] = ["a", "b"];
const numArr: number[] = [1, 2];
// const errorMerged = [...strArr, ...numArr]; // 报错：类型不兼容

// 3. 联合类型展开：推断为交集类型
type A = { a: number };
type B = { b: string };
const objA: A = { a: 1 };
const objB: B = { b: "hello" };
const mergedObj: A & B = { ...objA, ...objB }; // 类型：A & B（同时拥有a和b属性）

五、实战避坑指南（新手必看）

  • 避坑1：对象解构时，属性名必须与原对象一致，否则变量为undefined；若需修改变量名，使用「属性名: 新变量名」语法。
  • 避坑2：数组解构时，右侧必须是可迭代对象，否则会报错；对象解构无此限制，但提取不存在的属性会得到undefined。
  • 避坑3：展开运算符实现的是浅拷贝，嵌套对象/数组修改后会影响原数据，深拷贝需结合JSON.parse(JSON.stringify())或专门的深拷贝工具。
  • 避坑4：函数参数展开时，若数组类型不明确，需用as const固定类型，避免TS类型拓宽导致的报错。
  • 避坑5：解构默认值仅在元素/属性为undefined时生效，null、0、""等 falsy 值不会触发默认值。

六、总结：解构与展开的核心用法口诀

记住这两句口诀，轻松掌握TS解构与展开的核心用法，开发时直接套用：

  1. 解构：数组按位置，对象按名称，按需提取，加类型更安全；

  2. 展开： ...拆整体，合并复制传参数，浅拷贝要注意嵌套。

解构与展开是TS中提升编码效率的核心语法，几乎所有实战场景（接口处理、组件传参、函数调用）都会用到。熟练掌握两者的用法和类型约束，既能简化代码，又能提前规避类型错误，是前端进阶的必备技能。

建议收藏本文，开发时遇到相关场景，直接对照代码示例使用；新手可先从基础用法练起，逐步掌握进阶技巧，慢慢就能做到灵活运用💪

相关推荐
LcGero7 小时前
TypeScript 快速上手：泛型与工具类型
typescript·cocos creator·游戏开发
程序员buddha9 小时前
TypeScript详细教程
javascript·ubuntu·typescript
We་ct10 小时前
LeetCode 50. Pow(x, n)：从暴力法到快速幂的优化之路
开发语言·前端·javascript·算法·leetcode·typescript·幂
comedate10 小时前
[TypeScript] TypeScript 学习从入门到精通
ubuntu·typescript·前端语言
Wect11 小时前
LeetCode 149. 直线上最多的点数：题解深度剖析
前端·算法·typescript
橘子编程1 天前
JavaScript与TypeScript终极指南
javascript·ubuntu·typescript
数据知道1 天前
claw-code 源码分析：从 TypeScript 心智到 Python/Rust——跨栈移植时类型、边界与错误模型怎么对齐？
python·ai·rust·typescript·claude code·claw code
luckyCover1 天前
TypeScript学习系列(二)：高级类型篇
前端·typescript
qq_381338501 天前
TypeScript 类型安全与类型体操实战：从入门到精通
javascript·安全·typescript
热门推荐
01GitHub 镜像站点022026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南05免费！不限量！用opencode接入英伟达（NVIDIA）大模型，轻松打造你的 AI 编程助手06Oh My Codex 快速使用指南07CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南08从限购到畅通：GLM-5.1 Coding Plan接入攻略09AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析10LLM Wiki：让大模型替你打理知识库的完整指南