关于 Vue 3 + TypeScript 和 Augmenting-Types-for-Use-with-Plugins 的问题 [英] Question about Vue 3 + TypeScript and Augmenting-Types-for-Use-with-Plugins
问题描述
有谁知道应该如何使用 Vue3 和 TypeScript 实现类型增强的工作示例?我一直在尝试遵循 Vue2 文档，在 Vue3 中使用相同的文档但没有成功，并且在过去 3 个小时的搜索中没有任何结果.
vue-class-component 模块中的 Vue 对象似乎应该增加才能工作，但是如何?
我的实现类似于以下:
有什么建议吗?
https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins
import { App, Plugin } from vue";导出接口 IHelloModule {sayHello: (name: string) =>细绳;}export const helloPlugin: Plugin = (app: App, options) =>{const helloModule:IHelloModule = {sayHello:函数(名称:字符串){return `你好 ${name}`;}};app.provide("$hello", helloModule);};import { Vue } from 'vue-class-component';import { IHelloModule } from "@/hello";声明模块vue/types/vue"{界面 Vue {$hello: IHelloModule;}}声明模块vue/types/vue"{接口 VueConstructor {$auth: IHelloModule;}}<div class="home">.....</模板><script lang="ts">import { Options, Vue } from 'vue-class-component';@选项({成分: {},})导出默认类 Home 扩展 Vue {安装(){console.log(this.$hello.sayHello(世界"))^^^^^^^^^^^^^^^^^^^^^^^^^^TS 和 vue-cli 都不承认这一点}}
import { createApp } from vue";从./App.vue"导入应用程序；从./hello"导入 { helloPlugin };从./router"导入路由器；创建应用程序(应用程序).use(路由器，helloPlugin).mount(#app");据我所知，vue-class-component 尚不完全支持 Vue 3.他们仍在讨论库中的修改.所以，我不知道下面的例子是否适用于它，但这是我为增加插件类型所做的.
hello.plugin.ts
import { App } from vue";导出接口 IHelloModule {sayHello: (name: string) =>细绳;}导出默认{安装:(应用程序:应用程序)=>{const helloModule: IHelloModule = {sayHello:函数(名称:字符串){return `你好 ${name}`;}};app.config.globalProperties.$hello = helloModule;}}声明模块@vue/runtime-core"{//绑定到`this`关键字接口 ComponentCustomProperties {$hello: IHelloModule;}}我在插件文件中声明了类型，但你也可以在 shims-vue.d.ts 文件中声明它们.
main.ts
import { createApp } from vue";从./App.vue"导入应用程序；从./router"导入路由器；从./hello.plugin"导入你好；创建应用程序(应用程序).使用(路由器).use(你好).mount(#app");Hello.vue
Does anyone know of a working example of how the type augmentation should be implemented with Vue3 and TypeScript? I have been trying follow the Vue2 docs in hoops of using the same in Vue3 with no success and spend the past 3 hours of searching without any results.
It seems that the Vue object in the vue-class-component module should be augmented to work,but how?
My implementation is similar to the following:
Any advice?
https://vuejs.org/v2/guide/typescript.html#Augmenting-Types-for-Use-with-Plugins
import { App, Plugin } from "vue";
export interface IHelloModule {
sayHello: (name: string) => string;
}
export const helloPlugin: Plugin = (app: App, options) => {
const helloModule:IHelloModule = {
sayHello: function(name: string) {
return `Hello ${name}`;
}
};
app.provide("$hello", helloModule);
};
import { Vue } from 'vue-class-component';
import { IHelloModule } from "@/hello";
declare module "vue/types/vue" {
interface Vue {
$hello: IHelloModule;
}
}
declare module "vue/types/vue" {
interface VueConstructor {
$auth: IHelloModule;
}
}
<template>
<div class="home">
.....
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
@Options({
components: {
},
})
export default class Home extends Vue {
mounted() {
console.log(this.$hello.sayHello("World"))
^^^^^^^^^^^^^^^^^^^^^^^^^^
Neither TS nor vue-cli recognize this
}
}
</script>
import { createApp } from "vue";
import App from "./App.vue";
import { helloPlugin } from "./hello";
import router from "./router";
createApp(App)
.use(router, helloPlugin)
.mount("#app");
For what I understand, vue-class-component doesn't fully supports Vue 3 yet. They're still discussing modifications in the library. So, I don't know if the examples below will work with it, but this is what I've done to augment plugin types.
hello.plugin.ts
import { App } from "vue";
export interface IHelloModule {
sayHello: (name: string) => string;
}
export default {
install: (app: App) => {
const helloModule: IHelloModule = {
sayHello: function(name: string) {
return `Hello ${name}`;
}
};
app.config.globalProperties.$hello = helloModule;
}
}
declare module "@vue/runtime-core" {
//Bind to `this` keyword
interface ComponentCustomProperties {
$hello: IHelloModule;
}
}
I declared the type in the plugin file itself, but you can declare them in the shims-vue.d.ts file too.
main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Hello from "./hello.plugin";
createApp(App)
.use(router)
.use(Hello)
.mount("#app");
Hello.vue
<script lang="ts">
import { defineComponent } from "vue";
const Hello = defineComponent({
mounted() {
console.log(this.$hello.sayHello("World"));
}
});
export default Hello;
</script>
这篇关于关于 Vue 3 + TypeScript 和 Augmenting-Types-for-Use-with-Plugins 的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
