How to define $refs and $root type in Vuejs with typescript?

Question

I am using Vue3(class type components) with typescript. Please find below code

export default class MyClassextends Vue {
  $refs!: {
    locationSearch: any;
  };
  $root!: {
    $on: any;
  };
}

locationSearch is a reference of an element. I am getting below error:

Property '$refs' will overwrite the base property in 'Vue<unknown, {}, {}>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.

One fix I did was that I used ref elements like this.$refs.locationSearch as any but i think it is not a better solution. Same error for $root. Can you help how to typecast those properties.

Can anyone knows how to fix that?

Arno van Oordt · Accepted Answer · 2022-04-07 05:32:22Z

3

I had the same problem after upgrading to a new TypeScript version (4.3+) which has some breaking changes: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html#breaking-changes

So in your tsconfig.json you need to set the useDefineForClassFields=false to make it work again (without the need to change your code).

This answer elaborates on the cause: https://stackoverflow.com/a/66555044/1572330 But just using declare public $refs:{ ... }; broke my code at runtime, so this won't work with Vue specific code!

answered Apr 7, 2022 at 5:32

Arno van Oordt

3,6507 gold badges43 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to define $refs and $root type in Vuejs with typescript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related