打字稿，减肥字

多年来，TypeScript 已经成为 JavaScript 开发中不可或缺的一部分。它在 JavaScript 的基础上添加了类型系统，增强了代码的可读性和可维护性。然而，TypeScript 的额外语法和编译步骤有时会增加开发负担。幸运的是，TypeScript 团队支持使用 JSDoc 对纯 JavaScript 代码进行类型检查，从而兼顾类型安全和开发效率。

项目设置

要开始使用 JSDoc 进行类型检查，你需要 NodeJS 和 npm。创建一个新项目，运行 npm init。本文将使用 VS Code 作为代码编辑器。安装 TypeScript：

npm i -D typescript

创建 tsconfig.json 文件，添加以下配置：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "allowJs": true,
    "checkJs": true,
    "noEmit": true,
    "strict": false,
    "noImplicitThis": true,
    "alwaysStrict": true,
    "esModuleInterop": true
  },
  "include": ["script", "test"],
  "exclude": ["node_modules"]
}

关键配置是 allowJs 和 checkJs，都设置为 true，允许 TypeScript 检查 JavaScript 代码。我们还指定了 /script 目录作为代码所在位置。

简单示例

创建一个 index.js 文件，编写一个简单的加法函数：

/**
 * Add two numbers together
 * @param {number} x
 * @param {number} y
 * @return {number}
 */
function add(x, y) {
  return x   y;
}

我们通过 JSDoc 注解 @param 和 @return 指定了参数和返回值的类型。 尝试使用错误类型调用函数，VS Code 会提示错误。

JSDoc 注解等效于 TypeScript 代码：

/**
 * Add two numbers together
 */
function add(x: number, y: number): number {
  return x   y;
}

JSDoc 支持多种内置类型，例如 string、object、Array 以及 HTMLElement、MutationRecord 等 DOM 类型。

JSDoc 还允许为对象添加类型约束，例如 WeakMap：

/** @type {WeakMap<object string>} */
const metadata = new WeakMap();

const object = {};
const otherObject = {};

metadata.set(object, 42); // 报错，因为值不是字符串
metadata.set(otherObject, 'Hello world');</object>

自定义类型

JSDoc 允许定义自定义类型，例如 Person 类型：

/**
 * @typedef Person
 * @property {string} name - The person's name
 * @property {number} age - The person's age
 * @property {string} [hobby] - An optional hobby
 */

使用 @typedef 定义类型，使用 @property 或 @prop 定义属性。

使用自定义类型：

/** @type {Person} */
const person = { name: 'John Doe', age: 30, hobby: 'reading' };

可以使用联合类型定义有限的选项集：

/**
 * @typedef {'cat'|'dog'|'fish'} Pet
 */

泛型

JSDoc 支持泛型，例如 identity 函数：

/**
 * @template T
 * @param {T} target
 * @return {T}
 */
function identity(target) {
  return target;
}

使用 @template 定义泛型类型。

类型转换

有时需要进行类型转换，例如处理事件监听器：

document.getElementById('input').addEventListener('input', event => {
  console.log(/** @type {HTMLInputElement} */(event.target).value);
});

使用 /** @type {类型} */ 进行类型转换。

总结

JSDoc 提供了一种在编写纯 JavaScript 代码的同时获得类型检查和代码提示的方式，这对于那些希望在不引入额外语法和编译步骤的情况下提高代码质量的项目非常有用。 虽然 TypeScript 编译器功能强大，但 JSDoc 提供了一种灵活的替代方案。

以上是打字稿，减肥字的详细内容。更多信息请关注PHP中文网其他相关文章！