曾经辛苦造的轮子，现在能否用 ChatGPT 替代呢？

根据 JSON 生成 API 请求方法

首先复制一段 json，比如：

{"code": 200,"msg": "","result": {"records": [{"id": "1a2b3c4d5","costCenterCode": "ccx002","costCenterName": "财务部","accountingCode": "ac0887","bankAccountingCode": "bk1290","orderNumber": "od1089","orderAmount": "6158.36","confirmedTime": "2023-02-07T13:47:34.552Z","laborCostExcludingTax": "4629.05"}],"total": 200}
}

不使用 ChatGPT

使用 ChatGPT

可以发现，几乎达到了一样的效果，只是 ChatGPT 会慢一点。不使用 ChatGPT 时，插件内部是直接调用库将 json 转成 ts 类型，还做了一些边界处理，比如如果复制的是 json 变量而不是标准的 json 数据，需要将 json 变量变成 json 数据。使用 ChatGPT 对数据就没有很严格的要求，可以是 json 变量，也可以是 json 数据。

非 ChatGPT 的模板

<%- type %>export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;
}export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;
}export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return requestResult>({url: `xxxx`,method: 'GET',params,data,});
}

ChatGPT 的模板

<%- rawClipboardText %> 
根据这段 json 生成 ts 类型，名字为 I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result
和下面的代码一起返回
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;
}
export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;
}
export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return requestResult>({url: `xxxx`,method: 'GET',params,data,});
}
返回 markdown 代码块

模板会使用 ejs 进行编译。

根据 JSON 生成 MOCK 方法

也是先复制一段 json 数据。

不使用 ChatGPT

插件内部是直接遍历 json，把这一段代码通过字符串拼出来。

使用 ChatGPT

这里使用 ChatGPT 的时候，很难让它输出不需要修改就能直接使用的代码，如上的代码里输出了一段无关的内容。

// 调用方法 
getMockData().then(data => { console.log(data); });

ChatGPT 使用的模板：

<%- rawClipboardText %> 
生成一个 js 方法，方法名为 <%= rawSelectedText || 'getRandomData' %>，
方法内部使用 mock.js 生成跟上面的 json 一样字段的数据，如果有数组则生成10个元素，
最终的数据使用 Promise.resolve 返回
返回 markdown 代码块

根据 JSON 生成 TS 类型

先复制一段 json 数据

不使用 ChatGPT

使用 ChatGPT

根据 JSON 生成 TS 类型-去除接口名称

这个用处是：后端接口可以连调的时候替换原有自己预先写的接口类型。

不使用 ChatGPT

使用 ChatGPT

根据 TS 类型生成 API 请求方法

使用场景：后端没有给接口文档，前端根据原型和设计稿抽象出数据模型，根据数据模型生成 mock 的 API 请求方法（mock数据通过真实后端服务提供）。

只复制类型体，不要类型名称，比如：

{records: {id: string;costCenterCode: string;costCenterName: string;accountingCode: string;bankAccountingCode: string;orderNumber: string;orderAmount: string;confirmedTime: string;laborCostExcludingTax: string;}[];total: number;}

不使用 ChatGPT

使用 ChatGPT

因为只是将剪贴板里的内容在模板里做了一下拼装，完全用不到 ChatGPT。

模板如下：

export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result {code: number;msg: string;result: <%- rawClipboardText %>
}export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params {id: number;
}export interface I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data {xx: string;
}export function <%= rawSelectedText %>(params: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Params,data: I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Data,
) {return requestResult>({url: `xxxx`,method: 'GET',params,data,});
}

根据 TS 类型生成 MOCK 方法

使用场景：后端没有给接口文档，前端根据原型和设计稿抽象出数据模型，根据数据模型生成 mock 方法（mock 数据没有通过后端服务提供）。

只复制类型体，不要类型名称，比如：

{records: {id: string;costCenterCode: string;costCenterName: string;accountingCode: string;bankAccountingCode: string;orderNumber: string;orderAmount: string;confirmedTime: string;laborCostExcludingTax: string;}[];total: number;}

不使用 ChatGPT

使用 ChatGPT

根据 JSON 生成 KOA MOCK

使用场景：mock 数据由 koa 服务提供，根据 json 生成 koa 路由。

不使用 ChatGPT

使用 ChatGPT

根据 TS 类型生成 MOCK

使用场景：后端没有给接口文档，前端根据原型和设计稿抽象出数据模型，根据数据模型生成 koa mock 服务。

只复制类型体，不要类型名称，比如：

{records: {id: string;costCenterCode: string;costCenterName: string;accountingCode: string;bankAccountingCode: string;orderNumber: string;orderAmount: string;confirmedTime: string;laborCostExcludingTax: string;}[];total: number;}

不使用 ChatGPT

使用 ChatGPT

根据 TS 类型生成组件文档

这也是曾经造的轮子 typescript-to-markdown，一个 utools 插件。

效果如图：

使用 ChatGPT

可以看出来，并不是很完美。

总结

ChatGPT 很难输出不需要修改直接粘贴到编辑器中就能用的代码，相比于我们硬编码写的插件，在效率上还是有所欠缺。但是借助插件来管理 ChatGPT Prompt 模板，复制粘贴还是比上官网或者其它客户端快很多的。

文章没有提到拉取 YAPI 接口文档生成代码的功能，因为 ChatGPT 并不能去拉取接口获取数据，最近在研究 LangChain，借助这玩意儿或许可以实现。

Prompt 模板

上面所有的模板已经共享，通过如下方式可以下载到你的项目中：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！