ToB企服应用市场:ToB评测及商务社交产业平台

标题: Vant 按需引入导致 Typescript，eslint 报错题目 [打印本页]

作者: 圆咕噜咕噜 时间: 2024-9-11 09:37
标题: Vant 按需引入导致 Typescript，eslint 报错题目
1，按需引入题目

vant4 通过按需引入的配置使用组件时，会同时将样式主动导入。
所以可直接使用相关的 API 方法，样式也没有题目。比如，

showToast('提示内容');

复制代码

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

import { showToast } from 'vant';
showToast('提示内容');

复制代码

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

import "vant/es/toast/style";

复制代码

所以统一直接使用相关 API 和组件即可。
2，Typescript 报错解决

但在 .ts 文件中，因为没有表现导入，所以会有如下报错：

一般来说，这个题目需要手动添加范例声明文件，增长使用的全局变量即可。
解决：
通过 Vite 配置按需引入后，会在项目根目次下生成 auto-imports.d.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 中即可。

{
// ...
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "auto-imports.d.ts"]
}

复制代码

3，eslint 报错解决

同样的，因为没有表现导入，eslint 检查时也会有如下报错：

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

{
// ...
"globals": {
"showToast": "readonly"
}
}

复制代码

以上。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)