TypeScript

Nuxt 完全支持类型,并提供实用的快捷方式,确保你在编码时能够访问准确的类型信息。

类型检查

¥Type-checking

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

¥By default, Nuxt doesn't check types when you run nuxi dev or nuxi build, for performance reasons.

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

¥To enable type-checking at build or development time, install vue-tsc and typescript as development dependency:

npm install --save-dev vue-tsc typescript

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

¥Then, run nuxi typecheck command to check your types:

Terminal
npx nuxi typecheck

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

¥To enable type-checking at build or development time, you can also use the typescript.typeCheck option in your nuxt.config file:

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

自动生成的类型

¥Auto-generated Types

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

¥When you run nuxi dev or nuxi build, Nuxt generates the following files for IDE type support (and type checking):

.nuxt/nuxt.d.ts

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

¥This file contains the types of any modules you are using, as well as the key types that Nuxt requires. Your IDE should recognize these types automatically.

文件中的某些引用指向仅在你的 buildDir.nuxt)中生成的文件,因此要获得完整的类型信息,你需要运行 nuxi devnuxi build

¥Some of the references in the file are to files that are only generated within your buildDir (.nuxt) and therefore for full typings, you will need to run nuxi dev or nuxi build.

.nuxt/tsconfig.json

此文件包含项目推荐的基本 TypeScript 配置,包括 Nuxt 或你正在使用的模块注入的已解析别名,因此你可以获得完整的类型支持以及 ~/file#build/file 等别名的路径自动补齐功能。

¥This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like ~/file or #build/file.

请考虑使用 nuxt.configimports 部分来包含默认目录以外的目录。这对于自动导入你在应用中使用的类型非常有用。

了解更多关于如何扩展此配置的信息

¥Read more about how to extend this configuration.

观看 Daniel Roe 的视频,其中解释了内置的 Nuxt 别名。¥Watch a video from Daniel Roe explaining built-in Nuxt aliases.
Nitro 也使用 auto-generates types 作为 API 路由。此外,Nuxt 还会为全局可用组件和 auto-imports from your composables 以及其他核心功能生成类型。
请记住,所有从 ./.nuxt/tsconfig.json 扩展的选项都将被 tsconfig.json 中定义的选项覆盖。用你自己的配置覆盖 "compilerOptions.paths" 等选项将导致 TypeScript 不考虑 ./.nuxt/tsconfig.json 中的模块解析。这可能导致模块解析(例如 #imports)无法识别。:br
如果你需要进一步扩展 ./.nuxt/tsconfig.json 提供的选项,你可以在 nuxt.config 中使用 alias propertynuxi 会选择这些选项并相应地扩展 ./.nuxt/tsconfig.json

严格检查

¥Strict Checks

TypeScript 附带某些检查,可为你的程序提供更高的安全性和分析能力。

¥TypeScript comes with certain checks to give you more safety and analysis of your program.

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

¥Strict checks are enabled by default in Nuxt to give you greater type safety.

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

¥If you are currently converting your codebase to TypeScript, you may want to temporarily disable strict checks by setting strict to false in your nuxt.config:

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