【ts】ts类型推断结果无法完整显示该怎么办

这篇文章源于我之前的一个实践。咱们在做类型体操的时候或者在项目中引入interface 之类type的时候你可能遇到过下面图片中的情况

可以看到我们在鼠标移动上去后，具体的类型无法进行完整显示。我们希望我们在hover上去的时候能够对这个类型进行展开以便于我们查看他的属性。我们在本篇文章中会写一个方法 DeepShowType。在你类型的外层套一层类型方法就可以完成这一个功能。如下图

8.1.2 解决

我们首先要知道这种情况产生的根本原因，ts本身是懒推断的。因此大多数情况并不会进行直接的运算并展开。

既然我们知道了 ts 的懒判断的，那么我们可以对原来的类型做一个并不会改变其结果的运算。比如 xx = xx + 0 这种。我们在类型编程中在后面加上一个 & {} 就可以进行进行这种不改其结果的运算。那么这样子理论上就可以强制其进行推断了

css 复制代码

type ShowType<t> = {
    [k in keyof t] : t[k]
} & {}

这是比较简单的写法，但是这样这样不能够监听到深层次的数据。

我们可以加上递归运算，也就是下面的

less 复制代码

export type DeepShowType<t>={
    [k in keyof t] :t[k] extends object ? DeepShowType<t[k]> : t[k]
} & {}

简单的加上递归。在递归的时候用条件类型进行判断就好的，这里的主要难点主要在 extends ，在这个情况下面它表现为条件分配类型。但是由于这里只有他一个

所以其实等价于

bash 复制代码

export type DeepShowType<t>={
    [k in keyof t] : DeepShowType<t[k]> 
} & {}

最后我们可以运行

css 复制代码

DeepShowType<t[k]>

就能够得到我们想要的结果

我们在下文写一下完整的实例，可以看出不加上 DeepShowType 那么我们的结果是不会完整的显示的

css 复制代码

const test = {
    a:'1',
    d:{
        id:{
            igd:"2"
        }
    },
    b:'22'
} as const

type DeepShowType<t>={
    [k in keyof t] :t[k] extends object ? DeepShowType<t[k]> : t[k]
} & {}

type DeepKeySwitchType<t> = {
    [k in keyof t] : t[k] extends object ? DeepKeySwitchType<t[k]> : k
}[keyof t]

let keyTest :DeepShowType<DeepKeySwitchType<typeof test> & {}>

8.1.3 最后

总结一下，这段 DeepShowType 用到的知识主要有 幂等性 + 递归 + 并运算，这里给大家提供另外一个思路，可以参考下文的链接来进行实现

stackoverflow.com/questions/5...

这里面似乎使用 infer O 和映射类型 来代替我 & {} 。但其实结果和思路都是一样的，都是用 xx + 0 = xx 这种幂等性强制 ts 强制进行运算。通过这种方式使得 ts 显示其内容