unplugin-auto-import自动导入TS2304警告问题

最新推荐文章于 2024-07-24 16:27:19 发布

莫尘熙

最新推荐文章于 2024-07-24 16:27:19 发布

阅读量7.1k

点赞数 10

分类专栏： Vue3 文章标签： typescript javascript vue.js

本文链接：https://blog.csdn.net/qq_35317490/article/details/123525657

版权

Vue3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在Vite配置中使用AutoImport插件自动导入ElementPlus和其它库，并通过tsconfig.json引入auto-imports.d.ts来解决TS2304错误。详细步骤包括在vite.config.js中设置插件，生成类型声明文件，以及更新tsconfig.json的include字段。

摘要由CSDN通过智能技术生成

1.前置配置

通过vite.config.js配置自动导入API

export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			resolvers: [ElementPlusResolver()],
			imports: ['vue', 'vue-router', 'pinia'],
			eslintrc: {
				enabled: false,
				filepath: './.eslintrc-auto-import.json',
				globalsPropValue: true,
			},
		})
	]
})

生成文件：auto-imports.d.ts

2. TS2304

此时代码中编写时会遇到TS的警告。Cannot find name 'ref'.ts(2304)
在这里插入图片描述

3.解决方案

ts.config.json文件引入声明文件: include中引入auto-imports.d.ts

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "auto-imports.d.ts" // 此处引入该声明文件
  ],
  "references": [{ "path": "./tsconfig.node.json" }]
}