联合类型是 TypeScript 中一种功能比较强的工具。它让你可以把多个类型组合成一个新的类型，使用符号 | 来表示。例如的观点是，

type U = string | number;let x: U = 'abc';

但正是因为它的灵活性。很多开发者在实际项目中经常会遇到一些痛点：

• 访问不到想要的属性，提示“属性不存在”。
• 不知道什么时候需要进行类型收窄，导致编译报错。
• 函数重载时参数与返回值的推断不如预期。
• 交叉类型和联合类型混用时容易出现意外的 never。

1. 声明联合类型

直接把需要的几个基本类型或自定义接口用 | 连接即可：

type U = string | number;let x: U = 'abc';怎么说呢，

2. 类型运算产生的联合类型

2.1 keyof 和 运算符

先声明一个只读枚举常量：

const StatusEnum = {
/** 默认 */
DEFAULT: 'DEFAULT'。/** 加载中 */
LOADING: 'LOADING',/** 成功 */
SUCCESS: 'SUCCESS',/** 失败 */
说到FAILED，'FAILED'
} as const;怎么说呢，

利用 keyof typeof StatusEnum 可以得到所有键名组成的联合类型：

type StatusEnumType = typeof StatusEnum;// "DEFAULT" | "LOADING" | "SUCCESS" | "FAILED"
type StatusKeys = keyof StatusEnumType;// "DEFAULT" | "LOADING" | "SUCCESS" | "FAILED"
type Status = StatusEnumType;按理说，// 对应键值的联合
interface Data {
再看id。number，name: string;status: Status;}
const data: Data = { id: 1。name: '联合类型',status: 'SUCCESS' };

2.2 extends 条件运算符

当裸型参数是联合时TS 会自动对每个成员做判断，接下来再合并结果：

type ToArray;不过，type ArrUnion = ToArray;怎么说呢，// string | number

2.3 in 运算符

Shrug:

// 自定义 Omit
type U = keyof any;// string|number|symbol
type Omit = {
: T;}，按理说，// 示例：
interface Example { a: number;b，怎么说呢，: string }
type WithoutB = Omit;// { a:number }

2.4 模板字符串展开联合

type T = 'A'|'B';按理说，type U = ''|'1'|'2';type V = `${T}${U}`;// => "A""A1""A2""B""B1""B2"

3 对象的联合类型实例：Shape 三种形状演示

3.1 声明 Shape 联合体

interface Circle {
再看kind，'circle';radius: number;}
interface Square {
kind这方面，'square';sideLength: number;}
interface Rectangle {
kind的观点是，'rectangle';width: number;height: number;}
type Shape = Circle | Square | Rectangle;

3.2 公共属性访问限制

当你只知道变量是 Shape 时TS 不允许直接访问 radius、sideLength 等非公共字段，否则报错。

Caution: 未收窄前。只能访问所有成员共有字段，如 kind。老实说，

function getKind {
return shape.kind;// ✅ OK
}

function getArea { shape.radius // ❌ 错误：Shape 上不存在 radius shape.sideLength // ❌ 错误 shape.width // ❌ 错误 } #endregion

四、如何对 Shape 做收窄

① 使用标签字段 + switch

ts function area:number{ switch{ case 'circle': return Math.PI * shape.radius **2;// shape 自动被收窄为 Circle case 'square': return shape.sideLength **2; // shape 自动被收窄为 Square case 'rectangle': return shape.width * shape.height;// shape 自动被收窄为 Rectangle default: const _exhaustive : never=shape;// 若新增形状未处理，此处报错 return _exhaustive;} }

② 使用 in 运算符

ts function area:number{ if{ return Math.PI*shape.radius**2;// 圆形判定成功 }else if{ return shape.sideLength**2;// 正方形判定成功 }else{ // 剩余必然是矩形 return shape.width*shape.height;} }

③ 自定义 类型守卫

ts function isCircle:shape is Circle{ return shape.kind ==='circle';} function area:number{ if){ return Math.PI*shape.radius**2;按理说，} /* 此处剩下的是 Square|Rectangle。可继续使用其它守卫或 `in` 判断 */ }

五、如何获取 “全部” 属性键

分布式条件实现

ts // 把每个成员取出后合并所有键名 type AllKeys=T extends any?keyof T:no ever;

type AllShapeKeys=AllKeys;//"kind"|"radius"|"sideLength"|"width"|"height" 进一步获取某个键对应所有可能值： ts // 从任何成员中取指定键 K 的值，如果没有该键则返回 never；最终返回所有可能值的并集。export type PickUnion= T extends {:infer V}?V:no ever，

export type Radius=PickUnion;//=>number

export type Kind=PickUnion;//=>"circle"|... `` 如果想得到非公共属性对应值，可以直接使用上面的PickUnion`。

六、同名属性与函数重载

当同一字段在不同成员中为 函数 时TS 的推断规则略有不同：

ts interface Circle{draw:=>void;} interface Square{draw:=>void;} interface Rectangle{draw:Error;}

type Draw=Shape;//"=>void)|=>void)|=>Error)" 调用时必须先做收窄，否则无法满足所有签名：

ts if{ shape.draw;话说回来，//"canvas" 与其他签名不兼容，需要先判断！}else if{ shape.draw;不过，}else{ const e=shape.draw;//" => Error" }

再看规则，- 参数取交集 → 必须同时满足。- 返回值取并集 → 可任选一种。

在调用前一定要根据具体情景先做收窄。

七、交叉 vs 联合

概念	满足条件
联合	任一成员即可
接口交叉	必须同时满足所有成员

说到举例，

ts interface A{kind:'a';x:number，} interface B{kind:'b';y:string，} export type Union=A|B;//"a"|，只能访问 kind 或可选字段。export type Cross=A&B;//&... => never；因为 kind 冲突，话说回来， 由于交叉导致冲突。TS 把整个交叉简化为 这也是为什么你看到 keyof Cross 为 string|number|symbol 的原因。怎么说呢，

八、要点

概念/技巧

说明/关键点

声明方式 手动 |U> 或通过运算符产生

默认访问限制 未收窄时只能访问公共属性；怎么说呢，属性值为各成员对应值的并集

收窄方法

标签 + switch / default 穷举检查 通过 kind 字段区分，并用 default: 检查遗漏情况

in 运算符检查独有字段是否存在 可动态判断对象是否拥有某个特定字段，并据此推断其具体子类 自定义 类型守卫           

编写返回谓词式函数。用于细粒度判断和过滤                           

d>

获取全部键/属性值        

利用分布式条件组合所有子类键和值       

同名函数属性

参数取交集，返回值取并集

调用前必须先做收窄，否则无法满足所有签名         

互补概念：或 vs 且；公共 vs 全部属性

P.S.: 如果你在项目里遇到“某字段报错不存在”。记得先判断它属于哪种子类，再进行后续操作；若发现 TS 把一个看似合理的对象变成了 那很可能是你在用了交叉却产生了冲突。话说回来，掌握这些技巧后你就能把 TypeScript 的联合与交叉玩得炉火纯青。

---