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

Question

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

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

Answer 1

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

import Vue, { ComponentOptions } from "vue";

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