apply additional types to vue component (for vue 2.5)

testComponent.ts

import Vue, { VNode, VNodeChildrenArrayContents } from "vue";
import { VueConstructor } from "vue/types/vue";

export function vueWith<T>(): VueConstructor<Vue & T> {
    return Vue as any;
}

export const TestComponent = vueWith<{
    $refs: { test: HTMLDivElement },
    $scopedSlots: {
        default: (props: { text: string }) => VNodeChildrenArrayContents
    }
}>().extend({
    name: "TestComponent",
    props: {
        text: String
    },
    methods: {
        hello(): void {
            const html = this.$refs.test.innerHTML;
            console.log(html);
        }
    },
    render(h): VNode {
        return h("div", { on: { click: this.hello }, ref: "test" },
            this.$scopedSlots.default({ text: this.text })
        );
    }
});