Learn Nuxt with a Collection of 100+ Tips!

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
} })