前端开发何必执着于Typescript?Jsdoc一样很好用
创始人
2025-06-28 19:41:00
0

为什么很多公司执着于typescript?因为typescript支持很多JS不支持的特性,正确的使用typescript,可以使你的代码更易于维护。

最主要的是可以给JS添加类型,使编辑器的提示更智能。

但是,typescript是很复杂的一门语言,很多开发者并不能很好的运用typescript,甚至很多人是被迫的,他们内心是反感使用typescript的,导致代码写的乱七八糟。

事实上,JS也有很多优势是typescript所不具备的,比如:JS的灵活性很高。

如果我告诉你,有一种工具,完全可以像写typescript一样写JS,你会用吗?

我说的这个工具就是jsdoc,我们可以叫它JS文档注释。它的目的也是为JS添加类型的,只是以注释的形式添加的,它有固定的语法。

我就以项目中的代码来举例吧,大家看如下文档注释。其中,@template 用于声明泛型类型,@typedef 用于定义一个类型。

在这里,我们定义了一个泛型T和一个名叫TreeNode的类型。TreeNode包含2个确定的字段:id和children,剩下的字段由泛型T确定。

/**
 * @template T
 * @typedef {T & {id: number, children: TreeNode[]}} TreeNode
 */

下面,我们来测试一下这个类型。

如下图,我们声明一个变量node,使用@type指定为TreeNode类型,尖括号中间的对象类型替代了我们定义中的泛型T。

当我们键入点号后,编辑器给出了非常智能的提示。大家说,是不是很酷?

这是真实项目中的代码,一个生成ID的函数。

使用@param可以为函数参数指定类型,在这里,我们为tree指定了TreeNode数组类型。使用@returns可以指定函数返回值的类型。

/**
 * @param {TreeNode<{}>[]} tree
 * @returns {number}
 */
export const genId = tree => {
  return (function eachFn (data) {
    return data.reduce((t, item) => {
      return Math.max(
        t,
        item.id || 0,
        item.children ? eachFn(item.children) : 0
      )
    }, 0)
  })(tree) + 1
}

如下图,由于我们给tree指定了类型,当键入点号后,编辑器知道data是数组类型,正确地给出了数组的成员提示。这使我们在键入时,不易出错。

通过数组方法,编辑器也推导出了item的类型,当我们键入点号后,给出了合理的提示。

当我们鼠标指针移入函数名时,编辑器给出了该函数的提示。告诉我们,该函数接收一个TreeNode数组参数tree,返回数值类型结果。

现在,大家觉得jsdoc怎么样?是不是很好用?酷不酷?

如果大家开发用的语言是JS,我建议大家学学jsdoc。jsdoc的用法远比本文介绍的要多,它很强大,但语法却很简单易学。

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...