TypeScript
类型检查
¥Type-checking
默认情况下,出于性能原因,Nuxt 在运行 nuxi dev
或 nuxi build
时不会检查类型。
¥By default, Nuxt doesn't check types when you run nuxi dev
or nuxi build
, for performance reasons.
要在构建或开发时启用类型检查,请将 vue-tsc
和 typescript
安装为开发依赖:
¥To enable type-checking at build or development time, install vue-tsc
and typescript
as development dependency:
npm install --save-dev vue-tsc typescript
yarn add --dev vue-tsc typescript
pnpm add -D vue-tsc typescript
bun add -D vue-tsc typescript
然后,运行 nuxi typecheck
命令检查你的类型:
¥Then, run nuxi typecheck
command to check your types:
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:
export default defineNuxtConfig({
typescript: {
typeCheck: true
}
})
自动生成的类型
¥Auto-generated Types
当你运行 nuxi dev
或 nuxi 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 dev
或 nuxi 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
.
imports
部分来包含默认目录以外的目录。这对于自动导入你在应用中使用的类型非常有用。¥Read more about how to extend this configuration.
./.nuxt/tsconfig.json
扩展的选项都将被 tsconfig.json
中定义的选项覆盖。用你自己的配置覆盖 "compilerOptions.paths"
等选项将导致 TypeScript 不考虑 ./.nuxt/tsconfig.json
中的模块解析。这可能导致模块解析(例如 #imports
)无法识别。:br 如果你需要进一步扩展
./.nuxt/tsconfig.json
提供的选项,你可以在 nuxt.config
中使用 alias
property。nuxi
会选择这些选项并相应地扩展 ./.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
:
export default defineNuxtConfig({
typescript: {
strict: false
}
})