TypeScript
Nuxt 完全支持类型,并提供了有用的快捷方式,确保您在编码时能够访问准确的类型信息。
类型检查
出于性能考虑,默认情况下,Nuxt 在运行 nuxt dev
或 nuxt build
时不会进行类型检查。
要在构建或开发时启用类型检查,请将 vue-tsc
和 typescript
安装为开发依赖:
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
然后,运行 nuxt typecheck
命令来检查您的类型:
Terminal
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.json
该文件包含项目的推荐基础 TypeScript 配置,包括 Nuxt 或您所使用模块注入的已解析别名,这样您就可以获得完整的类型支持和像 ~/file
或 #build/file
这样的别名路径的自动补全。
请考虑使用 nuxt.config 中的
imports
部分来包含默认目录以外的目录。这对于自动导入您在整个应用中使用的类型非常有用。Nitro 还会为 API 路由 自动生成类型。此外,Nuxt 还为全局可用的组件和自动导入您的组合函数,以及其他核心功能生成类型。
请注意,从
如果您需要进一步扩展由
./.nuxt/tsconfig.json
扩展的所有选项都会被您在 tsconfig.json
中定义的选项覆盖。
如果您覆盖了例如 "compilerOptions.paths"
这类选项,TypeScript 将不会考虑来自 ./.nuxt/tsconfig.json
的模块解析。这可能导致诸如 #imports
等模块解析无法被识别。
如果您需要进一步扩展由
./.nuxt/tsconfig.json
提供的选项,可以在您的 nuxt.config
中使用 alias
属性。Nuxt 会自动识别并相应地扩展 ./.nuxt/tsconfig.json
。严格检查
TypeScript 提供了某些检查以增强程序的安全性和分析能力。
严格检查 在 Nuxt 中默认启用,以提供更高的类型安全性。
如果您正在将代码库转换为 TypeScript,可能想临时关闭严格检查,可以在 nuxt.config
中将 strict
设置为 false
:
nuxt.config.ts
export default defineNuxtConfig({
typescript: {
strict: false
}
})