WebStorm not recognizing methods of reactive objects

Question

I am using WebStorm 2024.3.1.1 on MacOS for my current Vue.js project, but the recognition of class methods of reactive objects does not work as expected, i.e. WebStorm is displaying "unresolved function"-warnings on code that actually works.

For example, in the code below, WebStorm doesn't recognize the sayHello() method. I understand that Vue.js wraps objects with UnwrapNestedRef<Person>, but is there a way to make WebStorm recognize the class methods?

<script setup>
class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    return `Hello ${this.name}!`;
  }
}

const p = reactive(new Person("Florian"));
p.sayHello(); // Unresolved function or method 'sayHello()'
</script>
<template>
...
</template>

This looks like an issue with IDE that needs to be discussed with the support. This may depend on TS version used by IDE, which is unknown. The workaround for inferred type is reactive<Person>(new Person("Florian")), check if this changes anything — Estus Flask
– Estus Flask, Commented Jan 25 at 10:45
Thank you very much, this actually solves the problem for me! — Florian Wörister
– Florian Wörister, Commented Jan 26 at 7:43
I posted it as an answer in case this helps someone else. <script setup> doesn't contain "lang", which make the use of TS code invalid. Make sure it's not the problem on your side — Estus Flask
– Estus Flask, Commented Jan 26 at 11:48

Estus Flask · Accepted Answer · 2025-01-26 11:45:04Z

It's not only that JavaScript code is workable, but also that the type is correct in TypeScript. UnwrapNestedRef<Person> should result in p having sayHello member.

This is an abnormal situation that needs to be solved with JetBrains support. The way it works in IDE depends on TypeScript version that it uses, which is configurable per project. TypeScript is known to silently cause type problems in case of version incompatibility.

The workaround is to explicitly specify the type, it needs to take ref unwrapping into account in case there's any.

Since reactive is a generic that allows for a parameter to specify returned type, this is the preferable way:

const p = reactive<Person>(new Person("Florian"));

Depending on how bad the problem with type incompatibility is, this may require to assert a type. The other ways in decending order of type safety:

const p: Person = reactive(new Person("Florian"));
const p = reactive(new Person("Florian")) as Person;
const p = reactive(new Person("Florian")) as unknown as Person;

Notice that neither of them are necessary under normal circumstances.

Collectives™ on Stack Overflow

WebStorm not recognizing methods of reactive objects

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