Using defineComponent with options API change property and data types

This issue has been tracked since 2022-09-15.

Version

2.7.10

Reproduction link

https://codesandbox.io/s/vue

Steps to reproduce

The following code illustrates the problem. Changing back to the Vue.extend() API makes the error disappear.

<script lang="ts">
import Vue, { defineComponent } from 'vue';

class Foo {
  private readonly _bar: string;

  constructor(bar: string) {
    this._bar = bar;
  }
}

function process(foo: Foo) {}

// No error with the previous API
// export default Vue.extend({
export default defineComponent({
  name: 'Test',
  data() {
    return {
      foo: new Foo('none'),
    };
  },
  methods: {
    process() {
      return process(this.foo); // Argument of type '{}' is not assignable to parameter of type 'Foo'.
    },
  },
});
</script>

What is expected?

Properties and data preserve type

What is actually happening?

Error Argument of type '{}' is not assignable to parameter of type 'Foo'.


Using defineComponent in Vue 2.7 with the options API really helps migration.

Although the Vue.extend() API was reporting the correct type for classes with private members, now the defineComponent API reports an unwrapped type and causes typescript errors.

Workarounds?

  • How to handle this situation?
  • Does Vue provides a marker interface for classes with hidden state that have been constructed to be compatible with reactivity?
More Details About Repo
Owner Name vuejs
Repo Name vue
Full Name vuejs/vue
Language TypeScript
Created Date 2013-07-29
Updated Date 2022-10-05
Star Count 199788
Watcher Count 6093
Fork Count 32878
Issue Count 590

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date