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

相关推荐
一斤代码5 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子5 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年5 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子5 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路6 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说7 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409197 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding7 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜7 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui