猿问

包装 Vue 计算属性和方法,同时在 Vue.extend 构造函数上保留类型签名

我想将所有定义的方法和计算的属性包装在一个对其执行计时的函数中。


我想保留从类型签名派生的 IntelliSense 预测 Vue.extend({...


我未能在维护复杂类型签名的同时创建自己的方法而不必从类型中复制数十个文件vue.d.ts。


我Vue.extend在调用之前通过替换获得了一定的成功,但我宁愿拥有自己的构造函数方法,其具有与 Vue 相同的类型优势。


"noImplicitThis": false笨重但有效的示例,需要在 .tsconfig 中:


<template>

    <div>

        {{ computedValue }}

    </div>

</template>


<script>

    import Vue from 'vue';


    const ext = Vue.extend;

    Vue.extend = function (x: any, ...rest:any[]) {

        const f = x.computed.computedValue;

        console.log(x, rest);

        x.computed.computedValue = function () {

            const start = Date.now();

            const rtn = f.call(this, x, ...rest);

            console.log(`Took ${(Date.now() - start) / 1000} seconds`);

            return rtn;

        }

        return ext.call(this, x, ...rest);

    } as any


    const component = Vue.extend({

        computed: {

            computedValue() {

                return 'passed';

            }

        }

    });

    Vue.extend = ext;

    export default component;

</script>

期望的结果:一个被调用的方法,而不是Vue.extend将计算的属性和方法包装在一个计时器中,同时在组件上保留 IntelliSense


到目前为止的结果:一个庞大的实现,需要在每个组件的实现中进行大量干预才能使用


慕侠2389804
浏览 181回答 1
1回答
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答