对象解构类型
为解构出的对象属性标注类型，避免与重命名语法混淆。
对象解构类型 是 CoddyKit 上的免费 TypeScript Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 TypeScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 TypeScript Academy 课程共包含 4 节课。
解构与类型
对象解构会将对象中的属性取出，放入局部变量。使用 TypeScript 时，您可以为解构后的结构添加类型注解——但这里有一个广为人知的陷阱。让我们正确处理它。
对象解构基础
普通的解构会按名称提取属性。TypeScript 会根据源对象推断每个变量的类型。
const user = { name: "Ada", age: 36 }
const { name, age } = user
console.log(name, age) // Ada 36为整个模式添加注解
要为解构后的变量添加注解，您应将类型放在整个模式的后面，用于描述对象结构，而不是放在每个变量后面。
const { name, age }: { name: string; age: number } = {
name: "Leo",
age: 5,
}
console.log(name, age)解构函数参数
一种非常常见的写法是：直接在函数签名中解构参数对象，并为其结构添加注解。在函数体内，name 和 id 是具有类型的局部变量。
function greet({ name }: { name: string }) {
return "Hi " + name
}
console.log(greet({ name: "Sam" }))冒号混淆陷阱
在解构中，冒号表示重命名，而不是添加注解。写下 { name: string } 会创建一个名为 string 的变量，用来保存 name 的值——这几乎从来不是您想要的结果。
const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here同时重命名和添加类型注解
如果必须同时重命名并指定类型，请使用冒号进行重命名，然后为整个模式添加类型注解。结构注解仍使用原始属性名。
const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada使用命名类型
对于任何非简单结构，请优先使用命名接口，而不是内联结构。这样可读性更好，也可以重复使用。
interface User {
name: string
age: number
}
function show({ name, age }: User) {
console.log(name + " is " + age)
}
show({ name: "Ada", age: 36 })只解构部分属性
您不必提取每个字段。选择所需的字段即可；对于您创建的局部变量，对象类型的其余部分会被忽略。
interface User { name: string; age: number; email: string }
function label({ name }: User) {
return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))解构返回值
当函数返回对象时，您可以立即解构结果。返回类型会自动应用到这些局部变量。
function makePoint(): { x: number; y: number } {
return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3收集其余部分
剩余模式会将剩余属性收集到一个新对象中。TypeScript 会将其类型推断为移除已提取键后的源类型。
interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)内联结构与命名类型回顾
对于一次性使用的小型模式，内联结构完全可以胜任。结构一旦变大或重复出现，就应使用命名类型。还请记住：冒号用于重命名，类型注解写在右花括号之后。
interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))快速检查
测试您对带类型对象解构的理解。
回顾
解构中的类型注解要写在整个模式之后，用于描述对象结构。模式内部的冒号用于重命名绑定，而不是添加类型注解。您可以使用结构注解或命名类型来解构函数参数和返回值，只提取所需字段，并使用剩余模式收集其余部分。
常见问题解答
「对象解构类型」课时是免费的吗？
是的 — 「对象解构类型」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 TypeScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 TypeScript Academy 课程共包含 4 节课。
「对象解构类型」这节课中我会学到什么？
为解构出的对象属性标注类型，避免与重命名语法混淆。 你通过在浏览器中直接运行的动手代码来练习 TypeScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 TypeScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 TypeScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「对象解构类型」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 TypeScript Academy 课中编写并运行代码吗？
能。每节 TypeScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。