WebStorm not recognizing methods of reactive objects

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>

Solution

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.