typescript - 如何在带有 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 install 这个项目作为一个库，但是 this.$toast('message') 不被识别。它说“类型 '' 上不存在属性 '$toast'”

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

我已经尝试在我的项目中声明 main.ts，但仍然不起作用:

import VueToast from'/src/components/toast/js/index';

Vue.use(VueToast);

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

Answer 1

要将$toast 添加到Vue 组件实例类型，声明如下 type augmentation在 .d.ts 文件中(例如，在 src/shims-vue.d.ts 中):

Vue 2:

import Vue from 'vue'

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

export {}

Vue 3:

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

export {}