跳到主要内容
Nuxt 中文
开始使用

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。不过，我们建议使用TypeScript 项目引用 配合新的配置文件（.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json 等），以获得更好的类型安全与性能。这个遗留文件将在 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,
  },
})