社区首页 >问答首页 >将CoreUI图标导入Vue.js TypeScript项目

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

Stack Overflow用户

提问于 2020-03-02 23:40:52

回答 1查看 1.3K关注 0票数 2

我正在用CoreUI在TypeScript上构建一个应用程序。我目前遇到的问题与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错误文本：

没有重载与此调用匹配。重载3中的1，‘(选项？：未定义的ThisTypedComponentOptionsWithArrayProps？)：CombinedVueInstance>'，给出以下错误。类型'{路由器: VueRouter；存储:存储；图标：{ cilHome: string[]；cilSettings: string[]；}；呈现：(h: CreateElement) => VNode；}‘的参数不能分配给类型'ThisTypedComponentOptionsWithArrayProps’的参数。对象文字可能只指定已知的属性，并且‘图标’在'ThisTypedComponentOptionsWithArrayProps‘类型中不存在。重载3中的2，‘(选项？：未定义的ThisTypedComponentOptionsWithRecordProps？)：CombinedVueInstance>'，给出以下错误。类型'{路由器: VueRouter；存储:存储；图标：{ cilHome: string[]；cilSettings: string[]；}；呈现：(h: CreateElement) => VNode；}‘的参数不能分配给类型'ThisTypedComponentOptionsWithRecordProps’的参数。对象文字只能指定已知的属性，类型'ThisTypedComponentOptionsWithRecordProps‘中不存在“图标”。重载3中的3，‘’(选项？：ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<...>>财政未定义)：CombinedVueInstance<.>‘，给出了以下错误。类型'{路由器: VueRouter；存储:存储；图标：{ cilHome: string[]；cilSettings: string[]；}；呈现：(h: CreateElement) => VNode；}‘的参数不能分配给'ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<.>>类型的参数。对象文字只能指定已知的属性，类型'ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<.>>‘..ts(2769)中不存在“图标”。

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

core-ui

typescript

vue.js

icons

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-03 14:46:04

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

import Vue, { ComponentOptions } from "vue";

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