查看原文
其他

前端框架Svelte放弃TS,如何使用纯JS实现类型检查?

CUGGZ 前端充电宝 2023-10-06

近日,前端框架 Svelte 的创建者 Rich Harris 提出要将 Svelte 从 TypeScript 切换到使用 JSDoc 的 JavaScript。这种转变得到了 Svelte 团队的大力支持,他们决定在 Svelte 4 代码库中从 TypeScript 迁移到 JavaScript JSDoc。而这个决定引起了开发社区的惊讶和怀疑。

那为什么要从 TypeScript 转向 JavaScript JSDoc 呢?这是否是技术的倒退?JSDoc 又是什么?它有什么特点?如何使用?下面将详细介绍!

Svelte 是一个现代的 JavaScript 框架,它允许开发者以声明式的方式写组件,并在构建时将这些组件转化为高效、优化的纯 JavaScript 代码。相比于其他框架,Svelte 更加轻巧,在性能和体验方面也有着不俗的表现。使用 Svelte 可以帮助开发人员更快速地构建交互式应用程序,同时还可以减少运行时性能负担和包大小。

为什么转向JSDoc?

Svelte 团队认为,尽管类型系统非常棒,但作为一种语言,TypeScript有些“麻烦”。主要问题在于使用 TypeScript 会带来额外的工具。例如,如果在 TypeScript 中构建一个库,并在另一个项目中使用该库,就不能只修改代码库还需要重新构建代码,这增加了不必要的复杂性。

为了规避这些问题,Svelte 团队决定使用 JavaScript 和 JSDoc 注释来实现类型安全。这种方法提供了所有类型安全的好处,而没有与 TypeScript 相关的缺点。SvelteKit 代码库已经采用了这种方法,团队计划对 Svelte 4 进行同样的处理。不过,作为Svelte的用户,这不会影响在Svelte 中使用 TypeScript 的能力,从Svelte导出的函数仍将具有习以为常的所有 TypeScript 优点(类型检查、智能感知、内部文档等)。

什么是 JSDoc?

很多开发人员之所以选择 TypeScript,是因为强类型可以减少错误,并通过代码完成和弹出帮助等功能改善代码编辑器中的开发体验。而主要是 API 文档工具的 JSDoc 也可以用于类型检查。

JSDoc 是一种用于在 JavaScript 代码中编写文档和类型注释的标记语言,它使用类似于JavaDoc 的注释语法。通过在代码中添加特定的注释标记,可以生成文档,提高代码的可读性和可维护性。JSDoc不仅可以描述函数的参数和返回值类型,还可以用来描述类、对象、模块和命名空间等各种 JavaScript 实体的属性和方法。

那相较于 TypeScript,JSDoc 有什么优点呢?

  • 与语言无关:JSDoc只是一种在类似于JavaScript的语言中编写文档和类型注释的方式,使其更加灵活。可以在各种环境中使用它,而TypeScript可能不太适合某些环境。
  • 易于集成:由于 JSDoc 只是基于注释的系统,因此不需要更改代码或工具。可以开始向现有的JavaScript代码库添加JSDoc注释,而无需太多麻烦。
  • 学习曲线较低:与TypeScript相比,JSDoc非常直接明了,学习起来更容易,TypeScript可能需要开发人员学习新的语法和类型概念。
  • 文档受益:JSDoc为编写代码文档提供了一种一致的方法。这使得其他开发人员更容易理解代码库,并有助于生成文档。
  • 渐进式采用:可以逐渐向代码库添加JSDoc,这样可以逐步将类型检查和文档引入项目,而无需完全采用TypeScript。
  • 无需构建步骤:JSDoc不像TypeScript那样需要构建步骤进行类型检查和转译。

如何使用 JSDoc?

使用 JSDoc 不需要任何前置操作。只需要在 JavaScript 代码中添加 JSDoc 注释即可。JSDoc 注释以“/**”开头,以“*/”结尾,位于要描述的代码块之前。可以通过以下方式来将 JSDoc 用于类型检查。

  1. 在每个变量声明、函数声明等之前添加 JSDoc 注释,描述它们的类型和用途。例如:
/**
 * @type {number}
 */

const num = 42;

/**
 * 两数之和
 * @param {number} x
 * @param {number} y
 * @returns {number} 返回值
 */

function add(x, y) {
  return x + y;
}
  1. 使用 JSDoc 注释来描述自定义类型和接口。例如:
/**
 * @typedef {Object} Person
 * @property {string} name - The person's name.
 * @property {number} age - The person's age in years.
 */


/**
 * @interface Shape
 * @property {number} x
 * @property {number} y
 * @property {number} width
 * @property {number} height
 */


  1. 可以使用文档生成工具(如 JSDoc-to-HTML)将 JSDoc 注释自动生成为文档。例如,在使用 JSDoc 注释编写完整的库或应用后,可以使用 JSDoc-to-HTML 工具将其转换为漂亮的文档。

JSDoc 以@标记名称的形式提供了很多标记,常用的包括:

  • @param:用于描述函数的参数。允许指定参数名称、类型和描述信息。
  • @returns:用于描述函数返回值的类型和描述信息。
  • @typedef:用于定义自定义类型或对象。允许指定类型名称、属性列表和描述信息。
  • @property:用于描述对象的属性。允许指定属性名称、类型和描述信息。
  • @callback:用于描述回调函数的参数和返回值类型。
  • @class:用于描述一个类。允许指定类的名称、属性、方法和描述信息。
  • @constructor:用于描述一个构造函数。允许指定构造函数的参数、返回值和描述信息。
  • @enum:用于定义一个枚举类型。允许指定枚举名称、属性列表和描述信息。
  • @namespace:用于描述命名空间。允许指定命名空间的名称和描述信息。
  • @readonly:用于指定只读属性或参数。
  • @private:用于指定私有属性或方法。
  • @public:用于指定公共属性或方法。
  • @protected:用于指定受保护的属性或方法。
  • @throws:用于描述函数可能引发的异常。允许指定异常类型和描述信息。

这些标记只是 JSDoc 提供的许多标记中的一部分。JSDoc 还提供了许多其他标记,如 @augments@example@ignore@link@since 等。通过使用这些标记,可以更好地记录和描述 JavaScript 代码。

需要注意,尽管可以使用 JSDoc 代替 TypeScript 进行类型检查,但它并不像 TypeScript 一样强制执行类型检查。如果在 JSDoc 注释中错误地描述了类型,或者没有提供足够的类型信息,将无法得到类型检查的保护,这可能会导致运行时错误。因此,在使用 JSDoc 进行类型检查时,需要格外小心,并尽可能详细地记录变量和参数的类型。

小结

最终 JSDoc 会取代 TypeScript 进行类型检查吗?我认为是不会的。TypeScript 非常适合应用开发,而且它正在不断改进。不过对于库开发来说,使用纯 JavaScript 和 JSDoc 注释似乎是更好的选择。

绝大多数开发人员不是在构建库,而是在构建应用。因此,TypeScript 将保持主要的类型检查方式,直到 JavaScript 实现原生类型检查为止。

选择 TypeScript 还是带有 JSDoc 的 JavaScript 取决于开发团队或开发人员的需求和偏好。对于库作者来说,JavaScript 和 JSDoc 的简单性和灵活性特别有吸引力的。对于已经具有构建中的应用,TypeScript 仍然可能是首选。

往期推荐

面试率超高的JS错误处理,看这篇就够了!

10 个值得学习的 Vue 开源实战项目!

WebGPU 是 2023 年 Web 的未来!

推荐15个yyds的 Web3 开源项目!

Electron 25.0.0 正式发布,跨平台桌面应用开发工具!

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存