通过 100+ 技巧合集学习 Nuxt!

TypeScript

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

类型检查

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

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

npm install --save-dev vue-tsc typescript

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

终端
npx nuxi typecheck

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

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 还为全局可用的组件和 从您的 composables 自动导入 生成类型,以及其他核心功能。
请记住,从 ./.nuxt/tsconfig.json 扩展的所有选项都将被您在 tsconfig.json 中定义的选项覆盖。覆盖诸如 "compilerOptions.paths" 之类的选项将导致 TypeScript 不考虑来自 ./.nuxt/tsconfig.json 的模块解析。这可能会导致诸如 #imports 之类的模块解析无法被识别。

如果您需要进一步扩展 ./.nuxt/tsconfig.json 提供的选项,您可以使用 alias 属性 文件中的 nuxt.confignuxi 将会获取它们并相应地扩展 ./.nuxt/tsconfig.json

严格检查

TypeScript 附带某些检查,以便为您提供更高的安全性和程序分析。

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

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

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