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 dev 或 nuxt build 时，Nuxt 会生成以下文件以支持 IDE 类型（和类型检查）

.nuxt/nuxt.d.ts

此文件包含您使用的任何模块的类型，以及 Nuxt 所需的关键类型。您的 IDE 应该会自动识别这些类型。

文件中的某些引用指向仅在您的 buildDir (.nuxt) 中生成的文件，因此要获得完整的类型，您需要运行 nuxt dev 或 nuxt build。

.nuxt/tsconfig.app.json

此文件包含您项目的推荐基本 TypeScript 配置，包括 Nuxt 或您使用的模块注入的已解析别名，因此您可以获得别名（如 ~/file 或 #build/file）的完整类型支持和路径自动完成功能。

考虑使用 nuxt.config 的 imports 部分来包含默认目录之外的目录。这对于自动导入您在整个应用程序中使用的类型很有用。

阅读更多关于如何扩展此配置的信息.

观看 Daniel Roe 解释内置 Nuxt 别名的视频。
Nitro 还会为 API 路由自动生成类型。此外，Nuxt 还为全局可用的组件和从您的组合式函数中自动导入，以及其他核心功能生成类型。
为了向后兼容，Nuxt 仍然会生成 ./.nuxt/tsconfig.json。然而，我们建议使用新的配置文件（.nuxt/tsconfig.app.json、.nuxt/tsconfig.server.json 等）的 TypeScript 项目引用，以获得更好的类型安全和性能。如果您确实从 ./.nuxt/tsconfig.json 扩展，请记住所有选项都将被您 tsconfig.json 中定义的选项覆盖。覆盖诸如 "compilerOptions.paths" 等选项会导致 TypeScript 不考虑模块解析，这可能导致诸如 #imports 等模块解析无法识别。如果您需要进一步扩展选项，可以在 nuxt.config 中使用 alias 属性。Nuxt 会识别它们并相应地扩展生成的 TypeScript 配置。

项目引用

Nuxt 使用TypeScript 项目引用以提高类型检查性能并提供更好的 IDE 支持。此功能允许 TypeScript 将您的代码库分解成更小、更易于管理的部分。

Nuxt 如何使用项目引用

当您运行 nuxt dev 或 nuxt build 时，Nuxt 将为应用程序的不同部分生成多个 tsconfig.json 文件。

  • .nuxt/tsconfig.app.json - 您的应用程序代码配置
  • .nuxt/tsconfig.node.json - 您的 nuxt.config 和模块配置
  • .nuxt/tsconfig.server.json - 服务器端代码配置（适用时）
  • .nuxt/tsconfig.shared.json - 用于应用程序和服务器上下文之间共享的代码（如类型和非环境特定工具）
  • .nuxt/tsconfig.json - 向后兼容的旧配置

这些文件中的每一个都配置为引用适当的依赖项，并为其特定上下文提供最佳的类型检查。

项目引用的好处

  • 更快的构建：TypeScript 可以跳过重建未更改的项目
  • 更好的 IDE 性能：您的 IDE 可以提供更快的智能感知和错误检查
  • 隔离编译：应用程序一部分中的错误不会阻止其他部分的编译
  • 更清晰的依赖管理：每个项目都明确声明其依赖项
项目引用设置由 Nuxt 自动处理。您通常不需要手动修改这些配置，但了解它们的工作原理可以帮助您解决类型检查问题。

使用项目引用增强类型

由于项目分为多个类型上下文，因此在正确的上下文中增强类型以确保它们被正确识别非常重要。

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

类似地

  • 对于 server 上下文，将增强文件放在 server/ 目录中。
  • 对于在应用程序和服务器之间共享的类型，将文件放在 shared/ 目录中。
在这些目录之外增强类型将不被 TypeScript 识别。

严格检查

TypeScript 附带某些检查，以提供更高的程序安全性和分析。

严格检查在 Nuxt 中默认启用，以提供更高的类型安全。

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

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