通义灵码TypeScript类型定义自动生成全攻略
使用通义灵码对话框直接生成类型
如果你手头正好有一段 JSON 响应,希望在 VS Code 里一步生成 interface,此方法最为便捷,无需再复制到外部网站转换。
操作步骤:选中一段合法 JSON(如 {"id": 1, "name": "Alice", "tags": ["user", "admin"]}),右键选择「通义灵码」→「解释代码」,或直接按 Ctrl+Shift+L 打开对话面板。
在对话框中输入要求:「根据此 JSON 生成 TypeScript interface,命名 UserResponse,所有字段必填,嵌套数组保留精确类型。」
通义灵码会立即输出类似结果:
interface UserResponse {
id: number;
name: string;
tags: string[];
}
生成结果默认在新标签页中展示,保存为 types.ts 即可。
注意:如果 JSON 包含 null 值或混合类型(如 "score": 95.5 与 "score": null 交替出现),通义灵码默认推断为 number | null,不会自动追加 undefined。如需严格匹配后端可空性,请在提示中明确写明「字段可为 null,不可为 undefined」。
从剪贴板快速转换为 TypeScript 类型(VS Code 插件)
以下提供两种方式,按需选择。
方法一:安装专用 JSON to TS 插件,轻量且独立运行,不依赖通义灵码。在 VS Code 扩展市场搜索并安装 JSON to TS,重启后复制 JSON 文本,按 Ctrl+Shift+P,输入「JSON to TS」回车,插件创建新编辑器窗口并生成 interface TopLevel。可双击重命名接口名(如改为 UserProfile),再保存为 user.types.ts。
方法二:使用通义灵码内置命令(需 v3.0.0+ 版本)。确保已登录,复制 JSON 后按 Ctrl+Shift+L,输入指令:「将剪贴板中的 JSON 转换为 TypeScript 类型,接口名使用 PascalCase,数组字段标注具体元素类型,禁止使用 any。」
操作流畅,拖拽文件同样支持。
批量处理多个 API 响应文件
实际开发中常见场景:mocks/ 目录下散落着多个 JSON 文件(如 user.json、order.json、product.json),需统一生成类型,且接口名与文件名对应。
操作步骤:打开通义灵码对话面板(Ctrl+Shift+L),输入指令:「遍历项目 mocks/ 目录下所有 .json 文件,为每个文件内容生成同名的 TypeScript interface(如 user.json → interface User),所有字段设为必填,导出为单个 api-types.ts 文件。」
通义灵码将分析目录结构并列出文件,生成完整代码块。点击「采纳全部」或手动复制,保存到 src/types/api-types.ts 即可。
⚠️ 前提条件:每个 JSON 文件必须合法,不能包含注释、尾随逗号或单引号字符串,否则通义灵码解析会中断并报「JSON parse error」。
对接 OpenAPI Schema 自动生成(高保真)
若后端已提供完整 OpenAPI 3.0 文档(如 openapi.json 或 Swagger UI 导出的 JSON),此方法可生成最严谨的类型定义,保留 required、nullable、$ref 引用等语义信息。
将 openapi.json 下载到项目根目录,在通义灵码对话框中输入指令:「基于此 OpenAPI JSON 文件生成 TypeScript 类型,优先提取 components.schemas 下的所有定义,每个 schema 对应一个 export interface,忽略路径和操作定义。」
通义灵码调用内置 schema 解析逻辑,输出包含嵌套引用、联合类型、日期字符串校验等高级特性的类型声明。生成类型可直接用于 axios 的响应泛型,如 axios.get,极大提升类型安全性。
