¿Falta el tipo VueConstructor en la versión compatible con Vue3?
Estamos en proceso de migrar una aplicación de Vue 2 con TypeScript a Vue 3. Dado que la aplicación es bastante grande, necesitamos usar @vue/compat para poder migrar nuestra aplicación de manera gradual.
Sin embargo, al intentar seguir de cerca la guía oficial de migración, nos encontramos con problemas en torno al uso del tipo VueConstructor:
error en src/presentation/App.vue:43:25
TS2614: El módulo '"vue"' no tiene un miembro exportado 'VueConstructor'. ¿Querías usar 'import VueConstructor from "vue"' en cambio?
41 |
42 | <script lang="ts">
> 43 | import Vue, { PropType, VueConstructor } from 'vue';
| ^^^^^^^^^^^^^^
44 | import { EventEmitter } from 'events';
45 | import WarningAnonymousEdit from '@/presentation/components/WarningAnonymousEdit.vue';
46 | import Events from '@/events';
Se usa de la siguiente manera en una aplicación de Vue2:
export default ( Vue as VueConstructor<Vue & InstanceType<typeof StateMixin>> ).extend( {
mixins: [ StateMixin ],
name: 'App',
computed: {
isSaving(): boolean {
// methods on ExampleMixin are now known to TypeScript as existing on this
return this.isMethodOnMixin();
},
},
// [...]
} );
El código anterior funciona perfectamente con Vue 2 y permite que TypeScript sepa que los métodos en StateMixin también están disponibles en la clase.
¿Alguna sugerencia sobre cómo hacer que funcione con la versión de migración de Vue3?
PD: El problema #4330 está relacionado pero no es realmente útil.
PPD: Esta pregunta solía preguntar también sobre PropType que no estaba exportado por 'vue', pero eso se resolvió mediante la actualización a TypeScript 4.
davy.ai
El tipo
VueConstructorya no está disponible en el paquetevueen Vue 3. En su lugar, se debe usar la funcióndefineComponentpara definir componentes.defineComponenttoma un objeto argumento con las opciones del componente, incluyendo cualquier propiedad y datos, y devuelve un objeto de componente de Vue 3. Aquí hay un ejemplo de cómo usardefineComponentpara definir el componente anterior:“`import { defineComponent } from ‘vue’;
export default defineComponent( {
name: ‘App’,
props: {
// definir propiedades aquí
},
data() {
// definir datos aquí
return {
isSaving: false,
};
},
computed: {
// definir propiedades calculadas aquí
},
methods: {
// definir métodos aquí
},
} );“`
Para usar mixins, se puede usar la opción
mixinsen el objeto de opciones del componente. Por ejemplo, si tiene unStateMixin, puede definir un componente que lo use de la siguiente manera:“`import { defineComponent } from ‘vue’;
import StateMixin from ‘./StateMixin’;
export default defineComponent( {
name: ‘App’,
mixins: [ StateMixin ],
props: {
// definir propiedades aquí
},
data() {
// definir datos aquí
return {
isSaving: false,
};
},
computed: {
// definir propiedades calculadas aquí
},
methods: {
// definir métodos aquí
},
} );“`
Tenga en cuenta que los mixins se aplican en orden inverso, por lo que las opciones de un mixin de componente anularán las del componente en sí. También tenga en cuenta que se asume que el
StateMixinen el ejemplo anterior es un objeto de mixin válido de Vue 3; si no lo es, es posible que deba actualizarse para que funcione con la API de Vue 3.