如何让TypeScript悬浮提示时显示变量的最终展开类型？

问题场景 #

项目开发中经常遇到：TypeScript悬浮查看类型时，默认只会保留原始的索引访问、别名引用表达式，不会自动展开为最终的实际类型，需要开发者手动逐层推导嵌套结构，深层类型排查效率极低。
拿实际代码举例，定义如下结构时，悬浮查看Foo的类型，test属性只会被标注为FooParent['fish'][0]，不会直接展示其对应的对象内容：

interface FooParent {
    fish: {
        catfish: string;
    }[];
}

type Foo = {
    test: FooParent['fish'][0];
};

想要确认FooParent['fish'][0]的真实类型，必须顺着类型链路手动推导，嵌套层级多的时候很容易看错、算错。
之前社区流传过基于infer的trick方案，试图通过在属性层面加映射强制TS展开类型，示例代码如下：

interface FooParent {
    fish: {
        catfish: string;
    }[];
}

type Foo = {
    test: FooParent['fish'][0] extends infer U ? { [P in keyof U]: U[P] } : never;
};

但这个方案稳定性很差，遇到联合类型、函数类型、内置特殊类型时经常出现类型变形、计算结果偏离预期的问题，没法在项目里可靠复用。

可靠的实现方案 #

直接使用基于TS原生类型求值逻辑的通用展开工具类型，不需要零散的infer分支，对绝大多数常见类型都能做到稳定展开，不会出现类型变形：

1. 先定义通用的展开工具类型，覆盖全场景类型兼容：

   // 浅展开：触发TS完成当前层类型求值，返回结构清晰的对象类型
   type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
   // 深展开：递归展开所有嵌套层级的对象结构，适合排查多层嵌套的复杂类型
   type ExpandDeep<T> = T extends object ? (T extends infer O ? { [K in keyof O]: ExpandDeep<O[K]> } : never) : T;
   

2. 在需要查看完整展开效果的类型外层，套上对应展开工具即可：

   type Foo = Expand<{
       test: FooParent['fish'][0];
   }>
   

这个方案的核心原理是利用TS类型系统的展示规则：当返回类型是经过映射生成的对象字面量时，TS不会保留原始的类型别名引用，会直接计算出所有属性的最终类型，在悬浮提示时完整展示全部嵌套结构。

方案优势 #

• 稳定性高：实现逻辑和TS官方内置的ReturnType、Awaited等工具类型一致，和之前属性级的infer trick不同，这个实现是在整个类型的最外层触发求值，完全不会侵入每个属性的类型推导逻辑，从根源上避免了类型变形的问题，对函数、联合类型、数组、内置工具类型的兼容性都经过长期项目验证
• 零业务侵入：只在需要调试类型展示的位置外层套一层工具类型即可，不会改变原有类型的计算结果，调试完成后可以随时移除，完全不影响业务逻辑
• 灵活适配：可以按需选择浅展开（只展开当前层，保留嵌套别名的引用，查看当前层结构足够）或者深展开（递归展开所有层级，适合排查极复杂的嵌套类型）

注意：使用时需要确保TypeScript版本在4.0以上，低版本TS对类型展示的优化支持不足，无法触发完整的展开效果；开发工具推荐使用VS Code，其内置的TS语言服务对展开后的类型展示支持完善。

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