如何在TypeScript Nuxt.js项目中实现自定义类型自动导入？

步骤1：修改自定义类型声明文件的写法 #

你当前的types/index.d.ts中使用了export关键字，会将文件标记为ES模块，内部的类型默认是模块局部类型，无法全局生效。直接去掉export即可：

// types/index.d.ts
interface IUser {
  name: string
  address: string
}

如果需要避免全局类型命名冲突，也可以显式声明到全局作用域：

// types/index.d.ts
declare global {
  interface IUser {
    name: string
    address: string
  }
}
export {}
// 此处加export {}是为了让文件被识别为模块，避免全局类型声明触发TS报错

步骤2：配置Nuxt识别类型目录 #

修改nuxt.config.ts，添加类型目录的自动扫描配置：

// nuxt.config.ts
export default defineNuxtConfig({
  // 其余原有配置...
  typescript: {
    strict: true,
    typeCheck: true
  },
  // 配置自动导入的类型目录
  imports: {
    dirs: ['types/*.ts', 'types/**/*.d.ts']
  }
})

步骤3：补充tsconfig.json配置 #

在你已有的include配置基础上，补充typeRoots配置确保TS能扫描到自定义类型目录：

// tsconfig.json
{
  "extends": "./.nuxt/tsconfig.json",
  "include": ["**/*.ts", "**/*.vue", "**/*.tsx"],
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  }
}

步骤4：生效验证 #

配置完成后执行npx nuxi prepare生成Nuxt内置类型声明文件，重启IDE的TS服务即可，无需在组件内手动导入就可以直接使用IUser类型。

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