萌新求助，Vue库模式的ts声明问题

Question

萌新最近学习 element 源码， 想自己模仿个 遇到瓶颈 主要集中在ts声明方面

toast.vue 页面

<template>
  <div class="xyl-toast" v-show="visible">{{msg}}</div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

@Component({
  name: "XylToast"
})
export default class XylToast extends Vue {
   msg: string = "";
   visible: boolean = false;
   
   mounted(){
     setTimeout(()=>{
       this.visible = false;
     },3000)
   }

}
</script>

import Vue from 'vue';
import XylToast from './src/toast.vue'

let XylToastConstructor = Vue.extend(XylToast);

let instance;

const Toast = function (msg: string) {

    instance = new XylToastConstructor({
        data: { msg }
    });
    instance.$mount();
    document.body.appendChild(instance.$el);
    
    instance.visible = true;

}

export default Toast;

这个如何解决呢，

Answer 1

Vue.extend没必要 因为你export出来的那个class已经extends了
以下是我的办法 ，但是我觉得会有更好的解决方案