TypeScript中字符串字面量联合string&{}可补全且支持任意字符串的原理是什么？

问题背景 #

开发中经常需要实现如下类型效果：既允许传入任意字符串值，又能让自定义的特殊字面量获得IDE代码补全提示，目前通用的实现技巧如下：

type Color = 'primary' | 'secondary' | (string & {});
const color1: Color = 'other'; // 允许赋值任意字符串
const color2: Color = 'primary' // 可触发IDE代码补全

注：由于TypeScript中&运算符优先级高于|，不加括号直接写string & {}也可正常生效。

核心疑问 #

很多开发者对该写法的生效原理存在两点困惑：

1. string & {}交叉类型的实际类型是什么？看起来它等价于string，但赋值空对象时会报错：

// StringCombo的实际类型是什么？
type StringCombo = string & {};

// 报错："Type '{}' is not assignable to type 'string'"
const combo: StringCombo = {};

2. 为什么将string & {}加入联合类型后可以保留字面量补全，直接加入原生string就不行？

前置调研结果 #

直接将字面量联合原生string，类型会被直接拓宽为普通string，无法获得代码补全；使用带索引签名的字符串交叉类型也无法实现目标效果：

// 类型被简化为string，不会对primary、secondary提供IDE补全
type ColorJustString = 'primary' | 'secondary' | string;
// 无法实现目标效果，普通字符串赋值会报错
type ColorAlternative = 'primary' | 'secondary' | string & { [key: string]: any };
const color3: ColorJustString = 'other';
const color4: ColorAlternative = 'other'; // 报错：Type '"other"' is not assignable to type 'ColorAlternative'

已知TypeScript中{}是空对象类型，无已知属性，仅null和undefined不能赋值给{}，但该定义无法直接解释上述现象。

原理解答 #

1. string & {}的本质 #

交叉类型要求值同时满足所有类型的约束：

• 首先必须满足string类型的约束，所以只有字符串值可以赋值给该类型，空对象不是字符串自然会报错
• 其次满足{}类型的约束：所有字符串值都属于非null/undefined的有效值，天然可以赋值给{}
  因此string & {}等价于排除了null/undefined的string类型，和开启strictNullChecks后的原生string完全兼容。

2. 保留补全提示的核心逻辑 #

• 直接使用| string时，TypeScript的类型简化规则会将「字符串字面量 | 原生string」的联合类型直接合并为顶层的string类型，所有字面量信息会被抹除，IDE自然无法提供补全。
• 使用| string & {}时，string & {}不属于顶层原生string类型，属于经过交叉运算后的衍生字符串类型，不会触发联合类型的自动合并规则，TypeScript会完整保留联合中的primary、secondary字面量信息，IDE就可以正常识别这些候选值提供补全提示。

3. 带索引签名的交叉类型失效原因 #

原生string类型没有自定义的索引签名，添加{ [key: string]: any }约束后，普通字符串无法满足该索引签名要求，因此赋值任意字符串都会报错，无法实现目标效果。

内容的提问来源于stack exchange，提问作者Andru