Nuxt3中如何配置TypeScript识别@types目录的类型声明？

一、正确配置包含@types的姿势 #

Nuxt3的tsconfig是自动生成的，本地的tsconfig.json继承自它的配置，直接加include会覆盖默认规则，导致TypeScript找不到项目自身文件。给你两种靠谱的配置方式：

1. 用typeRoots指定类型根目录
   在本地的tsconfig.json里添加typeRoots字段，把@types和Nuxt自身的类型目录都列进去，TypeScript会自动扫描这些目录下的声明文件：

{
  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "typeRoots": [
      "./node_modules/@types",
      "./.nuxt/types"
    ]
  }
}

别漏了.nuxt/types，不然Nuxt自身的类型定义会失效。

2. 扩展include而非直接覆盖
   如果一定要用include，得把Nuxt默认的匹配规则也带上，不能直接替换：

{
  "extends": "./.nuxt/tsconfig.json",
  "include": [
    "**/*",
    "./node_modules/@types/**/*.d.ts",
    "./.nuxt/**/*.d.ts"
  ]
}

**/*是Nuxt默认的基础匹配规则，加上.nuxt的类型文件，再追加@types的内容，就不会覆盖默认配置了。

二、为啥这不是Nuxt3的默认配置？ #

1. 主流库大多自带类型定义：现在很多常用库本身就内置了.d.ts文件，Nuxt3默认会自动识别这些类型，不需要手动引入@types包。
2. 优化类型检查速度：默认包含所有@types目录会让TypeScript扫描大量不必要的声明文件，拖慢类型检查效率，大型项目里这个影响更明显。
3. 减少类型冲突风险：部分库的内置类型和@types中的定义可能不一致，默认不包含@types能降低这类冲突的概率。

三、额外注意事项 #

• 先确认库是否自带类型：如果目标库本身已经有.d.ts文件，就别再安装对应的@types包，避免类型冲突。
• 注意@types版本匹配：安装@types包时，要和你使用的库版本对应，比如@types/lodash要匹配你实际安装的lodash版本，不然可能出现类型不兼容问题。
• 修改配置后重启服务：改完tsconfig.json，记得重启nuxi dev，让Nuxt重新生成配置并加载新的类型文件。

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