关于不使用ts和jsdoc ,js如何实现类型提示

首先个人认为 ts 很棒,但是写起来太繁琐了,一不小心就坠入了类型体操的地狱,jsdoc也半斤八两,例如 定义函数的参数 要写 @params这么长的字段,真麻烦,那么有没有更加简单一点的来处理,我认为是可以的,

注意必须在比较完备的编辑器中才支持(webstorm中和vscode中)

我们知道在webstorm中和vscode中 是具备简单的类型提示:如图:

可以看到 a在webstorm中因为初始化了 所以被判定为number string和数组类似 如下:

  • 规则1: 那么 如果是复杂类型呢,如何让数组里面为对象的时候也提示呢 我们可以通过初始化数组的时候先填充一个对象 再让其length变成0(通过slice(5,6) slice(-1,-2) 之类的可以让数组的长度变成0) 如下:
  • 规则2 对于复杂的对象类型 我们可以这样定义
  • 规则3 那么在vue3中 例如我们想让ref指定为dom对象 该怎么办呢 dom对象具有dom的一些特殊属性 例如style,classList... 我们可以让一个不存在的dom赋值给shallowref(实测 ref不会有类型提示) 如下:
  • 规则4 针对于函数形参或者promise.then的形参 可能稍微麻烦一点点 需要额外定义一个函数来确定形参的类型,其中if(1){}这个主要是为了保证函数在不传的情况下就是undefined,如下是promise的:

如下是函数的:

如下是函数返回值的 都能够正常提示:

如果还有 请欢迎补充哦~

相关推荐
tryCbest34 分钟前
Vue3——第 13 篇:计算属性与侦听器——computed 与 watch 的进化
前端·javascript·vue.js
用户117953654781 小时前
企业团队编程软件怎么选:AI编程工具的协作与落地能力对比
javascript
believed_breadfruit1 小时前
我开源了一个HTML 分页导出工具,解决了复杂页面的内容截断、跨页错乱和长文档白屏问题
前端·javascript·github
CCIE-Yasuo2 小时前
网络安全-Javascript基础
javascript·安全·web安全
幻境如梦丶皆为虚3 小时前
从零写一个 DSH 插件:在左侧菜单栏加一个「测试」
开发语言·javascript·ecmascript
吹什么轩3 小时前
constexpr 完全指南:从 const 的两种含义,到编译期计算的四次演进
java·前端·javascript
程序员大阳6 小时前
副队长JavaScript教程(67)-Ajax初识:背景、历史与核心概念
javascript·ajax·同步·异步·概念·背景·来是
程序员大阳6 小时前
副队长JavaScript教程(70)-Ajax同源策略与跨域
javascript·ajax·同源策略·跨越·corp
普通人66 小时前
Web端3D模型加载实战指南_Vue3_uni-app_HTML
前端·javascript·uni-app·html
志尊宝6 小时前
AI原生前端开发(042):AI辅助的路由设计与优化
javascript·react.js·ai-native