Vue version

3.2.45

Link to minimal reproduction

https://gist.github.com/zach2825/bdd461182f0390f6b873c847a733971b

Steps to reproduce

When I ran upgrades in the app, I discovered the Vue.extend method had been deprecated and removed. We use that method extensively throughout our large application. I want to upgrade the app to use Vue 3. I can resolve the other breaking changes without a problem, but there does not seem to be a clear path for updating the code for this implementation.

the examples I could find in documentation and forums were to use the composition API. That is not in the cards since this application is large and the timing is not right. But, the thing in Vue3 was that it's supposed to be backward compatible.

I've included a gist to an example of our current component structure/typescript implementation in hopes there is a package or some clear example of how to use the typescript Props, Methods, Computed, and Data interfaces.

I'm unsure if this is a bug/feature/or something else. The only documentation I could track down is stuff like this https://itnext.io/how-to-migrate-from-vue-2-0-to-vue-3-0-composition-api-with-ts-part-2-replace-73606fb1b296

This is shown in the documentation, which would require a large rewrite:

defineComponent({
  data: (): Data =>  ({

  }),
})

What I'd like to do:

interface TestComponentType {
  data: Data,
  props: Props,
  methods: Methods,
  computed: Computed,
}

defineComponent<{TestComponentType}>({
  data: (): Data => ({
    something: 'testing',
  }),
});
Thank you in advance for your time.

What is expected?

I should be able to use typescript to define the Vue component.

What is actually happening?

I need to find a way to use typescript in the application cleanly.

System Info

System:
    OS: Linux 5.19 Manjaro Linux
    CPU: (24) x64 AMD Ryzen 9 5900X 12-Core Processor
    Memory: 39.15 GB / 62.68 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 18.2.0 - ~/.asdf/installs/nodejs/18.2.0/bin/node
    Yarn: 1.22.19 - ~/.asdf/installs/nodejs/18.2.0/bin/yarn
    npm: 8.9.0 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Firefox: 108.0.1
  npmPackages:
    vue: ^3.2.45 => 3.2.45

Any additional comments?

No response

It looks like you can use defineComponent, the types should be there:

Definitely a bit messier, but can you make a type around this? Like

function extend<Data, Computed, Methods>(d: Data, c: Computed, m: Methods) {
  return defineComponent<{}, {}, Data, ...>({
    data, 
    computed,
  })
}

You could then attach it to the Vue prototype and do Vue.extend.

Not a complete example, but that's one idea, but I haven't tried it myself, yet.