TypeScript

Nuxt 完全支持类型化，并提供实用的快捷方式，确保您在编码时能够获取准确的类型信息。

类型检查 (Type-checking)

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

要启用构建或开发期间的类型检查，请安装 vue-tsc 和 typescript 作为开发依赖。

npm install --save-dev vue-tsc typescript

然后，运行 nuxt typecheck 命令来检查您的类型。

终端
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 内置别名的视频。

项目引用 (Project References)

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。但我们建议使用 TypeScript 项目引用 和新的配置文件（.nuxt/tsconfig.app.json, .nuxt/tsconfig.server.json 等），以获得更好的类型安全性和性能。此遗留文件将在 Nuxt 的未来版本中被移除。

项目引用的好处

  • 更快的构建速度：TypeScript 可以跳过重新构建未更改的项目。
  • 更好的 IDE 性能：您的 IDE 可以提供更快的 IntelliSense 和错误检查。
  • 隔离编译：应用程序某一部分的错误不会阻止其他部分的编译。
  • 更清晰的依赖管理：每个项目都明确声明其依赖项。

使用项目引用增强类型

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

例如，如果您想增强 app 上下文的类型，增强文件应放置在 app/ 目录中。

同样地：

  • 对于 server 上下文，将增强文件放置在 server/ 目录中。
  • 对于在应用程序和服务端之间共享的类型，请将文件放置在 shared/ 目录中。
请参阅《模块作者指南》中有关从这些上下文之外的文件增强特定类型上下文的更多信息。

严格检查 (Strict Checks)

TypeScript 附带了一些检查功能，旨在为您提供更高的程序安全性和分析能力。

严格检查在 Nuxt 中，当启用 typescript.typeCheck 选项时，严格检查会默认启用，以提供更好的类型安全性。

如果您当前正在将代码库转换为 TypeScript，可以通过在 nuxt.config 中将 strict 设置为 false 来临时禁用严格检查。

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