TypeChat 用一句话概括，就是用了它你可以让大语言模型（比如 ChatGPT）将自然语言转换成特定类型的 JSON 数据。
我们在使用 ChatGPT 的时候，大致流程如下：
假如我们需要 ChatGPT 按照我们输入的 prompt，输出指定格式的 JSON 数据，我们在 prompt 里将我们的要求描述清楚就行，比如
好像没什么问题，很听话。
我们再看一个例子
{
"filters": [
{
"component": "select",
"key": "店铺名称",
"label": "店铺名称",
"placeholder": "请输入"
},
{
"component": "select",
"key": "店铺编码",
"label": "店铺编码",
"placeholder": "请输入"
},
{
"component": "select",
"key": "店铺门头编码",
"label": "店铺门头编码",
"placeholder": "请输入"
},
{
"component": "select",
"key": "所在区域",
"label": "所在区域",
"placeholder": "全部"
}
],
"columns": [
{
"slot": false,
"title": "店铺编码",
"dataIndex": "店铺编码",
"key": "店铺编码"
},
{
"slot": false,
"title": "店铺名称",
"dataIndex": "店铺名称",
"key": "店铺名称"
},
{
"slot": false,
"title": "店铺业务范围",
"dataIndex": "店铺业务范围",
"key": "店铺业务范围"
},
{
"slot": false,
"title": "店铺类型",
"dataIndex": "店铺类型",
"key": "店铺类型"
},
{
"slot": false,
"title": "所在区域",
"dataIndex": "所在区域",
"key": "所在区域"
},
{
"slot": false,
"title": "详细地址",
"dataIndex": "详细地址",
"key": "详细地址"
}
],
"pagination": {
"show": true,
"page": "page",
"size": "size",
"total": "result.total"
},
"includeModifyModal": false,
"fetchName": "fetchTableList",
"result": "[\"result\"][\"records\"]",
"serviceName": "getTableList"
}
我们需要 ChatGPT 把上面 JSON 数据中 filters 字段中的 key 字段的值翻译为英文，使用驼峰语法。columns 字段中的 key、dataIndex 字段的值翻译为英文，使用驼峰语法。
我们的 prompt 可以这么写：
{
"filters": [
{
"component": "select",
"key": "店铺名称",
"label": "店铺名称",
"placeholder": "请输入"
},
{
"component": "select",
"key": "店铺编码",
"label": "店铺编码",
"placeholder": "请输入"
},
{
"component": "select",
"key": "店铺门头编码",
"label": "店铺门头编码",
"placeholder": "请输入"
},
{
"component": "select",
"key": "所在区域",
"label": "所在区域",
"placeholder": "全部"
}
],
"columns": [
{
"slot": false,
"title": "店铺编码",
"dataIndex": "店铺编码",
"key": "店铺编码"
},
{
"slot": false,
"title": "店铺名称",
"dataIndex": "店铺名称",
"key": "店铺名称"
},
{
"slot": false,
"title": "店铺业务范围",
"dataIndex": "店铺业务范围",
"key": "店铺业务范围"
},
{
"slot": false,
"title": "店铺类型",
"dataIndex": "店铺类型",
"key": "店铺类型"
},
{
"slot": false,
"title": "所在区域",
"dataIndex": "所在区域",
"key": "所在区域"
},
{
"slot": false,
"title": "详细地址",
"dataIndex": "详细地址",
"key": "详细地址"
}
],
"pagination": {
"show": true,
"page": "page",
"size": "size",
"total": "result.total"
},
"includeModifyModal": false,
"fetchName": "fetchTableList",
"result": "[\"result\"][\"records\"]",
"serviceName": "getTableList"
}
将这段 json 中，filters 字段中的 key 字段的值翻译为英文，使用驼峰语法，label、placeholder 字段的值保留中文。
columns 字段中的 key、dataIndex 字段的值翻译为英文，使用驼峰语法，title 字段的值保留中文。
返回翻译后的 markdown 语法的代码块
最后面的那段话已经经过了几次修改，我们看下 ChatGPT 返回的内容：
{
"filters": [
{
"component": "select",
"storeName": "店铺名称",
"label": "店铺名称",
"placeholder": "请输入"
},
{
"component": "select",
"storeCode": "店铺编码",
"label": "店铺编码",
"placeholder": "请输入"
},
{
"component": "select",
"storeDoorCode": "店铺门头编码",
"label": "店铺门头编码",
"placeholder": "请输入"
},
{
"component": "select",
"area": "所在区域",
"label": "所在区域",
"placeholder": "全部"
}
],
"columns": [
{
"slot": false,
"title": "店铺编码",
"storeCode": "店铺编码",
"key": "storeCode"
},
{
"slot": false,
"title": "店铺名称",
"storeName": "店铺名称",
"key": "storeName"
},
{
"slot": false,
"title": "店铺业务范围",
"storeBusinessScope": "店铺业务范围",
"key": "storeBusinessScope"
},
{
"slot": false,
"title": "店铺类型",
"storeType": "店铺类型",
"key": "storeType"
},
{
"slot": false,
"title": "所在区域",
"area": "所在区域",
"key": "area"
},
{
"slot": false,
"title": "详细地址",
"detailedAddress": "详细地址",
"key": "detailedAddress"
}
],
"pagination": {
"show": true,
"page": "page",
"size": "size",
"total": "result.total"
},
"includeModifyModal": false,
"fetchName": "fetchTableList",
"result": "[\"result\"][\"records\"]",
"serviceName": "getTableList"
}
filters 里的 key 字段哪去了？columns 里 dataIndex 字段哪去了？
这只是我遇到的各种情况里的一种，当然也有成功的，反正就是很玄学，可能是我半年 prompt 练习生的水平不够吧。
如果我们用 TypeChat 会怎么样呢？
直接看效果 :
完美。
TypeChat 的大致原理如下：
其实就是在 prompt 拼上了一个 TS 类型，要求 ChatGPT 按照 TS 类型声明输出 JSON。背后还会构建一个 TS 程序去进行校验，如果校验失败就把错误信息也加到 prompt 里，让 ChatGPT 再处理一次。
上面生成的 prompt 跟 TypeChat 生成的有些区别，我并没有直接使用 TypeChat，为了方便在我的项目里使用就抄了一份进行修改，在生成 prompt 的里加上了 “按照字段的注释进行处理” 这一要求。修改后的代码: https://github.com/lowcode-scaffold/lowcode-materials/blob/master/share/TypeChatSlim/index.ts
在 TS 类型的字段注释里还可以加入更离谱的东西来要求 ChatGPT 去处理，比如之前弄的一个根据聊天记录生成日程安排的小 demo，在字段注释里加上当前时间，让 ChatGPT 根据会话内容推算出具体的日期。TS 类型定义如下：
const res = await translate({
schema: `export type SchedulType = {
/**
* 时间，格式：YYYY-MM-DD HH:mm:ss，当前时间为 ${new Date().toLocaleString()}，请推算出正确的时间
*/
time: string;
/**
* 活动主题
*/
todo: string;
/**
* 地点
*/
addr: string;
/**
* 活动的全体参与人
*/
participant: string[];
};`,
typeName: 'SchedulType',
request: `根据下面的聊天记录，生成日程安排：${message.data}`,
createChatCompletion: createChatCompletionForScript,
showWebview: true,
});
聊天记录中只说到了周六下午两点，ChatGPT 根据字段注释里的当前时间正确推算出了日程的具体日期。
受到 TypeChat 的启发，借助 JSON Schema 实现了一个 JSONSchemaChat，原理差不多，效果如下：
