vue.js - Cum să tastezi un Vue.component folosind TypeScript?

Am o funcție utilitară care resetează tot conținutul de date al unui anumit component Vue.

export function resetData(vm: any) {
  Object.assign(vm.$data, vm.$options.data.call(vm));
}

Și încerc să elimin tipul „any” al Vue.component-ului meu, este posibil? Există vreo interfață care să țintească $data din Vue?

Trebuie să obțin acest tip:

Răspuns #1

Rețineți că funcția resetData necesită un parametru de tip instanță Vue

În acest caz, importă Vue din pachetul "vue" și îl folosește ca tip

import Vue from "vue";

export function resetData(vm: Vue) { ... }

Obiectul Vue are parametrii $data și $options așa cum era de așteptat.

Problema rămasă este să știm ce conține obiectul $options.data. Odată ce data este de un tip necunoscut, dar îl folosim ca pe o funcție, cu alte cuvinte: ()=>void. Altfel, va genera o eroare de sintaxă.

Object.assign(vm.$data, (vm.$options.data as ()=>void).call(vm));

Codul final fără erori de compilare va fi ca

import Vue from "vue";
export function resetData(vm: Vue) {
    Object.assign(vm.$data, (vm.$options.data as ()=>void).call(vm));
}

Codul devine puțin verbose, dar acum este bine strâns în ceea ce privește propriul său tipaj