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

Question

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

icons: { cilHome, cilSettings },

这是我主要的全部代码：

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错误文本：

没有与此调用匹配的重载。重载第1个，共3个，"(options？：ThisTypedComponentOptionsWithArrayProps|undefined(：CombinedVueInstance>"，给出以下错误。类型为"｛router:VueRouter；store:store；icons:｛cilHome:string[]；cilSettings:string[]；｝"的参数；render:(h:CreateElement(=>VNode；｝'不可分配给"ThisTypedComponentOptionsWithArrayProps"类型的参数。对象文字只能指定已知的属性，并且类型"ThisTypedComponentOptionsWithArrayProps"中不存在"icons"。重载第2个(共3个(，"(选项？：ThisTypedComponentOptionsWithRecordProps|undefined(：CombinedVueInstance>"，给出以下错误。类型为"｛router:VueRouter；store:store；icons:｛cilHome:string[]；cilSettings:string[]；｝"的参数；render:(h:CreateElement(=>VNode；｝'不可分配给"ThisTypedComponentOptionsWithRecordProps"类型的参数。对象文字只能指定已知的属性，并且类型"ThisTypedComponentOptionsWithRecordProps"中不存在"icons"。重载3(共3个(，'(选项？：ComponentOptions，DefaultMethods，DefaultComputed，PropsDefinition>，Record<…>|undefined(：CombinedVueInstance<…>'，给出以下错误。类型为"｛router:VueRouter；store:store；icons:｛cilHome:string[]；cilSettings:string[]；｝"的参数；render:(h:CreateElement(=>VNode；｝'不可分配给"ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<…>>"类型的参数。对象文字只能指定已知的属性，并且类型"ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<…>>"中不存在"icons"。ts(2769(Peek问题没有可用的快速修复

我认为这是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;
}
}