如何配置TypeScript Server自动添加type类型导入？

已经在tsconfig.json中启用isolatedModules，但TypeScript Server自动生成导入语句时，不会给类型（比如示例中的Foo）添加type前缀，希望通过配置实现自动生成带type的导入。

解决方案 #

根据你的TypeScript版本，选择以下配置方案：

方案一：TypeScript 5.0+ 推荐（使用verbatimModuleSyntax） #

在tsconfig.json的compilerOptions中添加verbatimModuleSyntax配置：

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "verbatimModuleSyntax": true
  }
}

启用后，TS Server会自动区分类型和值的导入，生成的代码会变成：

import { Enums, type Foo } from "./types";

const foo: Foo = { foo: 1 }
const dir: Enums = Enums.Left;

方案二：兼容TypeScript 4.x（使用importsNotUsedAsValues + preserveValueImports） #

如果你的TS版本低于5.0，可通过以下配置组合实现：

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "isolatedModules": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "importsNotUsedAsValues": "error",
    "preserveValueImports": false
  }
}

这个配置会强制TS Server对仅作为类型使用的导入添加type前缀，符合isolatedModules的要求。

原理说明 #

启用isolatedModules时，TypeScript要求所有类型导入必须明确标记为type（避免Babel等工具无法识别未标记的类型导入）。上述配置会告诉TS Server在自动导入时自动区分类型和值，生成符合要求的导入语句。

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