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

Posted 2023-02-16

【中文标题】“类型上不存在属性 $notify” - 无法在 Vue 应用程序上使用 npm 包

【英文标题】："Property $notify does not exist on type" - Can't use npm package on Vue App

【发布时间】：2021-11-29 13:06:03

【问题描述】：

我正在使用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 文件中导入组件，但它无法识别类型。我究竟做错了什么？我找不到任何解决方案...

谢谢。

【问题讨论】：

从组件上下文中尝试Vue.notify

@apokryfos 我忘了说我也试过用那个来称呼它，但是得到Property 'notify' does not exist on type 'VueConstructor<Vue>'.Vetur(2339)这个。

确保文件main.ts也被导入或再次执行Vue.use

@Layan 我无法重现此demo 中的问题。什么工具报告该错误？

【参考方案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 中

【讨论】：

我的是一个 .Vue 单组件文件，即使我尝试这样做，我也会收到相同的消息：'VueConstructor'.Vetur(第2339章

我在 src 文件夹中找到了这个文件：shims-vue.d.ts，里面有那个代码，所以我假设已经完成了？这是一个样板，我没有自己设置。

正如我所说，将其移至/typings 位置并检查

我不确定我的项目中是否有这个...我也不完全知道 /typings 是什么。对不起。