TypeScript如何简化变量悬停类型弹窗中展示的类型

1. 同类型展示形式差异的原因 #

TypeScript的类型提示渲染逻辑对两种场景做了不同处理：

• 悬停在result变量上时，属于值的推导类型展示，TypeScript会优先保留类型的原始构造形态，不会主动展开Debug映射类型、合并交叉类型，因此会显示嵌套的Debug<{foo: number} & {name: string} & {bar: { value: string }}>结构。
• 悬停在type X上时，属于显式类型别名的计算展示，TypeScript会主动完成类型归一化操作：展开映射类型、合并交叉类型，最终将所有属性拍平为直观的对象结构展示。

2. 变量类型提示展平的实现方法 #

你可以修改Debug工具类型的定义，强制触发TypeScript的类型归一化，在不改变类型本质的前提下优化展示效果：

浅度展平（适用当前场景） #

type Debug<T> = { [K in keyof T]: T[K] } & {}

通过和空对象交叉的写法，会触发TypeScript在类型展示阶段就完成交叉类型合并、属性展平，修改后悬停在result上的提示就会和type X的展示形式完全一致。

深度展平（适用嵌套对象场景） #

如果需要同时展开嵌套对象的类型提示，可以使用递归版本的工具类型：

type Debug<T> = T extends object
  ? { [K in keyof T]: Debug<T[K]> } & {}
  : T

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