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

No overload matches this call. Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps | undefined): CombinedVueInstance>', gave the following error. Argument of type '{ router: VueRouter; store: Store; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithArrayProps'. Object literal may only specify known properties, and 'icons' does not exist in type 'ThisTypedComponentOptionsWithArrayProps'. Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps | undefined): CombinedVueInstance>', gave the following error. Argument of type '{ router: VueRouter; store: Store; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ThisTypedComponentOptionsWithRecordProps'. Object literal may only specify known properties, and 'icons' does not exist in type 'ThisTypedComponentOptionsWithRecordProps'. Overload 3 of 3, '(options?: ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error. Argument of type '{ router: VueRouter; store: Store; icons: { cilHome: string[]; cilSettings: string[]; }; render: (h: CreateElement) => VNode; }' is not assignable to parameter of type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'. Object literal may only specify known properties, and 'icons' does not exist in type 'ComponentOptions, DefaultMethods, DefaultComputed, PropsDefinition>, Record<...>>'.ts(2769) Peek Problem No quick fixes available

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

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

Import CoreUI icons into Vue.js TypeScript project

icons

typescript

vue.js

core-ui