T
TanStack•6mo ago
stormy-gold

Major type inference difference in templates between VS Code and WebStorm

Hey there. We've been using the library quite successfully and honestly it's been a bliss. The issue I have is actually not with TanStack but WebStorm. I've been experiencing a major difference with type inference inside templates between VSCode and WebStorm. And I'm curious if it's just me or it's a bigger issue with WebStorm. Type narrowing in WebStorm seems to be broken 
@if (query.isSuccess()) {
      {{ query.data() }}
    }
@if (query.isSuccess()) {
      {{ query.data() }}
    }
Inside WebStorm the return type of data() is () => ( Todo | undefined ) However, the same snippet inside VS code produces () => Todo If you try to use queryOptions inside WebStorm it gets even worse. For example a query like this 
query = injectQuery(() => queryOptions({
    queryKey: ['todo', 1],
    queryFn: () => lastValueFrom(this.#http.get<Todo>('https://jsonplaceholder.typicode.com/todos/1')),
  }))
query = injectQuery(() => queryOptions({
    queryKey: ['todo', 1],
    queryFn: () => lastValueFrom(this.#http.get<Todo>('https://jsonplaceholder.typicode.com/todos/1')),
  }))
It fails to narrow down the type of query.data() (see the screenshot). And if you try to assign it to a variable like @let data = query.data() the type will be any Again, the VS code has no issue with the same snippet. The version of WebStorm is WebStorm 2024.3.5 and VS code - Version: 1.98.1 (Universal) both running on Mac. I run them on the same TypeScript version, I tried to clean the cache inside WebStorm but no luck. So the question is, what could cause the difference? And I'm slightly worried that if the issue issue is not only on my PC, the newcomers to the library might actually think that there's something wrong with the library, and not WebStorm just failing to properly infer the types.
No description
3 Replies
stormy-gold
stormy-goldOP•6mo ago
UPD: didn't know that webstorm uses its own language service hence the difference in types I guess (https://blog.jetbrains.com/webstorm/2025/03/the-angular-language-server-understanding-ide-integration-approaches/)
Jan-Niklas Wortmann
The JetBrains Blog
The Angular Language Server: Understanding IDE Integration Approach...
Learn about the Angular Language Server and different IDE integration approaches. Learn why WebStorm doesn't use the Angular Language server ... or does it?
harsh-harlequin
harsh-harlequin•6mo ago
I use Webstorm daily and enabling the following https://www.jetbrains.com/help/webstorm/angular.html#ws_angular_configure_ts_language_service fixes it for me. It would be nice to add this to the typescript guide in the Angular documentation of TS Query. PR welcome 🙂
WebStorm Help
Angular | WebStorm
stormy-gold
stormy-goldOP•6mo ago
Oh yeah, this mostly fixes it. Thanks a lot. I still have weird type inference in our company project. Somehow it gives me () => (ArrayBuffer | undefined) type, I don't have any ArrayBuffers in my code. The VS code doesn't have this issue somehow. I'm trying to reproduce this in a test project. Might be related to usage of keepPreviousData. But again it seems to be WebStorm issue. I'll try my best to put together a PR for the docs.
No description
No description

Did you find this page helpful?