TypeScript中&运算符行为差异原因及交集类型细节问询

一、&运算符在不同场景的行为差异原因 #

&运算符的行为差异本质是操作的类型类别不同：

• 在[K in keyof T & string]: T[K]中，keyof T返回的是目标类型T的键的联合类型（可能包含string、number、symbol三种类型）。这里的&是对联合类型执行交集运算，作用是筛选出同时属于keyof T和string的成员，相当于过滤掉number、symbol类型的键，所以看起来是“移除”非字符串键。
• 在type FooBar = Foo & Bar中，&作用于对象类型。TypeScript对对象类型的交集规则是合并属性：
  • 若两边属性不冲突，直接合并所有属性；
  • 若属性名冲突，则该属性的类型会变成两个类型的交集（比如{a: string} & {a: number}中，a的类型为string & number，即never）。

二、查看交集类型的详细结构 #

如果编译器只显示Foo & Bar而不展开，可通过以下方法查看详细结构：

1. 自定义工具类型展开 #

编写Expand工具类型实现浅展开：

type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;

// 示例使用
type Foo = { A: 'a' };
type Bar = { B: 'b' };
type FooBar = Foo & Bar;
type FooBarExpanded = Expand<FooBar>; // 鼠标悬停可看到 { A: 'a', B: 'b' }

如果需要处理深层嵌套的交集，可使用递归版本的ExpandDeep：

type ExpandDeep<T> = T extends object
  ? T extends infer O ? { [K in keyof O]: ExpandDeep<O[K]> } : never
  : T;

2. 利用编辑器类型提示 #

创建临时变量并指定交集类型，鼠标悬停即可查看展开后的结构：

const temp: Foo & Bar = {} as any;
// 悬停在temp上，编辑器会显示完整的结构

内容的提问来源于stack exchange，提问作者NeoZoom.lua