Typescript, how to annotate a non-reactive instance property?

[nilptr]

In Vue 2, it is common to assign an instance of third part library to a property of this and perform some destroy actions in destroyed hook.

But I get a type error Property 'xxx' does not exist on type 'ComponentPublicInstance<...> when I do this with Vue 3 and Typescript.

How to annotate a non-reactive instance property?

export default defineComponent({
  mounted() {
    // Error: Property 'tooltipInstance' does not exist on type 'ComponentPublicInstance<...>
    this.tooltipInstance = new Tooltip(this.$ref.reference);
  },
  beforeUnmount() {
    this.tooltipInstance?.destroy();
    this.tooltipInstance = null;
  },
});

[skirtles-code]

I don't use TypeScript myself but I've seen this question asked a lot. I haven't yet come across a proper answer.

Whatever the correct approach is, I think it would be worth documenting it in typescript-support.md.

[IlCallo]

#694
Is this the same problem? Cause there are examples on how to do this into the TSDocs of the related interfaces

[NataliaTepluhina]

I believe that non-reactive properties (in Options API) should not be declared in mounted hook but rather explicitly added via $options

export default defineComponent({
  // this can be accessed via this.$options.myProperty
  myProperty: 'test'
});

However, the type of it will be any even if you try to add as string. If you need to access this, like in your example, it can be done with additional mounted change:

export default defineComponent({
  tooltipInstance: null
  mounted() {
    this.$options.tooltipInstance = new Tooltip(this.$ref.reference);
  },
});

[mediafreakch]

@NataliaTepluhina It looks like using the $options property is a bad idea. The following example shows that this leads to shared references when used in mixins.

// mixin that needs a non-reactive instance property to store something
export default {
    myOption: null,
    mounted() {
      if (typeof this.$options.myOption === 'string') {
        console.log('$options are shared! Value is: ', this.$options.myOption)
      }
      
      this.$options.myOption = 'foo';
      
      console.log('mounted')
    }
  }

<!-- component consuming mixin -->
<script>
  import Comp from './Comp.js'
  export default {
    mixins: [Comp],
  }
</script>

<template>
  <div />
</template>

<!-- App where mixin component is used multiple times -->
<script>
  import MixinUser from './MixinUser.vue'
  export default {
    components: { MixinUser },
  }
</script>

<template>
  <MixinUser />
  <MixinUser />
</template>

Unless this is a bug, it would be good to have another way to declare non-reactive properties on an instance with Typescript.