如何让TypeScript编译器或VS Code展示展开、简化后的类型？

当遇到TypeScript类型别名或泛型无法直观展示实际结构的问题时，可以用以下几种通用方法查看简化后的类型：

• 使用辅助类型强制展开
  定义展开类型的工具，让TypeScript解析并展示完整结构：

  // 单层展开
  type Expand<T> = T extends infer U ? { [K in keyof U]: U[K] } : never;
  
  // 递归展开嵌套类型
  type ExpandRecursively<T> = T extends object
    ? T extends infer U ? { [K in keyof U]: ExpandRecursively<U[K]> } : never
    : T;
  

  用工具类型包裹目标类型后，鼠标悬停即可看到展开结果：

  const r: Expand<FlatKey<typeof x>>;
  

• 使用VS Code的类型跳转功能
  右键点击目标类型（如FlatKey<typeof x>），选择「Go to Type Definition」，TypeScript会在临时窗口中展示该类型的完整展开结构。

• 声明临时变量触发自动推断
  创建一个临时变量，手动指定目标类型并赋值any，鼠标悬停时VS Code会显示完整的推断类型：

  const temp: FlatKey<typeof x> = {} as any;
  

• 调整VS Code的TypeScript配置
  在VS Code设置中修改以下选项：

  • 将typescript.preferences.showAliases设为false，优先展示展开后的类型而非别名
  • 启用typescript.inlayHints.enumMemberValues.enabled，方便查看枚举类型的具体值

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