使用 Fitten Code 自动生成 TypeScript 接口定义避免类型错误

后端返回的 JSON 数据结构说变就变，手动维护 TypeScript 接口时，漏掉字段、写错类型简直是家常便饭。更气人的是，编译阶段一声不吭，等到运行时才报类型不匹配——找 bug 找得头皮发麻。Fitten Code 正好能治这个病：它直接基于真实的 API 响应自动推导出精准的接口定义，省心又靠谱。

安装并启用 Fitten Code 插件

操作非常简单：打开 VS Code，左侧扩展面板搜一下 “Fitten Code”，点击安装，装完重启编辑器就行。插件启动后，右下角状态栏会出现一个绿色的 Fitten 图标，表示它已经就绪。如果图标没出现，检查一下是不是不小心禁用了扩展，或者跟其他代码生成类插件（比如 REST Client）起了冲突。

从 HTTP 请求响应自动生成接口

前提是手头得有一个可用的 .http 文件（比方说 api.http），里面至少有一个能成功返回 JSON 的 GET 或 POST 请求。操作时，把光标放到请求响应体那块儿——也就是 ### 分隔符下方、实际 JSON 开始的位置——然后右键，选择 “Fitten Code: Generate Interface from Response”，接着输入接口名（比如 UserResponse），回车即可。

插件会解析当前选中的 JSON 响应，自动识别嵌套结构、数组、甚至 null 值的可选性，顺便还会给每个字段配上 JSDoc 注释。值得留意的是，如果某个字段的值为

，Fitten Code 默认会把它标记为可选（带问号），这样就不会因为强制赋值而报错了。

批量生成多个接口并组织到同一文件

有两种办法可以批量搞定。

每次生成的接口会直接插入到当前打开的 .ts 文件光标所在位置。你可以在新建的 types/api.ts 文件里依次生成 UserResponse、OrderList、ProfileDetail 等接口，插件会自动跳过重复命名的 interface 声明，不用担心冲突。

① 在 .http 文件中用 ### 分隔多个请求，每个请求下面都要有完整的响应体；
② 按住 Alt（Windows/Linux）或 Option（macOS），用鼠标点击每个响应体的首行，创建多个光标；
③ 右键 → “Fitten Code: Generate Interface from Response”；
④ 插件会为每个光标位置分别生成接口，命名按顺序是 Response1、Response2…… 记得手动重命名一下；
⑤ 这一步有个关键：，否则会提示 “no valid JSON found”。