新闻详情

新闻详情

首页 / 资讯中心 / 详情

TypeScript 交集类型(Intersection Types)实战指南:用 `` 运算符组合多个类型——《The Concise TypeScript Book》深度解读

发布时间:2026/9/26 2:50:34来源:尧图网络
TypeScript 交集类型(Intersection Types)实战指南:用 `` 运算符组合多个类型——《The Concise TypeScript 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点击查看免费下载导读交集类型Intersection Types是 TypeScript 类型系统中用于合并多个类型结构的核心工具它表示一个同时拥有两个或更多类型全部属性的值。本文以《The Concise TypeScript Book》中 交集类型章节法文版为骨架结合仓库内英文原版与类型系统相关章节的源码级证据系统讲解运算符的语法、与联合类型Union Types的集合论区别、与interface extends的取舍以及属性冲突、字面量交集、函数类型交集等进阶用法。读完本文你将能够熟练运用交集类型组合对象结构、为复杂数据类型建模并准确判断何时该用、何时该用extends。一、什么是交集类型一个值拥有全部属性交集类型描述的是这样一种值它同时满足两个或更多类型的所有约束即拥有这些类型定义的全部属性。在 TypeScript 中交集类型通过在类型之间使用符号来表示。《The Concise TypeScript Book》在 intersection-types.md 中给出了最核心的定义与示例type X { a: string; }; type Y { b: string; }; type J X Y; // Intersection const j: J { a: a, b: b, };这里type J X Y声明了一个新的交集类型J任何J类型的值都必须同时包含X的a: string属性和Y的b: string属性。因此对象字面量{ a: a, b: b }完全合法而只提供a或只提供b的对象都会触发类型错误。从语义上理解联合类型|是或——值是多种类型中的某一种交集类型是且——值必须同时属于所有类型。这正是两种运算符的本质区别。二、从集合论视角理解交集 更窄的集合《The Concise TypeScript Book》在 探索类型系统 的 Types as Sets 一节中把类型抽象为可能取值的集合并给出了集合运算与 TypeScript 运算符的对照表其中两条与交集类型直接相关集合运算TypeScript示例T1 ∪ T2并集更宽T1 \| T2type XY X \| Y;T1 ∩ T2交集更窄T1 T2type XY X Y;书中明确总结了两者的方向性联合类型T1 | T2创建一个更宽的集合两种可能之一即可交集类型T1 T2创建一个更窄的集合必须同时满足双方约束。书中用于对比的示例可以帮我们更直观地体会更窄的含义type X { a: string; }; type Y { a: string; b: string; }; type XY X Y; const r: XY { a: a }; // Invalid缺少 Y 要求的 b 属性 const j: XY { a: a, b: b }; // Valid同时满足 X 与 Y 的全部约束同样的对象结构在联合类型X | Y下只需要满足其中任意一个而在交集类型X Y下则必须全部满足——约束越多集合越窄可赋值的值越少。这也是为什么在 TypeScript 基础比较规则 一节中extends被理解为子集关系T1 extends T2等价于T1 ⊆ T2而交集类型恰恰构造的是多个类型约束的共同子集。三、用组合与扩展类型type 世界的 extends在 扩展类型Extending Types 一节中作者给出了一个关键结论对于interface和class可以使用extends关键字扩展其他类型而对于type请使用交集类型。具体对比如下接口的 extends 扩展仅适用于 interface / classinterface X { a: string; } interface Y extends X { b: string; }多接口同时扩展interface A { a: string; } interface B { b: string; } interface Y extends A, B { y: string; }类型别名使用交集扩展type 世界的 extendstype A { a: number; }; type B { b: number; }; type C A B;此外书中还提到一个常见但容易混淆的细节可以用 interface 扩展 type但不能反过来type A { a: string; }; interface B extends A { b: string; } // 合法interface 可以通过 extends 继承 type 别名定义的结构 // 但不允许 type B extends Aextends 关键字只适用于 interface / class换句话说如果你需要扩展一个type别名交集几乎是唯一的选择而interface之间的扩展则优先使用extends。这一规则在实际项目中对类型架构的设计影响很大。四、type 与 interface什么时候用《The Concise TypeScript Book》在 interface 与 type 的区别 一节中专门比较了两者在扩展其他类型和表达联合/交集上的差异1. 扩展语法不同能力不同接口用extends继承其他接口的成员但接口不能扩展联合类型这样的复杂类型。类型别名用运算符把多个类型组合成单个类型交集。书中示例interface A { x: string; y: number; } interface B extends A { z: string; } const car: B { x: x, y: 123, z: z, };interface A { x: string; y: number; } type B A { j: string; }; const c: B { x: x, y: 123, j: j, };注意第二个例子A { j: string }中A可以是接口也可以是一个复杂的类型表达式——交集运算符可以把任意类型包括接口、类型别名、甚至内联对象结构组合在一起这正是相比extends更灵活的地方。2. 联合与交集的表达能力不同书中明确写道在定义联合类型和交集类型时type更加灵活。用type关键字可以轻松通过|创建联合类型、通过创建交集类型而接口虽然可以间接表示联合类型但没有内建的交集类型支持。type Department dep-x | dep-y; // Union type Person { name: string; age: number; }; type Employee { id: number; department: Department; }; type EmployeeInfo Person Employee; // Intersection接口只能通过type别名包装来表达联合interface A { x: x; } interface B { y: y; } type C A | B; // Union of interfaces3. 声明合并的差异同一章节还强调接口支持声明合并declaration merging——多个同名接口会被 TypeScript 自动合并为单一接口而类型别名不支持声明合并。这意味着当需要不修改原始定义、为已有类型追加成员时例如为第三方库的类型打补丁优先用interface的声明合并当需要组合、派生新类型时优先用type配合/|。结合 interface-and-type.md 中对基础类型语法的梳理可以看到交集类型通常出现在对象类型组合的场景对象类型描述一个对象的属性名、类型及可选性见 object-types.md而交集类型正是把多个对象类型叠加成更大结构的标准手段。五、进阶交集类型的行为细节理解了基本语法之后几个由 TypeScript 类型系统性质决定的进阶行为值得注意。5.1 同名属性的类型会再求交集当被交集的多个对象类型定义了同名属性时最终该属性的类型是各成员类型再次做交集的结果。例如type A { id: string; value: number }; type B { id: string; label: string }; type C A B; // 属性 id 的类型为 string string即 string如果同名属性的类型之间没有可重叠的值例如{ id: string } { id: number }则id的类型会退化为string number。由于没有任何值既属于string又属于number这样的交集实际上是不可满足的在严格的类型推导下会表现为never——这是交集类型集合取交语义的自然延伸可对照 exploring-the-type-system.md 中never作为空集的表述。5.2 字面量类型的交集提取共有字面量对字面量联合类型做交集等价于取两个集合的交集即两组成员中共同的部分type A red | green | blue; type B green | blue | yellow; type C A B; // green | blue仅保留两个联合共有的字面量这是交集 更窄集合最直观的体现对字面量联合求是在缩小取值范围。对基础类型求交如string number则因为两个集合无重叠而得到never。5.3 函数类型的交集形如重载对函数类型做交集会产生可同时按多种签名调用的类型行为上类似于函数重载type F1 (x: number) string; type F2 (x: boolean) string; type F F1 F2; // 一个既能接受 number 也能接受 boolean 的可调用类型从结构类型系统的角度看见 exploring-the-type-system.md 的 TypeScript Fundamental Comparison Rules函数类型的兼容性比较关注参数类型与返回类型两个函数类型求交后调用方可以按其中任意一个签名调用。不过在实际项目中这种用法远不如对象类型交集常见显式的函数重载overloads通常是更清晰的选择。5.4 与泛型、可选属性的配合交集类型可以和其他类型操作符自由组合例如与泛型、索引类型、映射类型一起构造可复用的类型工具。这在《The Concise TypeScript Book》关于类型操作type-manipulation 系列章节的论述中是一致的思路是类型层面的组合算子可以出现在任何类型表达式内部。需要注意的是当交集中的成员含有可选属性时结果类型仍要求非可选属性必须存在可选属性保持可选——即并集化的约束不会凭空产生交集的属性集合是各成员属性集合的并而每个属性的必要性与各成员保持一致。六、实战场景交集类型在项目建模中的典型用法综合《The Concise TypeScript Book》的论述交集类型的典型实战场景可归纳如下1. 组合多个关注点Mixin / 横切结构把基础实体与附加能力拆分成独立类型再用组合type BaseEntity { id: string; createdAt: Date; }; type Auditable { createdBy: string; updatedAt: Date; }; type UserEntity BaseEntity Auditable; // 同时具备基础字段与审计字段2. 组合接口与类型别名接口负责可扩展、可声明合并的基础结构类型别名负责组合派生二者通过协同工作interface Person { name: string; age: number; greet(): void; } type Employee Person { id: number; department: string; };3. 需要同时满足多个协议时当某个值需要同时满足多个接口约束例如同时作为可渲染节点与可交互节点时交集类型比分别声明更精确、可复用type Renderable { render(): string }; type Clickable { onClick(): void }; type Button Renderable Clickable;4. 与联合类型联合使用先用组合公共结构再用|表达变体是常见的数据建模组合拳type Identifiable { id: string }; type Cat Identifiable { kind: cat; meow(): void }; type Dog Identifiable { kind: dog; bark(): void }; type Pet Cat | Dog; // 可辨识联合配合类型收窄使用七、小结交集类型使用决策清单基于《The Concise TypeScript Book》交集类型章节 及其关联章节可以把决策要点浓缩如下语义T1 T2表示同时满足T1与T2全部约束的值是类型层面的且构造的是集合论中的交集结果集合更窄。语法在类型表达式之间用连接可连接类型别名、接口、内联对象类型乃至任意复杂类型表达式。扩展 typeextends只适用于interface和classtype的扩展一律使用交集。接口的局限接口没有内建的交集能力也无法扩展联合类型等复杂类型表达联合/交集请使用type别名。与联合对比|是或更宽是且更窄对字面量联合求交得到共有字面量对无重叠的基础类型求交得到never。注意同名属性同名属性会再次取交可能退化为never建模时需避免不可满足的属性冲突。本文所引用的全部原始论述均可在此仓库中直接核对法文版交集类型章节、英文原版、联合类型、扩展类型、interface 与 type 的区别、interface 与 type 基础语法 以及 类型系统探索Types as Sets。结合这些章节阅读能够建立起对 TypeScript 组合类型体系的完整认知。赞分享文档教程【免费下载链接】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深入解析交叉类型Intersection Types与 运算符The Concise TypeScript Book深入解析交叉类型Intersection Types与 运算符 导读 交叉类型Intersec文档教程深入理解 TypeScript 交差型Intersection Types用 组合类型的实战指南 —— The Concise TypeScript Book 精读深入理解 TypeScript 交差型Intersection Types用 组合类型的实战指南 —— The Concise TypeScript文档教程The Concise TypeScript Book 精讲Intersection Types交叉类型——用 将多个类型组合为一个类型The Concise TypeScript Book 精讲Intersection Types交叉类型——用 将多个类型组合为一个类型 交叉类型I文档教程创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
网站建设高端定制企业官网
RELATED

相关资讯

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

较早相关资讯

最新相关资讯

PoE供电温湿度变送器:一根网线实现供能与工业通信 2026/9/26 3:25:03

PoE供电温湿度变送器:一根网线实现供能与工业通信

1. 为什么一根网线能同时扛住供电和温湿度数据传输?“弱电项目神器”这个说法不是营销话术,而是真实发生在机房、仓库、冷链车、智慧农业大棚里的日常。我第一次在现场看到这台设备时,也下意识摸了摸网线——确认没接错电源口。它就插在普通千…

阅读更多 →
通达信涨停回踩选股公式实战:BARSLAST与缩量回调参数调优 2026/9/26 3:25:03

通达信涨停回踩选股公式实战:BARSLAST与缩量回调参数调优

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

阅读更多 →
零碳工厂建设指南:从碳盘查到认证的全流程实操 2026/9/26 3:25:02

零碳工厂建设指南:从碳盘查到认证的全流程实操

最近有几个做制造业的朋友陆续来问我同一个问题:“零碳工厂要怎么建,指导意见里到底说了什么?”问的人多了,我发现大家其实卡在同一个地方——概念太多、文件太散、落地路径不清晰,很多人看完还是一头雾水。这篇我就用…

阅读更多 →
PyCharm打包whl全流程:从项目结构到pip安装实战 2026/9/26 3:25:02

PyCharm打包whl全流程:从项目结构到pip安装实战

你是不是也遇到过这种场景:在PyCharm里写了一个小工具库,自己用着很顺手,同事问你要源码自己跑。你把整个项目文件夹发过去,对方光配环境就要折腾半天;或者发一个压缩包,里面虽然什么都有,但收件…

阅读更多 →
万字详解 OpenSpec + OpenCode 实践 AI Specs:用 TaoToken 统一 Key 打通配置骨架 2026/9/26 3:24:56

万字详解 OpenSpec + OpenCode 实践 AI Specs:用 TaoToken 统一 Key 打通配置骨架

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

阅读更多 →
Blender-MCP 服务源码 4:初始化项目解读与 TaoToken 配置骨架 2026/9/26 3:24:56

Blender-MCP 服务源码 4:初始化项目解读与 TaoToken 配置骨架

/* 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
📞 ✉