TypeScript

Nuxt 是完全类型化的，并提供有用的快捷方式，以确保您在编码时能够获得准确的类型信息。

类型检查

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

要在构建或开发时启用类型检查，请将 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 别名的视频。

项目引用

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,
  },
})