Búsqueda de sitios web

vue.js - ¿Cómo escribir un Vue.component usando TypeScript?


Tengo una función utilitaria que reinicia todo el contenido de datos de algunos componentes de Vue.

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

Y estoy intentando eliminar el tipo "any" de mi Vue.component, ¿es posible? ¿Hay alguna interfaz que apunte a $data de Vue?

Necesito obtener este tipo:

Respuesta #1

Tenga en cuenta que la función resetData requiere un parámetro de instancia de Vue

En este caso importa Vue del paquete "vue" y lo usa como un tipo

import Vue from "vue";

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

El objeto Vue tiene los parámetros $data y $options como se esperaba.

El problema restante es saber qué contiene el objeto $options.data. Una vez que data es un tipo desconocido pero lo estamos usando como una función, en otras palabras: ()=>void. De lo contrario, generará un error de sintaxis.

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

El código final sin errores de compilación será como

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

El código se vuelve un poco verboso, pero ahora está bien ajustado a su propio tipeo