嵌套解构模式
为深层嵌套的解构表达式标注类型。
嵌套解构模式 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。
深入嵌套数据
嵌套解构可以在一条语句中从对象内部的对象提取值。它简洁明了，但会以一些值得理解的方式与类型交互；过度使用还可能损害可读性。
解构嵌套属性
让左侧模式反映对象的结构。要访问 data.user.name，请在 user 下嵌套一个模式。
const data = { user: { name: "Ada", age: 36 } }
const { user: { name } } = data
console.log(name) // Ada外层名称不会被绑定
这里有一个容易忽略的陷阱：在 { user: { name } } 中，user 只是路径，而不是绑定。您会得到 name，但之后并不存在名为 user 的变量。
const data = { user: { name: "Ada" } }
const { user: { name } } = data
console.log(name) // Ada
// console.log(user) // Error: user is not defined为嵌套解构添加类型
在模式之后使用完整的嵌套结构添加注解。每一层都对应对象结构中的一层。
const { user: { name } }: { user: { name: string } } = {
user: { name: "Leo" },
}
console.log(name)命名类型更易读
内联嵌套结构很快就会变得冗长难读。命名接口可以让注解保持简洁，同时仍然支持嵌套提取。
interface Data { user: { name: string; age: number } }
function show({ user: { name, age } }: Data) {
console.log(name + " " + age)
}
show({ user: { name: "Ada", age: 36 } })提取两个层级
如果还需要外层对象，请先单独提取它，再通过另一个步骤解构其成员。这样通常比深层嵌套更清晰。
interface Data { user: { name: string } }
const data: Data = { user: { name: "Ada" } }
const { user } = data
const { name } = user
console.log(user, name)将嵌套与默认值结合
默认值可以出现在任意层级。对于可能缺失的嵌套字段，请在绑定它的位置直接提供备用值。
interface Opts { theme?: { color?: string } }
function style({ theme: { color = "black" } = {} }: Opts = {}) {
return color
}
console.log(style()) // black为缺失的子对象设置默认值
当整个嵌套对象可能缺失时，请先将其默认设为 {}，再解构其中的字段；否则访问 undefined 的属性会抛出错误。
interface Cfg { db?: { host?: string } }
const { db: { host = "localhost" } = {} }: Cfg = {}
console.log(host) // localhost对象中的嵌套数组
您可以混合使用对象模式和数组模式。这里会在一行中获取嵌套数组的第一个标签。
const post = { meta: { tags: ["ts", "js"] } }
const { meta: { tags: [firstTag] } } = post
console.log(firstTag) // ts可读性方面的取舍
深层嵌套模式可以减少行数，却可能掩盖代码意图。嵌套三层并使用默认值后，代码会很难快速理解。如果读者必须停下来思考，就应将其拆分为多个步骤。
// Hard to read:
// const { a: { b: { c = 0 } = {} } = {} } = obj
// Clearer:
// const a = obj.a ?? {}
// const c = a.b?.c ?? 0平衡的示例
通常，一层嵌套加上几个字段是最合适的选择——既简洁，又不会晦涩难懂。
interface Resp { data: { id: number; title: string } }
function render({ data: { id, title } }: Resp) {
return id + ": " + title
}
console.log(render({ data: { id: 1, title: "Hi" } }))快速检查
测试您对嵌套解构的理解。
回顾
嵌套解构会反映对象结构，以访问内部值；外层键是路径而不是绑定，因此只有最内层的名称会成为变量。请使用完整的嵌套结构或命名类型添加注解，在解构缺失子对象的字段前先将其默认设为 {}，并根据需要混合使用数组模式。保持浅层嵌套；为确保可读性，应将深层模式拆分为多个步骤。
常见问题解答
「嵌套解构模式」课时是免费的吗？
是的 — 「嵌套解构模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。
「嵌套解构模式」这节课中我会学到什么？
为深层嵌套的解构表达式标注类型。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 TypeScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「嵌套解构模式」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 TypeScript Academy 课中编写并运行代码吗？
能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。