如何在VSCode中将TypeScript函数返回类型提取为接口？

用VSCode内置功能直接搞定（不用插件） #

• 先定位到目标函数，比如：

function fetchUser() {
  return { id: 1, name: "Alice", email: "alice@example.com" };
}

• 把光标放在函数名上，按Ctrl+.（Windows/Linux）或Cmd+.（Mac）调出快速修复菜单
• 在菜单里选择「提取函数返回值类型」（英文版本显示为"Extract type from function return value"）
• 输入你想要的接口名称（比如User）回车确认，VSCode会自动生成静态接口，并将函数返回类型替换为该接口：

interface User {
  id: number;
  name: string;
  email: string;
}

function fetchUser(): User {
  return { id: 1, name: "Alice", email: "alice@example.com" };
}

这个接口是固定快照，后续函数内部返回值变更时，VSCode会直接提示类型不匹配，不会自动更新接口，刚好满足你“发现变更”的需求。

手动触发类型提取的备用方法 #

如果内置重构未显示对应选项，可以按以下步骤操作：

• 先给函数添加ReturnType<typeof 函数名>作为返回类型，比如：

function fetchUser(): ReturnType<typeof fetchUser> {
  return { id: 1, name: "Alice", email: "alice@example.com" };
}

• 光标放在ReturnType<typeof fetchUser>上，按Ctrl+./Cmd+.选择「提取类型别名」，生成后把type关键字替换为interface即可
• 最终得到的依然是静态接口，不会随函数返回值自动变更。

插件辅助（可选） #

如果需要批量处理或更灵活的操作，可以安装TypeScript Toolbox插件，它提供了更丰富的类型重构选项，一键提取返回类型为接口的操作逻辑和内置功能类似，但支持更多复杂场景。

内容的提问来源于stack exchange，提问作者Kilian