Currently, I am trying to encapsulate all of my defined methods and computed properties within a function that tracks their execution time.
I aim to keep the IntelliSense predictions intact, which are based on the type signature of Vue.extend({...
However, I have struggled to create my own method that can handle the complex type signature without resorting to copying numerous files from the vue.d.ts typings.
Although I have had some success by substituting Vue.extend before invoking it, my preference would be to have my own constructor method with the same typing advantages as Vue's.
Here is an example that works but is bulky, requiring "noImplicitThis": false in .tsconfig:
<template>
<div>
{{ computedValue }}
</div>
</template>
<script lang="ts">
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>
My goal is to have a method that replaces Vue.extend, wrapping the computed properties and methods in a chronometer while still maintaining IntelliSense for the component.
As of now, my implementation is cumbersome and requires significant intervention in each component's implementation to be implemented.