Using defineComponent with options API change property and data types

[jfparadis-appomni]

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?