【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 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_4244091913 分钟前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding14 分钟前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜15 分钟前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD16 分钟前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding16 分钟前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子81629 分钟前
scroll-marker轮播组件不再难
前端·css
你的人类朋友1 小时前
🫏光速入门cURL
前端·后端·程序员
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js
烛阴3 小时前
Python装饰器解除:如何让被装饰的函数重获自由?
前端·python