【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 显示其 内容

相关推荐
道可到1 分钟前
35 岁程序员的绝地求生计划:你准备好了吗?
前端·后端·面试
道可到11 分钟前
国内最难入职的 IT 公司排行:你敢挑战哪一家?
前端·后端·面试
jnpfsoft12 分钟前
低代码应用菜单避坑指南:新建 / 删除 / 导入全流程,路由重复再也不怕!
前端·低代码
Keepreal49612 分钟前
word文件预览实现
前端·javascript·react.js
郝开13 分钟前
5. React中的组件:组件是什么;React定义组件
前端·javascript·react.js
我是天龙_绍13 分钟前
uniapp 中的 #ifndef 条件编译
前端
white-persist15 分钟前
SQL 注入详解:从原理到实战
前端·网络·数据库·sql·安全·web安全·原型模式
FuckPatience17 分钟前
电脑所有可用的网络接口
前端·javascript·vue.js
索马里亚纳海参炒贩18 分钟前
Rust、C++语言桌面开发框架有哪些?
前端
道可到22 分钟前
程序员养生十大违章:你中了几条?
前端·后端·面试