曾經辛苦造的輪子，現在能否用 ChatGPT 替代呢？

上一篇文章 我在 vscode 插件里接入了 ChatGPT，解決了代碼變數命名的難題 中，展示了如何在 vscode 插件中使用 ChatGPT 解決代碼變數命名的問題，vscode 插件市場中有很多的翻譯插件，但是在一些使用場景里是遠遠比不上 ChatGPT 的，比如只翻譯一段 json 資料里的指定欄位，那么 ChatGPT 還能做什么呢？能否取代已經存在的輪子？

以 lowcode 插件中的功能為例，看看能不能用 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 request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
    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 request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        url: `xxxx`,
        method: 'GET',
        params,
        data,
    });
}
回傳 markdown 代碼塊

模板會使用 ejs 進行編譯，

根據 JSON 生成 MOCK 方法

也是先復制一段 json 資料，

不使用 ChatGPT

插件內部是直接遍歷 json，把這一段代碼通過字串拼出來，

使用 ChatGPT

這里使用 ChatGPT 的時候，很難讓它輸出不需要修改就能直接使用的代碼，如上的代碼里輸出了一段無關的內容，

// 呼叫方法 
getMockData().then(data =https://www.cnblogs.com/jaycewu/p/> { 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 request<I<%= rawSelectedText.slice(0, 1).toUpperCase() + rawSelectedText.slice(1) %>Result>({
        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 模板

上面所有的模板已經共享，通過如下方式可以下載到你的專案中：

標籤：JavaScript

上一篇：前端Vue自定義簡單好用商品分類串列組件 側邊欄商品分類組件

下一篇：返回列表