Vant 按需引入导致 Typescript,eslint 报错问题

目录

  • 1,按需引入问题
  • [2,Typescript 报错解决](#2,Typescript 报错解决)
  • [3,eslint 报错解决](#3,eslint 报错解决)

1,按需引入问题

vant4 通过 按需引入的配置 使用组件时,会同时将样式也自动导入。所以可直接使用相关的 API 和组件,不会有问题。比如:

js 复制代码
showToast('提示内容');

但如果在按需引入配置的基础上,又再次导入

js 复制代码
import { showToast } from 'vant';

showToast('提示内容');

同时没有在 src/main.ts 中导入相关样式文件,使用时样式就会出问题

js 复制代码
import "vant/es/toast/style";

解决:2种方式不要混用。

2,Typescript 报错解决

通过按需引入的方式使用相关 API 时,在 .ts 文件中会有如下报错,因为没有显示导入,

一般来说,Typescript 的这个报错,可手动添加类型声明,声明使用了的全局变量即可。

解决

通过 Vite 配置按需引入后,会在项目根目录下生成 auto-imports.d.ts

ts 复制代码
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {
	const showToast: (typeof import("vant/es"))["showToast"];
}

这就是我们需要的类型声明文件,把它添加到 tsconfig.json 中即可。

json 复制代码
{
	// ...
	"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"]
}

3,eslint 报错解决

同样的,因为没有显示导入,eslint 检查时也会有如下报错:

解决 :在 .eslintrc.json 中设置全局变量即可。

json 复制代码
{
	// ...
	"globals": {
		"showToast": "readonly"
	}
}

以上。

相关推荐
liangshanbo12153 小时前
在React中构建自己的自定义Hooks:获取数据的简单指南
前端·react.js·前端框架
【D'accumulation】3 小时前
JavaScript的生成器与组合学习
开发语言·前端·javascript·学习
Li_Ning213 小时前
【react】开发常用hooks统计
前端·javascript·react.js
GISer_Jing3 小时前
React事件机制详解
前端·javascript·面试
IT农民工~5 小时前
《网络基础之 HTTP 协议:常见 HTTP 方法详解》
服务器·前端·网络·网络协议·http·html5
Dovir多多6 小时前
渗透测试入门学习——使用python脚本自动跟踪csrf_token实现对网站登录界面的暴力破解
前端·python·安全·web安全·网络安全·php·csrf
余生H6 小时前
前端的全栈混合之路Meteor篇:分布式数据协议DDP深度剖析
前端·javascript·分布式·rpc·全栈·meteor
l1x1n06 小时前
No.15 笔记 | CSRF 跨站请求伪造
前端·笔记·csrf
..undefined6 小时前
package.json配置
前端·json
szx的开发笔记6 小时前
使用node+prisma+socket+vue3实现一个群聊功能,拓展功能:使用lottie实现入场动画
前端·node.js