typescript页面使用-如果你有 JSDoc,还需要 TypeScript 吗?

2023-08-26 0 6,776 百度已收录

这听起来是不是很熟悉:您想要编写一个大型脚本,无论是针对页面、命令行工具还是其他什么。 您从 JavaScript 开始,直到您记得编写没有类型的代码是多么痛苦。 因此,您将该文件从 .js 重命名为 .ts。 然后意识到你打开了一个麻烦的装置。

如果您正在为网站或库编写代码typescript页面使用,则需要引入编译步骤。 如果您正在编写 CLI 脚本,则可以转向 Deno(它支持 TypeScript,开箱即用),并且您需要设置 IDE 来理解 Deno 的 API,并且混合和匹配 Deno 和 Node 并不总是那么容易。

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

你实际上并不需要 TypeScript

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

通过使用 JSDoc,您可以在 JavaScript 中获得 TypeScript 的所有优点

TypeScript 提供的是静态类型系统。 这意味着类型信息对运行代码没有影响。 当你的 TypeScript 执行时,所有类型信息都完全丢失(这就是为什么你不能在不编写类型保护的情况下测试变量是否属于某种类型)。

这也意味着 TypeScript 只是提供给 TypeScript 解析器的额外类型信息,对于运行代码的 JavaScript 引擎没有任何意义。 当您将 TypeScript 编译为 JavaScript 时,它基本上只是从代码中删除所有类型信息,因此它再次成为有效的 JavaScript 代码。

JS文档

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,还需要 TypeScript 吗?

“TypeScript 和 JSDoc”

鲜为人知的是,JSDoc 是您充分利用 TypeScript 所需的一切。 TypeScript 解析器可以理解 JSDoc 中编写的类型,并为您提供与 .ts 文件相同的静态分析。

我不会在这里提供完整的语法文档。 您要知道的最重要的事情是,您可以在 .ts 文件中执行的几乎所有操作都可以使用 JSDoc 执行。 但这里有一些反例:

具有原始类型的函数参数:

/**
 * @param {string} a
 * @param {number} b
 */

function foo(a, b{}

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

typescript页面使用-如果你有 JSDoc,还需要 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) => {}

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

typescript页面使用-如果你有 JSDoc,还需要 TypeScript 吗?

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


/** @type {Color[]} */
const colors = [
  { chroma0.2hue262 },
  { chroma0.2hue28.3 },
]

有关详细列表typescript页面使用,请参阅官方 TypeScriptJSDoc 文档 [1]。

如果您有复杂的类型,您始终可以编译 *.d.ts 文件并在 JSDoc 注释中导出它们。

请注意,您始终需要为 typescript 设置项目(和 IDE),您需要创建一个 tsconfig.json 文件,将编译器选项 allowedJs 和 checkJs 设置为 true:

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

何时编写 TypeScript

虽然可以完全使用 JSDoc 进行类型声明,但这并不是最方便的。 TypeScript 的语法要好得多,但重复性更少。

TypeScript 团队创建了一个“类型作为注释”ECMAScript 提案 [2],它允许您编写 TypeScript 并在 JavaScript 引擎中不加修改地运行它(JavaScript 引擎会将此类类型注释视为注释。)

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

建议

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

本文翻译自:[3]

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 typescript typescript页面使用-如果你有 JSDoc,还需要 TypeScript 吗? https://www.wkzy.net/game/164458.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务