typescript为javascript添加静态类型，有助于尽早发现错误并简化大型代码库的管理。但全面迁移到typescript有时难度很大。这时，jsdoc就派上用场了，它允许您在不进行全面重构的情况下，获得静态类型系统的大部分优势。
JSDoc的强大之处在于它不仅仅是代码注释。通过@typedef和@type，您可以在JavaScript文件中创建可复用的复杂类型定义，从而提升代码的可读性和安全性，而无需TypeScript的复杂配置。
JSDoc的适用场景：
小型项目: 对于小型项目，完整的TypeScript配置可能显得过于繁重。JSDoc提供了一种轻量级的添加类型和文档的方法。逐步迁移: JSDoc可以作为迁移到TypeScript的桥梁。您可以先从JSDoc开始，生成声明文件，然后逐步过渡到完整的TypeScript。已有JavaScript代码库: 将大型JavaScript代码库迁移到TypeScript可能非常耗时。JSDoc允许您逐步引入类型，无需一次性重写所有代码。文档优先: JSDoc强调代码文档，这无论您使用哪种类型系统都是至关重要的。良好的文档始终是代码库的加分项。
使用@typedef和@type定义类型:
以下是如何使用JSDoc定义类型的示例：
立即学习“Java免费学习笔记（深入）”；
/** * @typedef {object} Point * @property {number} x - x坐标. * @property {number} y - y坐标. *//** * 计算两点之间的距离. * @param {Point} p1 - 第一个点. * @param {Point} p2 - 第二个点. * @returns {number} 两点之间的距离. */function distance(p1, p2) { const dx = p2.x - p1.x; const dy = p2.y - p1.y; return Math.sqrt(dx ** 2 + dy ** 2);}/** * @type {Point} */const originPoint = { x: 0, y: 0 };console.log(distance(originPoint, { x: 3, y: 4 }));
在这个例子中：
@typedef {object} Point: 定义了一个名为Point的类型，它是一个包含x和y属性的对象，这两个属性都是数字。@param {Point} p1: 指定参数p1的类型为Point。@param {Point} p2: 指定参数p2的类型为Point。@type {Point}: 指定变量originPoint的类型为Point。
生成.d.ts文件:
JSDoc可以生成TypeScript声明文件（.d.ts）。TypeScript编译器（tsc）可以解析JSDoc注释并生成这些文件，这意味着您即使在编写纯JavaScript代码时，也能在IDE中进行类型检查和代码补全。
这是一个基本的tsconfig.json配置：
{ "compilerOptions": { "target": "es2020", "module": "commonjs", "outDir": "./dist", "declaration": true, "allowJs": true, "emitDeclarationOnly": false, "esModuleInterop": true }, "include": ["./src/**/*.js"], "exclude": ["node_modules"]}
运行npx tsc (或全局安装的tsc) 将在outDir目录下生成.d.ts文件。
总结:
JSDoc结合类型生成提供了一种平衡的方案。您可以获得类型安全和改进的文档，而无需承担完整的TypeScript迁移的成本。对于无法或不需要进行全面TypeScript迁移的项目，这是一种不错的选择，可以逐步引入类型并提升代码质量。 祝您编程愉快！
以上就是JSDOC：您向JavaScript添加类型的秘密武器（没有完整的打字稿大修）的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501457.html
微信扫一扫 
支付宝扫一扫 
![双向将信号输入对象值绑定为[（ngmodel）]](https://cdn.chuangxiangniao.com/www/2025/12/173962872520240.png?imageMogr2/crop/480x300/gravity/center)
