TypeScript

Nuxt 完全支持类型，并提供有用的快捷方式，确保在编码时可以获得准确的类型信息。

类型检查

默认情况下，为了性能考虑，Nuxt 在运行 nuxt dev 或 nuxt build 时不会进行类型检查。

要在构建或开发时启用类型检查，请将 vue-tsc 和 typescript 安装为开发依赖：

npm install --save-dev vue-tsc typescript

然后，运行 nuxt typecheck 命令来检查你的类型：

Terminal
npx nuxt typecheck

你也可以在 nuxt.config 文件中使用 typescript.typeCheck 选项来在构建或开发时启用类型检查：

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    typeCheck: true,
  },
})

自动生成的类型

Nuxt 项目依赖于自动生成的类型才能正常工作。这些类型存储在 .nuxt 目录中，当你运行开发服务器或构建应用时会生成它们。你也可以通过运行 nuxt prepare 命令手动生成这些文件。

.nuxt 目录中的生成的 tsconfig.json 文件包含了你的项目的 推荐基础 TypeScript 配置，并引用了 自动导入、API 路由类型、诸如 #imports、~/file 或 #build/file 这类路径别名等内容。

Nuxt 依赖此配置，且 Nuxt 模块 也可以扩展它。因此，不推荐直接修改你的 tsconfig.json 文件，因为这样可能会覆盖重要设置。建议通过 nuxt.config.ts 扩展它。在这里了解如何扩展配置。
观看 Daniel Roe 讲解内置 Nuxt 别名的视频。

项目引用

Nuxt 使用 TypeScript 项目引用 来提升类型检查性能并提供更好的 IDE 支持。该功能允许 TypeScript 将你的代码库拆分成更小、更易管理的部分。

Nuxt 如何使用项目引用

当你运行 nuxt dev、nuxt build 或 nuxt prepare 时，Nuxt 会为应用的不同部分生成多个 tsconfig.json 文件。

  • .nuxt/tsconfig.app.json - 用于 app/ 目录下的应用代码的配置
  • .nuxt/tsconfig.node.json - 用于 nuxt.config.ts 及其他上下文外文件的配置
  • .nuxt/tsconfig.server.json - 用于服务器端代码的配置（如适用）
  • .nuxt/tsconfig.shared.json - 用于应用和服务器上下文共享的代码（如类型和非环境特定工具）

这些文件均配置了适当的依赖引用，以为其特定上下文提供最佳的类型检查。

为了向后兼容，Nuxt 仍会生成 .nuxt/tsconfig.json。不过，我们推荐使用新的配置文件（.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json 等）进行 TypeScript 项目引用，以获得更好的类型安全和性能。此旧版文件将在未来 Nuxt 版本中移除。

项目引用的优势

  • 构建更快：TypeScript 可以跳过对未更改项目的重新构建
  • IDE 性能更好：你的 IDE 可提供更快的 IntelliSense 和错误检查
  • 隔离编译：应用某部分出错不会阻止其他部分编译
  • 依赖管理更清晰：每个项目显式声明其依赖

使用项目引用增强类型

由于项目被划分为多个类型上下文，因此在正确的上下文中增强类型很重要，以确保它们被正确识别。TypeScript 不会识别放置在这些目录之外的增强类型，除非它们被显式包含在相应的上下文中。

例如，如果你想为 app 上下文增强类型，增强文件应放在 app/ 目录。

类似地：

  • 对于 server 上下文，将增强文件放在 server/ 目录。
  • 对于在应用和服务器之间共享的类型，将文件放在 shared/ 目录。
在模块作者指南中阅读更多关于从上下文之外的文件增强特定类型上下文的内容。

严格检查

TypeScript 提供了某些检查，以便为你的程序提供更多安全性和分析。

当启用 typescript.typeCheck 选项时，Nuxt 默认开启 严格检查 ，以提供更高的类型安全。

如果你正在将代码库迁移到 TypeScript，可能希望临时通过在 nuxt.config 中将 strict 设置为 false 来禁用严格检查：

nuxt.config.ts
export default defineNuxtConfig({
  typescript: {
    strict: false,
  },
})