Vue-toastification -使用 typescript 扩充vuejs 3中的类型不起作用

0s0u357o  于 2023-01-14  发布在  Vue.js
关注(0)|答案(2)|浏览(146)

我尝试在我的vue 3项目中使用vue toast notification。我面临的问题是vue增强类型。我已经看到其他答案并应用了,但它不适合我这里的错误

TS2339: Property '$toast' does not exist on type 'Vue<unknown, {}, {}>'.

我的测试组件,我尝试从其中调用吐司方法

import { Vue } from "vue-class-component";
export default class Login extends Vue {

  private StoreID = "";
  private StorePassword = "";
  private errorMessage = "";
  testToast(e)
  {
    e.preventDefault();
    const vm = new Vue()
   console.log(vm.$toast)
  }
}

我的Tsconfig.json文件

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "typeRoots": [
      "node_modules/@types",
      "typings/vue.d.ts"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

typings文件夹中的My vue.d.ts。typings文件夹创建在main.ts文件所在的项目根目录下。

// 1. Make sure to import 'vue' before declaring augmented types
import Vue from 'vue'
import VueToast from 'vue-toast-notification';

// 2. Specify a file with the types you want to augment
//    Vue has the constructor type in types/vue.d.ts
declare module 'vue/types/vue' {
  // 3. Declare augmentation for Vue
  interface Vue {
    $toast: VueToast
  }
}
bxgwgixi

bxgwgixi1#

使用安装latest version

npm install --save vue-toastification@next

然后尝试将以下代码添加到main.ts

import { createApp } from 'vue'
import App from './App.vue'
import Toast from 'vue-toast-notification';

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties  {
      $toast: Toast
      
     }
   }
let app=createApp(App)

app.use(Toast,{})

app.mount('#app')
a8jjtwal

a8jjtwal2#

**yarn add vue-toastification@next**


  import { useToast } from "vue-toastification";
        
        data() {
            return {
                toast: useToast(),
        },
    methods:{
    async deleteStreams(id, index) {
          await $http.$delete("/admin/library/streams/" + id).then((response) => {
            if (response.success) {
              this.streams.splice(index, 1);
              this.toast.success("Deleted Successfully");
              return;
            }
            this.toast.error(response.message);
          });
        },
    
    }

相关问题