关于 Vue 3 + TypeScript 和 Augmenting-Types-for-Use-with-Plugins 的问题

Posted 2023-02-22

【中文标题】关于 Vue 3 + TypeScript 和 Augmenting-Types-for-Use-with-Plugins 的问题

【英文标题】：Question about Vue 3 + TypeScript and Augmenting-Types-for-Use-with-Plugins

【发布时间】：2021-01-15 00:14:31

【问题描述】：

有谁知道应该如何使用 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";

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");

【参考方案1】：

据我了解，vue-class-component 还不完全支持 Vue 3。它们仍然是库中的discussing 修改。所以，我不知道下面的例子是否适用，但这是我为增加插件类型所做的。

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;
  

我在插件文件本身中声明了类型，但您也可以在shims-vue.d.ts 文件中声明它们。

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");

你好.vue

<script lang="ts">
import  defineComponent  from "vue";

const Hello = defineComponent(
  mounted() 
    console.log(this.$hello.sayHello("World"));
  
);

export default Hello;
</script>

【讨论】：

我使用了其中一个 CLI 模板，组件 HelloWorld 是这样写的：class HelloWorld extends Vue msg!: string; 。在里面，我定义了mounted 函数，编译器抛出了this 关键字上不存在$ 变量（您的示例中的$hello）的错误。我是 Vue 新手，所以我不确定自己缺少什么，也没有找到太多 Vue + TS + 插件的资源。

@RodrigoGomez-Palacio 抱歉，之前没有看到您的评论。也许是因为您使用的是类组件而不是函数组件？我不再使用 Vue，但据我所知，建议将 defineComponent 与 Vue 3 + TS 一起使用。