使用 Vue & UI Pro 的仪表板模板

TypeScript

Nuxt 3 完全支持类型,并提供便捷的快捷方式,确保你在编码时能够获得准确的类型信息。

类型检查

默认情况下,Nuxt 在运行 nuxi devnuxi build 时不会进行类型检查,以提高性能。

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

你可能会遇到最新版 vue-tscvite-plugin-checker 的问题,它们在类型检查时被内部使用。目前,你可能需要使用 vue-tsc 的 v1 版本,并关注这些上游问题以获取更新:fi3ework/vite-plugin-checker#306vuejs/language-tools#3969.
yarn add --dev vue-tsc@^1 typescript

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

终端
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 3 所需的关键类型。您的 IDE 应该会自动识别这些类型。

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

.nuxt/tsconfig.json

此文件包含项目推荐的基本 TypeScript 配置,包括 Nuxt 或您正在使用的模块注入的已解析别名,因此您可以获得对别名(如 ~/file#build/file)的完整类型支持和路径自动完成。

详细了解如何扩展此配置.

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 3 中默认启用,以提供更高的类型安全性。

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

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