TypeScript

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

类型检查

默认情况下,出于性能考虑,Nuxt 在运行 nuxi devnuxi build 时不会检查类型。

要在构建或开发时启用类型检查,请将 vue-tsctypescript 安装为开发依赖:

npm install --save-dev vue-tsc typescript

然后,运行 nuxi typecheck 命令以检查您的类型:

Terminal
npx nuxi typecheck

要在构建或开发时启用类型检查,您还可以在 nuxt.config 文件中使用 typescript.typeCheck 选项:

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

自动生成的类型

当您运行 nuxi devnuxi build 时,Nuxt 会生成以下文件以支持 IDE 的类型(和类型检查):

.nuxt/nuxt.d.ts

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

文件中的某些引用指向的文件仅在您的 buildDir.nuxt)中生成,因此为了获取完整的类型定义,您需要运行 nuxi devnuxi build

.nuxt/tsconfig.json

此文件包含您项目的推荐基本 TypeScript 配置,包括由 Nuxt 或您所使用的模块注入的解析别名,因此您可以获得完整的类型支持和路径自动补全,例如 ~/file#build/file

详细了解如何扩展此配置

观看来自 Daniel Roe 的视频,解释内置的 Nuxt 别名。
Nitro 也会为 API 路由 自动生成类型。此外,Nuxt 还会生成全局可用组件和来自您的组合函数的 自动导入 的类型,以及其他核心功能。
请记住,从 ./.nuxt/tsconfig.json 扩展的所有选项将会被您在 tsconfig.json 中定义的选项覆盖。 用您自己的配置覆盖选项,例如 "compilerOptions.paths",将导致 TypeScript 不考虑来自 ./.nuxt/tsconfig.json 的模块解析。这可能会导致某些模块解析,例如 #imports,无法被识别。

如果您需要进一步扩展由 ./.nuxt/tsconfig.json 提供的选项,可以在您的 nuxt.config 中使用 alias 属性nuxi 将会读取这些选项并相应地扩展 ./.nuxt/tsconfig.json

严格检查

TypeScript 带有某些检查,以为您提供更多的安全性和对程序的分析。

在 Nuxt 中,默认启用 严格检查,以提高类型安全性。

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

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