Allow generics for Data, Methods, Computed and Props in defineComponent to ease migration from Vue2
What problem does this feature solve?
We have a largish code base in Vue2 and are looking into upgrading it to Vue3. We already use Typescript, but without class components. The way we write components in Vue2 is this:
import Vue from 'vue'
interface Data {
isActive: boolean
}
interface Methods {
updateRemote(payload: ApiPayload, options: ApiOptions): void
}
interface Computed {
selectItems: <string, number>[]
}
interface Props {
mapType: "osm" | "swiss" | "france"
}
export default Vue.extend<Data, Methods, Computed, Props>({
name: 'MyComponent',
props: ["mapType"], // or object
data() {
isActive: false
},
methods: {
updateRemote(payload, options) {}
},
computed: {
selectItems() { }
}
})
This has worked well for us so far. In Vue3, extend
has been removed and the way to go is to use defineComponent
. However, this function doesn't seem to expose the same generics as Vue.extend
did. This makes migration from Vue2 quite costly.
Do you see a way to retrofit defineComponent
with an overload that accepts Data, Methods, Computed and Props as Typescript generics?
Partly related to https://github.com/vuejs/core/issues/3102
What does the proposed API look like?
const myComponent = defineComponent<Data, Methods, Computed, Props>({
...
})