在前端开发过程中，我们经常需要使用类型定义来明确代码中变量、函数、类等的类型。然而，在 JavaScript 中，类型定义并不像其他静态语言一样可以在代码中直接声明，而需要使用一些工具来实现。其中，一个常见的工具就是 TypeScript，但是并不是所有项目都需要使用 TypeScript。这时，我们可以使用 npm 包 semantic-types。
什么是 semantic-types？
semantic-types 是一个 npm 包，它能够为 JavaScript 代码提供类型定义能力。它的工作原理是通过从 JSDoc 注释中提取出类型信息，并将其转换为 TypeScript 类型定义，进而实现对代码类型的自动推断。
semantic-types 的优势在于：
- 无需编写额外代码：只需要添加标准 JSDoc 注释即可为 JavaScript 代码提供类型定义。
- 轻松上手：无需使用 TypeScript 或其他类型定义工具，只需要一行命令即可快速配置。
- 可定制性强：通过配置选项，可以自定义类型推断和生成 TypeScript 类型的行为。
如果你的项目中不需要使用 TypeScript，但又需要类型定义能力，semantic-types 就是一个很好的选择。
安装和配置
首先，我们需要安装 semantic-types：
npm install semantic-types --save-dev
安装完成后，我们可以执行以下命令来查看语法和配置选项：
npx semantic-types --help
semantic-types 的配置文件是一个 JavaScript 模块，通常命名为 semantic.config.js，放置在项目根目录下。我们可以根据项目需要进行如下配置：
-- -------------------- ---- ------- -------------- - - -- --------- ------ ------ -- ------ ------- -------- -- ----------- -------------- ----- -- ----------- -------- ----- -- ------------------- --------------- ------------------------------------------------------------------------ -- -------------------- ------- ----------------- --
使用示例
在配置好 semantic-types 后，我们就可以为 JavaScript 代码添加类型定义了。具体来说，我们只需要在变量、函数、类等的注释前添加一个 @type 标记，就能为其添加类型定义。例如：
-- -------------------- ---- ------- --- - ----- -------- -- ----- ---- - ------ --- - ----- ---- ------- -- ------- -- ------- -- -------- ------ -- - ------ - - -- - --- - ----- -------- - --------- -------- ---- - --------- -------- --- -- ----- ------ - - ----- ------ ---- --- --
除了基本类型，我们还可以使用泛型、枚举等高级类型定义。例如：
-- -------------------- ---- ------- --- - --------- - - ------ ----- --- - ------ ------- -- -- -------- -- -- -------- ----------- --- - -- --- - --- - ----- -------- -- ----- ----- - - ---- -- ------ -- ----- -- --
在这些类型定义中，semantic-types 会自动推断出类型，并生成对应的 TypeScript 类型定义文件，保存在配置的输出目录中。我们可以在 TypeScript 代码中引入该定义文件，或在 JavaScript 代码中使用 JSDoc 注释来获取类型提示。例如：
-- -------------------- ---- ------- --- - -------- -- --- ------- ----- ------ -- ---- -- --- - ----- ------ -- ----- ---- - - --- -- ----- ------ --
在使用时，我们会得到如下的类型提示：
使用 semantic-types，我们可以方便地为项目添加类型定义，提高代码的可读性和可维护性。在使用过程中，我们可以根据需要自定义类型推断和生成 TypeScript 类型的行为，进一步提升项目开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d1e81e8991b448dac44