我尝试在我的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
}
}
2条答案
按热度按时间bxgwgixi1#
使用安装latest version
然后尝试将以下代码添加到main.ts
a8jjtwal2#