当前位置:首页 > 科技  > 软件

前端开发何必执着于Typescript?Jsdoc一样很好用

来源: 责编: 时间:2023-08-09 23:02:18 397观看
导读为什么很多公司执着于typescript?因为typescript支持很多JS不支持的特性,正确的使用typescript,可以使你的代码更易于维护。最主要的是可以给JS添加类型,使编辑器的提示更智能。但是,typescript是很复杂的一门语言,很多开发

NyE28资讯网——每日最新资讯28at.com

为什么很多公司执着于typescript?因为typescript支持很多JS不支持的特性,正确的使用typescript,可以使你的代码更易于维护。NyE28资讯网——每日最新资讯28at.com

最主要的是可以给JS添加类型,使编辑器的提示更智能。NyE28资讯网——每日最新资讯28at.com

但是,typescript是很复杂的一门语言,很多开发者并不能很好的运用typescript,甚至很多人是被迫的,他们内心是反感使用typescript的,导致代码写的乱七八糟。NyE28资讯网——每日最新资讯28at.com

事实上,JS也有很多优势是typescript所不具备的,比如:JS的灵活性很高。NyE28资讯网——每日最新资讯28at.com

如果我告诉你,有一种工具,完全可以像写typescript一样写JS,你会用吗?NyE28资讯网——每日最新资讯28at.com

我说的这个工具就是jsdoc,我们可以叫它JS文档注释。它的目的也是为JS添加类型的,只是以注释的形式添加的,它有固定的语法。NyE28资讯网——每日最新资讯28at.com

我就以项目中的代码来举例吧,大家看如下文档注释。其中,@template 用于声明泛型类型,@typedef 用于定义一个类型。NyE28资讯网——每日最新资讯28at.com

在这里,我们定义了一个泛型T和一个名叫TreeNode的类型。TreeNode包含2个确定的字段:id和children,剩下的字段由泛型T确定。NyE28资讯网——每日最新资讯28at.com

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

下面,我们来测试一下这个类型。NyE28资讯网——每日最新资讯28at.com

如下图,我们声明一个变量node,使用@type指定为TreeNode类型,尖括号中间的对象类型替代了我们定义中的泛型T。NyE28资讯网——每日最新资讯28at.com

当我们键入点号后,编辑器给出了非常智能的提示。大家说,是不是很酷?NyE28资讯网——每日最新资讯28at.com

NyE28资讯网——每日最新资讯28at.com

这是真实项目中的代码,一个生成ID的函数。NyE28资讯网——每日最新资讯28at.com

使用@param可以为函数参数指定类型,在这里,我们为tree指定了TreeNode数组类型。使用@returns可以指定函数返回值的类型。NyE28资讯网——每日最新资讯28at.com

/** * @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是数组类型,正确地给出了数组的成员提示。这使我们在键入时,不易出错。NyE28资讯网——每日最新资讯28at.com

NyE28资讯网——每日最新资讯28at.com

当我们鼠标指针移入函数名时,编辑器给出了该函数的提示。告诉我们,该函数接收一个TreeNode数组参数tree,返回数值类型结果。NyE28资讯网——每日最新资讯28at.com

NyE28资讯网——每日最新资讯28at.com

现在,大家觉得jsdoc怎么样?是不是很好用?酷不酷?NyE28资讯网——每日最新资讯28at.com

如果大家开发用的语言是JS,我建议大家学学jsdoc。jsdoc的用法远比本文介绍的要多,它很强大,但语法却很简单易学。NyE28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-5116-0.html前端开发何必执着于Typescript?Jsdoc一样很好用

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: Rust采用率不断提高,2022年度Rust调查报告出炉!

下一篇: Go1.21 那些事:泛型库、for 语义变更、统一 log/slog、WASI 等新特性,你知道多少?

标签:
  • 热门焦点
  • 一文看懂为苹果Vision Pro开发应用程序

    译者 | 布加迪审校 | 重楼苹果的Vision Pro是一款混合现实(MR)头戴设备。Vision Pro结合了虚拟现实(VR)和增强现实(AR)的沉浸感。其高分辨率显示屏、先进的传感器和强大的处理能力
  • 服务存储设计模式:Cache-Aside模式

    Cache-Aside模式一种常用的缓存方式,通常是把数据从主存储加载到KV缓存中,加速后续的访问。在存在重复度的场景,Cache-Aside可以提升服务性能,降低底层存储的压力,缺点是缓存和底
  • 如何正确使用:Has和:Nth-Last-Child

    我们可以用CSS检查,以了解一组元素的数量是否小于或等于一个数字。例如,一个拥有三个或更多子项的grid。你可能会想,为什么需要这样做呢?在某些情况下,一个组件或一个布局可能会
  • 三分钟白话RocketMQ系列—— 如何发送消息

    我们知道RocketMQ主要分为消息 生产、存储(消息堆积)、消费 三大块领域。那接下来,我们白话一下,RocketMQ是如何发送消息的,揭秘消息生产全过程。注意,如果白话中不小心提到相关代
  • Python异步IO编程的进程/线程通信实现

    这篇文章再讲3种方式,同时讲4中进程间通信的方式一、 Python 中线程间通信的实现方式共享变量共享变量是多个线程可以共同访问的变量。在Python中,可以使用threading模块中的L
  • 零售大模型“干中学”,攀爬数字化珠峰

    文/侯煜编辑/cc来源/华尔街科技眼对于绝大多数登山爱好者而言,攀爬珠穆朗玛峰可谓终极目标。攀登珠峰的商业路线有两条,一是尼泊尔境内的南坡路线,一是中国境内的北坡路线。相
  • 猿辅导与新东方的两种“归途”

    作者|卓心月 出品|零态LT(ID:LingTai_LT)如何成为一家伟大企业?答案一定是对&ldquo;势&rdquo;的把握,这其中最关键的当属对企业战略的制定,且能够站在未来看现在,即使这其中的
  • 回归OPPO两年,一加赢了销量,输了品牌

    成为OPPO旗下主打性能的先锋品牌后,一加屡创佳绩。今年618期间,一加手机全渠道销量同比增长362%,凭借一加 11、一加 Ace 2、一加 Ace 2V三款爆品,一加
  • 电博会上海尔智家模拟500平大平层,还原生活空间沉浸式体验

    电博会为了更好地让参展观众真正感受到智能家居的绝妙之处,海尔智家的程传岭先生同样介绍了展会上海尔智家的模拟500平大平层,还原生活空间沉浸式体验。程传
Top