如何简化查看复杂TypeScript类型并生成基础类型展示？

VS Code 原生功能 #

• 悬停预览：直接把鼠标悬停在目标类型（比如SomeType）上，VS Code会自动展开合并后的类型结构，多层嵌套的话可以点击展开箭头查看完整属性。
• 格式化定义：按F12转到类型的原始定义后，用Shift+Alt+F格式化代码，手动梳理交叉类型（&）和联合类型（|）的合并逻辑，快速理清结构。

VS Code 扩展 #

• TypeScript Hero：提供一键展开复杂类型的功能，能把嵌套的Pick/Omit/交叉类型直接转换成扁平化的接口定义，操作简单。
• TS Toolbox：支持类型展开、生成类型示例等功能，针对类库中的复杂类型，能快速输出直观的简化结构。
• TypeLens：除了显示类型引用次数，还可以展开复杂类型的最终合并结果，不用跳转到定义就能查看完整结构。

CLI 工具 #

• ts-ast-viewer：通过npm安装后，本地就能解析TypeScript代码的AST，将复杂的类型别名、交叉/联合类型转换成清晰的简化接口，输出结果直接展示所有属性和对应类型。
• typescript-json-schema：可以把TypeScript类型转换为JSON Schema，JSON Schema的键值结构更直观，能清晰看到每个属性的类型约束，适合快速理解复杂类型的整体结构。

TypeScript 内置技巧 #

• 断言触发类型显示：写一段临时测试代码，比如：

  const temp: SomeType = {} as SomeType;
  

  悬停temp就能看到VS Code自动展开的完整简化类型。
• 自定义展开工具类型：自己写一个递归展开类型的工具，比如：

  type ExpandRecursively<T> = T extends object
    ? T extends infer O ? { [K in keyof O]: ExpandRecursively<O[K]> } : never
    : T;
  
  // 使用方式
  type SimplifiedSomeType = ExpandRecursively<SomeType>;
  

  悬停SimplifiedSomeType就能看到完全展开后的扁平化类型结构。

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