Nuxt3 中文课程《实战全栈开发简书》限时优惠

TypeScript

Nuxt 3 是完全类型化的,并且提供了有用的快捷方式,确保你在编码时能够获得准确的类型信息。

类型检查

默认情况下,为了性能原因,Nuxt在运行nuxi devnuxi build时不会进行类型检查。

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

yarn add --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 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提供了一些检查功能,以提供更高的程序安全性和分析能力。

一旦你将代码库转换为TypeScript并熟悉了它,你可以开始启用这些检查以提高安全性(了解更多)。

为了启用严格的类型检查,你需要更新nuxt.config

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