问题:将 CoreUI 图标导入 Vue.js TypeScript 项目

我正在使用 TypeScript 中的 CoreUI 构建一个 Vue.js 应用程序。我目前遇到的问题与 CoreUI 的图标有关。我的应用程序运行良好并呈现图标,但 VSC 抱怨特定行:

icons: { cilHome, cilSettings },

这是我的 main.ts 的完整代码:

import Vue from "vue";
import App from "./App.vue";
import CoreuiVue from "@coreui/vue";
import { cilPencil, cilSettings } from "@coreui/icons";
import router from "./router";
import store from "./store";

Vue.config.productionTip = false;

Vue.use(CoreuiVue);

new Vue({
  router,
  store,
  icons: { cilPencil, cilSettings },
  render: h => h(App)
}).$mount("#app");

VSC 错误文本:

没有重载匹配此调用。 Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps | undefined): CombinedVueInstance>',给出了以下错误。 '{ router: VueRouter; 类型的参数商店:商店;图标:{cilHome:字符串[]; cilSettings:字符串[]; };渲染:(h:CreateElement)u003d> VNode; }' 不可分配给“ThisTypedComponentOptionsWithArrayProps”类型的参数。对象字面量只能指定已知属性,并且在类型“ThisTypedComponentOptionsWithArrayProps”中不存在“图标”。重载 2 of 3,'(options?: ThisTypedComponentOptionsWithRecordProps | undefined): CombinedVueInstance>',给出了以下错误。 '{ router: VueRouter; 类型的参数商店:商店;图标:{cilHome:字符串[]; cilSettings:字符串[]; };渲染:(h:CreateElement)u003d> VNode; }' 不可分配给“ThisTypedComponentOptionsWithRecordProps”类型的参数。对象字面量只能指定已知属性,并且在类型“ThisTypedComponentOptionsWithRecordProps”中不存在“图标”。重载 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>> | undefined): CombinedVueInstance<...>',给出了以下错误。 '{ router: VueRouter; 类型的参数商店:商店;图标:{cilHome:字符串[]; cilSettings:字符串[]; };渲染:(h:CreateElement)u003d> VNode; }' 不可分配给类型为“ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<...>>”的参数。对象字面量只能指定已知属性,并且“组件选项、默认方法、默认计算、道具定义>、记录<...>>”类型中不存在“图标”。ts(2769) 窥视问题没有可用的快速修复

我认为这是 TypeScript 类型问题,因为代码在 EcmaScript 中构建时没有问题:https://github.com/coreui/coreui-free-vue-admin-template。如果您能分享您在此类问题上的经验,我将不胜感激。谢谢!

解答

通过创建自定义类型文件 xxx.d.ts,我能够解决该错误:

import Vue, { ComponentOptions } from "vue";

declare module "vue/types/options" {
  interface ComponentOptions<V extends Vue> {
    icons?: any;
  }
}