Vant 按需引入导致 Typescript，eslint 报错题目

1，按需引入题目

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

1. showToast('提示内容');

复制代码

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

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

复制代码

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

1. import "vant/es/toast/style";

复制代码

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

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

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

1. /* eslint-disable */
2. /* prettier-ignore */
3. // @ts-nocheck
4. // noinspection JSUnusedGlobalSymbols
5. // Generated by unplugin-auto-import
6. export {}
7. declare global {
8.         const showToast: (typeof import("vant/es"))["showToast"];
9. }

复制代码

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

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

复制代码

3，eslint 报错解决

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

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

1. {
2.         // ...
3.         "globals": {
4.                 "showToast": "readonly"
5.         }
6. }

复制代码

---

以上。

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