【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 分钟前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器7 分钟前
指定阿里镜像原理
前端
枷锁—sha12 分钟前
【DVWA系列】——CSRF——Medium详细教程
android·服务器·前端·web安全·网络安全·csrf
枷锁—sha14 分钟前
跨站请求伪造漏洞(CSRF)详解
运维·服务器·前端·web安全·网络安全·csrf
群联云防护小杜30 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
汉得数字平台1 小时前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹1 小时前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_6 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
拾光拾趣录8 小时前
括号生成算法
前端·算法