有JSDoc还需要TypeScript吗

jsdoc,需要,typescript · 浏览次数 : 94

小编点评

**摘要:** 本文介绍了使用 TypeScript 在 JavaScript 中的几个优点,包括: * 使用 JSDoc 注释可以获得与 .ts 文件相同的静态类型分析。 * 使用 TypeScript 可以简化类型声明,使其更容易读和维护。 * 使用 TypeScript 可以避免使用类型守卫,减少代码复杂性。 * 使用 TypeScript 可以轻松地创建和发布库。 **关键词:** * TypeScript * JSDoc * JavaScript * 类型声明 * 类型守卫 * 库 * JSDoc * ECMAScript

正文

这听起来是不是很耳熟:你想写一个小型脚本,不管是为页面、命令行工具,还是其他什么类型。你从JavaScript开始,直到你想起写代码时没有类型是多么痛苦。所以你把文件从.js重命名为.ts。然后意识到你已经打开了一个麻烦的玩意儿。

如果你在为一个网站或一个库写代码,你就需要引入编译的步骤。如果你在编写CLI脚本,你可以求助于Deno(它支持TypeScript,开箱即用),但是你需要设置你的IDE来理解Deno的API,而且混合和匹配Deno和node并不总是那么容易。

一旦你在本地完成了所有工作,你就需要考虑如何分发你的代码。你会检查你编译的.js文件吗?你会创建一个CI管道来自动编译你的.ts文件吗?如果你在写一个库,你如何发布你的库,以便它可以被其他项目使用?

你实际上不需要TypeScript

问题是......你不需要为了获得静态类型分析而编写TypeScript!

你可以通过使用JSDoc在JavaScript中获得TypeScript的所有好处

TypeScript所提供的是一个静态类型系统。这意味着类型信息在运行代码中没有影响。当你的TypeScript被执行时,所有的类型信息都会完全丢失(这就是为什么你不写一个类型守卫,就不能测试一个变量是否是某个类型的原因)。

这也意味着TypeScript只是提供给TypeScript分析器的额外类型信息,对运行你代码的JavaScript引擎没有任何意义。当你把TypeScript编译成JavaScript时,它基本上只是从你的代码中删除了所有的类型信息,所以它又变成了有效的JavaScript代码。

JSDoc

在JavaScript诞生25年多后,JSDoc作为一种注释JavaScript代码的方式被引入。它是一种正式的标记语言,允许IDE在开发者看到一个函数时提供额外的上下文。

类似的注释标记存在于大多数语言中,我相信你已经知道它了。这就是它的样子:

/**
 * This is the JSDOC block. IDEs will show this text when you hover the
 * printName function.
 *
 * @param {string} name
 */
function printName(name) {
  console.log(name)
}

TypeScript 和 JSDoc

较少人知道的是,JSDoc是你充分使用TypeScript所需要的。TypeScript分析器能够理解用JSDoc写的类型,并给你提供与.ts文件相同的静态分析。

我不会在这里提供完整的语法文档。最重要的是你要知道,几乎所有你能在.ts文件中做的事情,你都能用JSDoc来做。但这里有几个例子:

带有原生类型的函数参数:

/**
 * @param {string} a
 * @param {number} b
 */
function foo(a, b) {}

使用TypeScript提供的开箱即用的类型:

/**
 * @param {HTMLElement} element
 * @param {Window} window
 */
function foo(element, window) {}

/** @type {number[]} */
let years

定义对象字面量和函数:

/** @type {{ name: string; age: number }} */
let person

/** @type {(s: string, b: boolean) => void} */
let myCallback

*.d.ts文件中导入类型:

/** @param {import('./types').User} user */
const deleteUser = (user) => {}

定义一个类型供以后使用:

/**
 * @typedef {object} Color
 * @property {number} chroma
 * @property {number} hue
 */

/** @type {Color[]} */
const colors = [
  { chroma: 0.2, hue: 262 },
  { chroma: 0.2, hue: 28.3 },
]

参见官方TypeScript JSDoc文档以获得详尽的列表。

如果你有复杂的类型,你仍然可以编写你的*.d.ts文件并在你的JSDoc注释中导入它们。

注意,你仍然需要为typescript设置你的项目(和IDE),你需要创建一个tsconfig.json文件,将编译器选项allowJscheckJs设置为true

// tsconfig.json
{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true
    // ...
  }
}

什么时候写TypeScript

虽然完全使用JSDoc进行类型声明是可能的,但这并不是最方便的。TypeScript的语法要好得多,而且不那么重复。

TypeScript团队创建了一个"作为注释的类型"ECMAScript提案,允许你编写TypeScript并在不修改的情况下在JavaScript引擎中运行(JavaScript引擎将把这些类型注释视为注释。)

但是在这个提案被接受之前,我们只能决定使用JSDoc或者TypeScript工具链。

建议

所以现在我的建议是这样的:

  • 当你正在做一个有编译步骤的项目时,使用TypeScript没有什么坏处
  • 但是如果你不需要编译步骤,那么坚持使用JSDoc类型注释可能更容易。

以上就是本文的全部内容,如果对你有所帮助,欢迎点赞、收藏、转发~

与有JSDoc还需要TypeScript吗相似的内容:

有JSDoc还需要TypeScript吗

这听起来是不是很耳熟:你想写一个小型脚本,不管是为页面、命令行工具,还是其他什么类型。你从JavaScript开始,直到你想起写代码时没有类型是多么痛苦。所以你把文件从`.js`重命名为`.ts`。然后意识到你已经打开了一个麻烦的玩意儿。 如果你在为一个网站或一个库写代码,你就需要引入编译的步骤。如

有手就会的 Java 处理压缩文件

@目录前言背景第一步:编写代码1.1 请求层1.2 业务处理层1.3 新增配置第二步:解压缩处理2.1 引入依赖2.2 解压缩工具类总结 前言 请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i、 提示:以下是本篇文章正文内容,下面案例可供参考 背景 在项目出现上传文件,其中文件包含压缩包,并

将html页面转成pdf下载保存(html2canvas + jspdf或者Print调出打印功能导出pdf)

方案1:html2canvas + jspdf (缺点:清晰度不高) 安装插件: 亲测可用 yarn add html2canvas yarn add jspdf import html2canvas from 'html2canvas'; import jspdf from 'jspdf'; /*

【译】通过出色的开发人员体验,将乐趣最大化,将痛苦最小化

有一条通往开发者幸福的道路——开发者可以更多地专注于编码,而不是运维;在那里他们可以以创造力的速度进行创新;他们可以快速发展,而不必担心管理他们的应用程序所依赖的基础设施。

【Android逆向】静态分析+frida破解test2.apk

有了上一篇的基础 https://www.cnblogs.com/gradyblog/p/17152108.html 现在尝试静态分析的方式来处理 为什么还要多此一举,因为题眼告诉了我们是五位数字,所以可以爆破,不告诉这个题眼的话,就得分析 1. IDA 打开libroysue.so,查看JNI_O

redis7源码分析:redis 单线程模型解析,一条get命令执行流程

有了下文的梳理后 redis 启动流程 再来解析redis 在单线程模式下解析并处理客户端发来的命令 1. 当 client fd 可读时,会回调readQueryFromClient函数 void readQueryFromClient(connection *conn) { client *c

有状态软件如何在 k8s 上快速扩容甚至自动扩容

概述 在传统的虚机/物理机环境里, 如果我们想要对一个有状态应用扩容, 我们需要做哪些步骤? 申请虚机/物理机 安装依赖 下载安装包 按规范配置主机名, hosts 配置网络: 包括域名, DNS, 虚 ip, 防火墙... 配置监控 今天虚机环境上出现了问题, 是因为 RabbitMQ 资源不足.

【算法】在vue3的ts代码中分组group聚合源数据列表

有一个IList()对象列表, 示例数据为[{id:'1',fieldName:'field1',value:'1'},{id:'1',fieldName:'field2',value:'2'},{id:'2',fieldName:'field1',value:'1'},{id:'2',f

记录一则exachk进程占用大量CPU资源

有Exadata客户在进行exachk巡检之后反馈,发现系统中,exachk进程占用了大量CPU资源。 了解之前的变更,只是巡检之前升级了AHF,然后进行标准的exachk巡检。 现象: 目前机器整体CPU使用率是20%+,但被使用到的具体CPU core基本都是满负荷,都是这些exachk进程,这

记录一则ADG备库报错ORA-29771的案例

有客户找到我这边咨询,说他们的一套核心ADG库在业务高峰期报错,因为业务做了读写分离,其备库也实际承担读业务,所以备库故障也会对业务产生影响。 这里也要提醒大家,做读写分离,如果读库出现故障的情况,要有切换到主库的应急方案考虑进去。 客户这里自己通过重启备库暂时解决,但担心故障再现,所以非常着急要分