typescript - 如何在带有打字稿的 vue.js 中使用 javascript 组件？

Question

我在项目中定义了一个组件，并希望像这样公开，以便在另一个项目中使用：

import ToastNotification from '../ToastNotification';
import Api from './api';

const VueToast = (Vue, options = {}) => {
  const methods = Api(Vue, options);
  Vue.$toast = methods;
  Vue.prototype.$toast = methods;
};

ToastNotification.install = VueToast;

export default ToastNotification;

在 index.js 我声明：

import VueToast from './toast/js/index';

Vue.use(VueToast);

在另一个项目中，我 npm 将此项目安装为库，但 this.$toast('message') 无法识别。它说“类型''上不存在属性'$toast'”

我提到我设法在项目内部使用了另一个类'this.$toast('')'，但无法在另一个项目中管理。该组件是使用 Javascript 在 Vue.js 中实现的，我正在尝试在另一个使用支持 typescript 的 Vue.js 的项目中使用。

我已经尝试在 main.ts 中的项目中声明，但仍然无法正常工作：

从'/src/components/toast/js/index'导入VueToast；

Vue.use(VueToast);

你知道我忘了申报什么吗？

标签： typescriptvue.jsvue-component

Answer 1

要添加$toast到 Vue 组件实例类型，请在文件中声明以下类型扩充.d.ts（例如， in src/shims-vue.d.ts）：

视图 2：

import Vue from 'vue'

declare module 'vue/types/vue' {
  interface Vue {
    $toast: (msg: string) => void;
  }
}

视图 3：

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $toast: (msg: string) => void;
  }
}