“类型上不存在属性 $notify” - 无法在 Vue 应用程序上使用 npm 包

Question

我正在使用this npm package 在我的 Vue 应用程序中发送通知。在按照说明操作并在main.ts 上添加所需的用法后，我在尝试使用它的功能时不断得到：

    Property '$notify' does not exist on type 'Shop'

ma​​in.ts：

import Vue from 'vue'
import Notifications from 'vue-notification'
import App from './App.vue'

Vue.use(Notifications)

new Vue({
  render: h => h(App)
}).$mount('#app')

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Character from "./Character.vue";
import Vendor from "./Vendor.vue";

@Component<Shop>({
  components: {
    Character,
    Vendor
  },
})
export default class Shop extends Vue {
  sellItem(itemID) {
    this.$notify({
      title: 'Important message',
      text: 'Hello user!'
    });
  }
}
</script>

我尝试在 .vue 文件中导入组件，但它无法识别类型。我究竟做错了什么？我找不到任何解决方案...

谢谢。

Answer 1

添加 shim 分型文件

您需要一个导入和重新导出“Vue”类型的文件，它被命名为 vue-file-import.d.ts，但在互联网上的其他地方通常称为 vue-shim.d.ts。不管名字，需要的内容都是一样的：

// vue-file-import.d.ts

declare module "*.vue" {
   import Vue from "vue";
   export default Vue;
}

尝试将上述文件放在/src 位置。但有时当你四处走动时，它可能不起作用，所以我建议你把它放在/typings location 中