TypeScript
学习如何在 Nuxt Bridge 中使用 TypeScript。
移除模块
- 移除
@nuxt/typescript-build
:Bridge 提供了相同的功能 - 移除
@nuxt/typescript-runtime
和nuxt-ts
:Nuxt 2 内置了运行时支持
设置 bridge.typescript
import { defineNuxtConfig } from '@nuxt/bridge'
export default defineNuxtConfig({
bridge: {
typescript: true,
nitro: false // 如果迁移到 Nitro 完成,请设置为 true
}
})
更新 tsconfig.json
如果你正在使用 TypeScript,你可以编辑你的 tsconfig.json
文件以享受自动生成的 Nuxt 类型:
tsconfig.json
{
+ "extends": "./.nuxt/tsconfig.json",
"compilerOptions": {
...
}
}
由于
.nuxt/tsconfig.json
是生成的文件,不会被版本控制检查进去,所以你需要在运行测试之前生成该文件。在你的测试之前添加 nuxi prepare
作为一个步骤,否则你会看到 TS5083: Cannot read file '~/.nuxt/tsconfig.json'
的错误。如果你在使用 Volar 时遇到了模板类型推断的问题,你可能还需要将
@vue/runtime-dom
添加为 devDependency。请记住,所有从
./.nuxt/tsconfig.json
继承的选项都将被你的 tsconfig.json
中定义的选项覆盖。
覆盖诸如 "compilerOptions.paths"
这样的选项,将导致 TypeScript 忽略来自 ./.nuxt/tsconfig.json
的模块解析。这可能导致诸如 #imports
这样的模块解析无法被识别。如果你需要进一步扩展 ./.nuxt/tsconfig.json
提供的选项,你可以在你的 nuxt.config
中使用 alias
属性。nuxi
将会获取它们并相应地扩展 ./.nuxt/tsconfig.json
。