vscode 原生不支持 paste json as code,需安装 json to ts 等扩展;粘贴合法 json 后可生成 typescript interface,支持嵌套、联合类型等,但无法识别日期或 base64,格式错误或结构不一致会导致推导失败。

Paste JSON as Code 在 VSCode 中根本不存在?
VSCode 原生不提供 Paste JSON as Code 或类似功能——你右键粘贴时看到的“Paste as JSON”选项,其实是第三方扩展(如 JSON to TS、Quick Type)注入的。如果你没装扩展,直接粘贴 JSON 到 TypeScript 文件里,只会得到一串字符串字面量,不会自动生成 interface 或 type。
推荐用 JSON to TS 扩展:轻量、无配置、支持嵌套
安装后,选中一段合法 JSON(比如 {"name": "Alice", "age": 30}),按 Ctrl+Shift+P(Windows/Linux)或 Cmd+Shift+P(macOS),输入并运行 JSON to TS: Convert JSON to TypeScript Interface:
- 默认生成
interface,名称为RootObject;可手动改名,或在粘贴前把光标停在已有interface MyData { ... }的花括号内,它会自动填充字段 - 支持数组、深层嵌套、
null、undefined(推导为可选属性)、数字/布尔混合值(生成联合类型如number | boolean) - 不处理日期字符串(
"2023-10-05"仍为string),也不识别 Base64 或自定义格式字段——这些得人工补as const或注释说明
粘贴 JSON 后类型推导失败?检查这三处
常见报错如 Cannot convert undefined or null to object 或生成空 interface {},大概率是:
详细的 Three.js 3D 图形参考,涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
- JSON 格式非法:末尾多逗号、单引号代替双引号、未转义的换行符——先用
JSON.parse()在控制台试一下,或粘贴到 jsonlint.com 验证 - 粘贴内容为空白或只有注释(如
// 示例数据):扩展无法跳过非 JSON 内容,必须纯 JSON 文本 - JSON 根节点是数组但含不一致结构(
[{"id":1},{"id":2,"name":"x"}]):扩展会取第一个对象做模板,第二个的name字段会被忽略——需手动合并字段或改用any[]+ 后续 refine
想让生成的类型更严谨?手动加修饰比依赖自动推导更可靠
自动生成的类型往往偏宽泛(比如把 "true" 当成 string 而非 boolean),真实项目中建议:
- 对 ID、时间戳、枚举字段,粘贴后立刻替换为具体类型:
id: number→id: string & { readonly __brand: 'UserId' }(配合 branded type) - 用
as const处理字面量数组:["pending", "done"]推导成string[],但改成["pending", "done"] as const就能得到readonly ["pending", "done"] - 避免直接 export 自动生成的
interface;把它作为内部类型,再用type APIResponse = { data: MyGeneratedType; code: number }包一层,留出后续调整空间
工具能省下 70% 的敲键盘时间,但剩下那 30% 的语义约束和边界 case,还是得人来定。别让“一键生成”变成“一键埋雷”。










