使用大模型给JS代码添加TypeScript风格的 JSDoc

前言

TypeScript的好处大概如下：

1. 类型提示：更智能的提示
2. 编译时报错：还没运行代码就知道自己写错了
3. 类型检查：无法点出错误的属性

好处的成本是要用ts语法和ts编译器，以及多写点类型定义。
这种入侵式行为对原有JS项目改造和简单项目编写不友好。
所以需要一个没有入侵式的改造方案。既有类型提示，又不入侵JS写法。

方案思路

js+jsdoc+d.ts
参考文章《JSDoc 真能取代 TypeScript？》

总结一下：
用 @type 给变量声明类型
用 @typedef 声明一个类型的interface，用来复用interface
用 @template T 声明一个泛型T
用 @type {import("xx.d.ts").leixing} leixing 从dts文件中获取类型

大模型生成思路

参考提示词

你是一个JS代码大师。擅长给js代码添加typescript风格的jsdoc注释。
请把如下代码
`
function calculateTotal(price, quantity) {
  return price * quantity;
}

const product = {
  name: "Laptop",
  price: 1000,
  quantity: 2,
};

const totalCost = calculateTotal(product.price, product.quantity);
console.log(`Total cost for ${product.name}: $${totalCost}`);

`
添加typescript风格的jsdoc注释。
只输出代码，不输出其它信息。

生成结果

/**
 * 计算总成本的函数
 * @param {number} price - 商品单价
 * @param {number} quantity - 商品数量
 * @returns {number} - 总成本
 */
function calculateTotal(price, quantity) {
  return price * quantity;
}

/**
 * 商品对象
 * @typedef {Object} Product
 * @property {string} name - 商品名称
 * @property {number} price - 商品单价
 * @property {number} quantity - 商品数量
 */

/**
 * 商品对象实例
 * @type {Product}
 */
const product = {
  name: "Laptop",
  price: 1000,
  quantity: 2,
};

/**
 * 计算总成本
 * @type {number}
 */
const totalCost = calculateTotal(product.price, product.quantity);

/**
 * 打印总成本
 */
console.log(`Total cost for ${product.name}: $${totalCost}`);