新闻详情

新闻详情

首页 / 资讯中心 / 详情

The Concise TypeScript Book 精读:对象类型(Object Types)的三种定义方式与工程化实战

发布时间:2026/9/25 3:59:16来源:尧图网络
The Concise TypeScript Book 精读:对象类型(Object Types)的三种定义方式与工程化实战
文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载对象类型Object Types是 TypeScript 类型系统的基石它描述“一个对象长什么样”有哪些属性、每个属性的类型是什么、属性是必填还是可选。本文以开源仓库 typescript-book 中《The Concise TypeScript Book》第 28 章 object-types.md捷克语译本英文原版见 website/src/content/docs/book/object-types.md为核心骨架结合同书相邻章节的源码级示例系统讲解 interface、type alias、匿名对象类型三种定义方式以及可选属性、只读属性、索引签名、联合/交叉类型、映射类型等进阶能力。读完本文你将能独立判断何时用 interface、何时用 type并写出结构清晰、可复用的对象类型声明。一、对象类型描述对象的“形状”在 TypeScript 中对象类型object type描述的是一组对象的公共形状shape它规定对象的属性名称、每个属性对应的类型以及这些属性是必填还是可选。通俗地说对象类型就是一份“属性清单”编译器依据这份清单对对象字面量、函数参数、返回值进行静态检查。从 object-types.md 的定义看一个对象类型需要回答三个问题有哪些属性属性名每个属性的类型是什么值类型属性是否必需required / optional。例如下面的声明描述了一个“用户”对象必须有name字符串和age数字email可以有也可以没有interface User { name: string; age: number; email?: string; }email?: string末尾的问号正是“可选属性”的语法标记它回答了上述第三个问题。二、定义对象类型的三种方式TypeScript 提供了三种书写对象类型的方式第 28 章逐一给出了最小示例。2.1 方式一interface接口接口通过指定属性的名称、类型和可选性来定义对象的形状interface User { name: string; age: number; email?: string; }interface的语义是“契约”任何被标注为User的值都必须满足这个形状。接口还可以声明方法成员例如同书 interface-and-type.md 中的示例interface Person { name: string; age: number; greet(): void; }方法成员由方法名、括号内的参数列表和返回类型组成多个成员之间用分号分隔。2.2 方式二type alias类型别名类型别名与接口类似也能描述对象形状但它的能力边界更宽它可以在已有类型或类型组合的基础上创建出全新的自定义类型包括联合类型union、交叉类型intersection以及其他复杂类型type Point { x: number; y: number; };注意type使用进行赋值式声明而interface直接使用声明语句这是两者最直观的语法差异详见 differences-between-type-and-interface.md。2.3 方式三匿名对象类型inline / anonymous对象类型不必起名字可以直接“内联”在需要它的位置。第 28 章的示例将匿名对象类型直接写在函数参数上const sum (x: { a: number; b: number }) x.a x.b; console.log(sum({ a: 5, b: 1 }));(x: { a: number; b: number })中的{ a: number; b: number }就是一个匿名对象类型。它适合“一次性使用”的场景——结构不会被复用就不必为其命名。interface-and-type.md 中也有等价的内联写法const x: { name: string; age: number } { name: Simon, age: 7 };三、深入属性细节可选、只读与索引签名对象类型不止于“列出属性名和类型”它还能精确控制每个属性的行为语义。3.1 可选属性Optional Properties在属性名后追加?即可声明该属性可选。第 13 章 optional-properties.md 给出了完整示例type X { a: number; b?: number; // Optional };可选属性在读取时类型会变为number | undefined因此使用前需要做存在性判断。若属性可选还可以在解构时给出默认值让逻辑更稳健type X { a: number; b?: number; }; const x ({ a, b 100 }: X) a b;当b未传入时自动回退到100避免运行时undefined参与运算。3.2 只读属性readonlyreadonly修饰符可以阻止对属性的后续写入但它只约束“不能重新赋值”并不提供深层次的不可变性保证嵌套对象内部仍可能被修改。第 14 章 readonly-properties.md 给出了四种等价/相近的写法interface Y { readonly a: number; } type X { readonly a: number; }; type J Readonly{ a: number; }; type K { readonly [index: number]: string; };其中Readonly{ a: number }是 TypeScript 内置的映射工具类型它把传入类型的所有属性批量加上readonly最后一种写法把readonly应用在数字索引签名上即“该数组/字典的所有下标只读”。3.3 索引签名Index Signatures当对象的属性键无法提前枚举时例如字典、哈希表可以使用索引签名。第 15 章 index-signatures.md 展示了string | number双键写法type K { [name: string | number]: string; }; const k: K { x: x, 1: b }; console.log(k[x]); console.log(k[1]); console.log(k[1]); // Same result as k[1]这里有一个重要的 JavaScript 运行时事实数字索引会被自动强制转换为字符串。因此k[1]与k[1]访问的是同一个键返回值相同。理解这一点可以避免把number和string键误当成两套独立存储。四、组合对象类型扩展、联合与交叉单一的对象类型往往不够用TypeScript 提供了把多个对象类型组合起来的机制。4.1 用 extends 扩展接口第 16 章 extending-types.md 说明接口可以通过extends复制其他类型的成员且支持多继承interface X { a: string; } interface Y extends X { b: string; } // 多类型继承 interface A { a: string; } interface B { b: string; } interface Y2 extends A, B { y: string; }关键约束是extends关键字只适用于接口interface和类class。类型别名没有extends组合多个 type 时要使用交叉类型type A { a: number; }; type B { b: number; }; type C A B;另外还有一个方向性限制类型别名可以被接口extends接口继承类型别名反过来则不行——类型别名无法extends接口type A { a: string; }; interface B extends A { b: string; }4.2 联合类型与交叉类型联合类型union用|连接表示“值可能是其中任意一种”。第 32 章 union-type.md 的示例let x: string | number; x hello; // Valid x 123; // Valid交叉类型intersection用连接表示“值同时拥有所有类型的全部属性”。第 33 章 intersection-types.md 的示例type X { a: string; }; type Y { b: string; }; type J X Y; // Intersection const j: J { a: a, b: b, };交叉类型在组合多个 DTO、混入mixin等场景中非常常见。4.3 interface 与 type 的选择声明合并第 54 章 differences-between-type-and-interface.md 系统梳理了两者的差异其中最关键的一条是声明合并declaration merging同名 interface 可以被多次声明并自动合并成一个接口而 type 不允许同名重复声明。interface A { x: string; } interface A { y: string; } const j: A { x: xx, y: yy, };这在“不修改第三方类型定义的前提下为其补充成员”时很有价值例如为库暴露的接口扩展字段。但合并行为也可能掩盖命名冲突属于“双刃剑”。两者在组合能力上的差异总结如下能力interfacetype alias描述对象形状✅✅声明合并同名多次声明✅❌用extends扩展✅接口/类❌被其他接口extends—✅接口可继承类型别名定义联合类型A \| B间接可用类型别名包一层✅ 直接定义交叉类型A B无内建支持✅ 直接定义其他复杂类型有限✅ 更灵活典型取舍需要开放扩展如库的公共 API 类型、可被消费者合并时倾向interface需要联合、交叉、条件、映射等复杂类型运算时倾向type。五、进阶映射类型与结构化类型的运行真相5.1 映射类型批量改造对象类型第 38 章 mapped-types.md 展示了如何借助keyof遍历已有类型的每个属性并套用映射函数生成新类型。下面的MyMappedTypeT把每个属性都变成“该类型元素的数组”type MyMappedTypeT { [P in keyof T]: T[P][]; }; type MyType { foo: string; bar: number; }; type MyNewType MyMappedTypeMyType; const x: MyNewType { foo: [hello, world], bar: [1, 2, 3], };MyNewType与MyType表达的信息一一对应只是每个字段的形态从“单个值”变成了“值的数组”。这种“同一信息、不同格式”的类型变换能力是 TypeScript 类型编程的核心手段之一前面提到的内置ReadonlyT也是同类机制的产物。5.2 结构化类型structural typing与多余属性对象类型的匹配是结构化的只要形状满足要求即可不需要显式的继承或实现关系。第 57 章 erased-structural-types.md 演示了这一点type NameProp1 { prop1: string; }; function log(x: NameProp1) { console.log(x.prop1); } const obj { prop2: 123, prop1: Origin, }; log(obj); // Validobj多出prop2属性但它仍然满足NameProp1的形状要求因此可以传给log。不过需要注意对象字面量fresh object literal在直接赋值时会触发“多余属性检查”excess property checking编译器会对字面上多出来的属性报错上例通过中间变量obj传递则绕开了这一限制。这是结构化类型与字面量新鲜度检查之间的一个经典差异。5.3 strictNullChecks 对对象属性的影响默认情况下null/undefined可以赋值给任何类型这常常是运行时崩溃的根源。开启strictNullChecks后第 19 章 strictnullchecks.md 指出只有显式声明为T | null | undefined的变量和参数才能接收空值否则编译器直接报错。这对对象类型的设计有直接影响——例如“可选属性在读取时是T | undefined”配合严格空值检查可以强制开发者在访问前做判空从而把潜在的空指针问题消灭在编译期。本仓库的网站工程在 website/tsconfig.json 中继承了astro/tsconfigs/strict即默认开启严格模式可作为实际项目配置的参照。六、最佳实践小结结合 object-types.md 及同书相关章节可以沉淀出如下几条可落地的建议优先用对象字面量内联类型还是命名类型结构只出现一次用匿名对象类型如函数参数直接写{ a: number; b: number }结构会被多处复用立即提取为interface或type。可选属性一律加?并配合默认值或判空逻辑不要用“可能缺失但没标注”的属性否则在strictNullChecks下会立刻收到编译错误。需要对外扩展第三方补丁、插件机制用interface利用声明合并能力需要联合、交叉、映射等复杂运算用type避免用 interface 表达不了的结构。组合多个对象类型接口之间用extends类型别名之间用交叉类型跨类别组合时记住“type 可以被 interface extends反之不行”。为属性语义把关不变的数据用readonly键不固定用索引签名并牢记“数字索引会被转成字符串索引”这一运行时事实。以上所有示例均可在仓库的 website/src/content/docs/cs-cz/book/捷克语译本与 website/src/content/docs/book/英文原版对应章节中直接找到原文与完整上下文适合作为进一步学习的索引起点。赞分享文档教程【免费下载链接】typescript-bookThe Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.项目地址https://gitcode.com/gh_mirrors/typ/typescript-book点击查看免费下载相关推荐The Concise TypeScript Book 实战深入理解 TypeScript 对象类型Object Types的三种定义方式与底层原理The Concise TypeScript Book 实战深入理解 TypeScript 对象类型Object Types的三种定义方式与底层原理 对象文档教程The Concise TypeScript Book 精讲对象类型Object Types从定义到组合实战The Concise TypeScript Book 精讲对象类型Object Types从定义到组合实战 导读 对象类型是 TypeScript 类型文档教程The Concise TypeScript Book 精讲扩展类型Extending Types的三种方式、适用边界与实战要点The Concise TypeScript Book 精讲扩展类型Extending Types的三种方式、适用边界与实战要点 本篇技术指南围绕 The文档教程上一篇StoryDiffusion完整使用指南从零开始创作AI漫画故事下一篇The Mirror多人协作开发从版本冲突到实时同步的进化之路创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

更多精彩内容,欢迎继续阅读

较早相关资讯

最新相关资讯

AI时代工程师转型指南:从Java工作流重构到效率提升 2026/9/25 4:29:56

AI时代工程师转型指南:从Java工作流重构到效率提升

1. 这句话到底在说什么:从一句口号拆出三层真实含义“AI不会取代工程师,但懂AI的工程师会取代不懂AI的工程师。”这句话这两年几乎成了技术圈的“口头禅”,但大多数人只是把它当鸡汤转发,很少有人真正拆开看它到底在说什么。我做了…

阅读更多 →
SolidWorks中NACA4机翼生成:从坐标公式到实体建模避坑指南 2026/9/25 4:29:50

SolidWorks中NACA4机翼生成:从坐标公式到实体建模避坑指南

简介:面向航空工程、机械设计及CFD仿真学习者,提供NACA4系列机翼的几何数据生成与建模分析工具包。压缩包共2个文件,包含txt格式的翼型数据文件和m脚本文件,整体仅1KB。该资源以NACA4四参数翼型为核心,涵盖最大厚度位置…

阅读更多 →
大模型网关+MCP协议+CLI自动密钥分配实战指南 2026/9/25 4:29:50

大模型网关+MCP协议+CLI自动密钥分配实战指南

1. 项目概述:为什么需要一个“自动分配密钥”的大模型网关调用中枢?你有没有遇到过这样的场景:团队里五个人同时在调试同一个大模型服务,有人用 curl 直连,有人写 Python 脚本,有人塞 Postman 里反复点&…

阅读更多 →
Sketch素材包从解压到交付:美食App界面设计全流程指南 2026/9/25 4:29:50

Sketch素材包从解压到交付:美食App界面设计全流程指南

简介:一份面向UI/UX设计师和移动端产品设计者的美食类APP界面设计Sketch素材包。资源以FoodNow.sketch为核心,涵盖首页、菜单页、订单页等完整页面,便于在Sketch中直接编辑与二次调整,适用于个人练习或中小型项目快速出稿。压缩包…

阅读更多 →
芯片测试座精确定位:微米级重复精度实现方法 2026/9/25 4:29:44

芯片测试座精确定位:微米级重复精度实现方法

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →
diagrams.net 绘图实战:从架构图到工程级文件管理的完整指南 2026/9/25 4:29:44

diagrams.net 绘图实战:从架构图到工程级文件管理的完整指南

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

阅读更多 →

今日资讯

本周资讯

本月资讯

看完文章仍有疑问?

联系尧图顾问,获取一对一建站咨询

立即免费咨询 📞 400-888-8888
📞 ✉