Typescript 如何展示更为具体的信息，或者直接把类型计算的信息展示出来？
思否 问答 已采纳 👍 2 含 AI 优化版
问题
Typescript 如何展示更为具体的信息，或者直接把类型计算的信息展示出来？
由大模型辅助整理，保留原意，优化结构与可读性。
问题概述
TypeScript 在做类型运算（比如交叉类型、映射类型）后，鼠标悬浮查看类型时经常只显示原始的类型表达式，而不是计算展开后的具体结构，希望有办法让 IDE 直接展示计算后的完整类型信息。
涉及技术（如有）
- TypeScript 映射类型（Mapped Types）
- 类型展开技巧（Prettify trick）
期望结果
得到一个通用的工具类型，让复杂类型在 IDE 中以展开后的具体结构显示，方便阅读。
回答
原始回答
type Prettify
} & {};解决方案来自光哥和他的小册
AI 优化 · 回答整理
解答思路
使用一个「空对象交叉」的技巧：对类型做一次映射类型（{ [K in keyof T]: T[K] }），再和 {} 做交叉类型，可以让 TypeScript / IDE 把类型展开显示成具体的键值结构，而不是原始的类型别名或运算表达式。
示例代码（如有代码）
type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
// 使用方式
type A = { a: string } & { b: number };
type B = Prettify<A>;
// 悬浮查看 B 时会直接展示为 { a: string; b: number }
// 而不是 A & { b: number } 这种未展开的表达式
详细说明
- 映射类型
{ [K in keyof T]: T[K] }会逐个字段重新构造类型，这个过程本身会触发 TypeScript 对类型进行求值展开。 - 与空对象
{}做交叉类型，主要是为了不改变类型的实际结构（T & {}等价于T），单纯利用交叉类型的书写方式让编辑器在悬浮提示（hover）时以展开后的对象结构显示，而不是保留原始的类型运算表达式。 - 这个技巧常用于排查复杂的联合类型、交叉类型、泛型推导结果，方便直观地看到最终字段结构。（该实现来自光哥及其小册。）
小结
Prettify<T> 是一个常见的 TypeScript 小技巧，通过映射类型 + 与 {} 交叉，让 IDE 展示出类型运算后的具体结构，便于调试和阅读复杂类型。
由大模型辅助整理，保留原意，补充结构与代码格式。
回答转载自 SegmentFault