¿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
VueConstructor
ya no está disponible en el paquetevue
en Vue 3. En su lugar, se debe usar la funcióndefineComponent
para definir componentes.defineComponent
toma 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 usardefineComponent
para 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
mixins
en 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
StateMixin
en 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.