Vue2.x使用TypeScript写法extends super报错

Question

Super.vue

<script lang="ts">
import Vue from "vue"
import Component from "vue-class-component"

@Component
export default class  extends Vue {
    baseMethod() {
        console.log("I am BaseMethod!");
    }
}
</script>

Test.vue

<template>
    <div class="test">
        hello world
    </div>
</template>

<script lang="ts">
import Component from "vue-class-component"
import Super from "./Super.vue"

@Component
export default class Test extends Super {
    baseMethod() {
        console.log("I am TestMethod!");
        super.baseMethod();
    }
    mounted() {
        this.baseMethod();
    }
}
</script>

只要一运行就会报错:
Test.vue:Cannot read property 'call' of undefined
不能用的话,我怎么调用Super父类的方法呢?

Answer 1

原型原型链的底层在ES6语法中是有setPrototypeOf和getPrototypeOf可以通过主关改变原型链去做，下附逻辑

@Component
export default class Test extends Super {
    baseMethod() {
        console.log("I am TestMethod!");
        let proto = function T(){}
        const temp = Object.setPrototypeOf(proto.prototype, Super);
        Object.getPrototypeOf(temp).extendOptions.methods.baseMethod.call(this)
    }
    mounted() {
        this.baseMethod();
    }
    static staticMethod() {
        console.log("I am TestStaticMethod!");
        super.staticMethod();
    }
}