时间戳

首页 > 解决方案 > 将 CoreUI 图标导入 Vue.js TypeScript 项目

typescript - 将 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）=> VNode；}' 不可分配给“ThisTypedComponentOptionsWithArrayProps”类型的参数。对象字面量只能指定已知属性，并且在类型“ThisTypedComponentOptionsWithArrayProps”中不存在“图标”。重载 2 of 3，'(options?: ThisTypedComponentOptionsWithRecordProps | undefined): CombinedVueInstance>'，给出了以下错误。'{ router: VueRouter; 类型的参数 商店：商店；图标：{cilHome：字符串[]；cilSettings：字符串[]；}; 渲染：（h：CreateElement) => VNode; }' 不可分配给“ThisTypedComponentOptionsWithRecordProps”类型的参数。对象字面量只能指定已知属性，并且在类型“ThisTypedComponentOptionsWithRecordProps”中不存在“图标”。重载 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>> | undefined): CombinedVueInstance<...>'，给出了以下错误。'{ router: VueRouter; 类型的参数 商店：商店；图标：{cilHome：字符串[]；cilSettings：字符串[]；}; 渲染：（h：CreateElement）=> VNode；}' 不可分配给类型为“ComponentOptions、DefaultMethods、DefaultComputed、PropsDefinition>、Record<...>>”的参数。对象字面量只能指定已知属性，

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

标签： typescriptvue.jsiconscore-ui

解决方案

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

import Vue, { ComponentOptions } from "vue";

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

推荐阅读