Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to show inferred TypeScript type in WebStorm?

People also ask

What is inferred type in TypeScript?

TypeScript infers types of variables when there is no explicit information available in the form of type annotations. Types are inferred by TypeScript compiler when: Variables are initialized. Default values are set for parameters. Function return types are determined.

Does WebStorm work with TypeScript?

With WebStorm, you can run and debug client-side TypeScript code and TypeScript code running in Node. js. Learn more from Running and debugging TypeScript.


Although not perfect. Press the Ctrl key (or ⌘ Cmd on macOS) and hover over a variable with the mouse to kick in the inference logic in webstorm :

enter image description here


Assuming the cursor is already on the variable the best way is:

  1. Ctrl + Shift + P
  2. Return

Starting from WS2017.2 Ctrl (Cmd) + Hover shows inferred type.

Also you can try Quick Documentation: Ctrl + Q ( F1 for OS X )

Updated: in 2020.1 it will work as a part of the quick documentation and it works on hover if Preferences > EditoGeneral > Show quick documentation on mouse move is checked


Late to the party, and not sure when this came out, but there is a setting:

Show quick documentation on mouse move. Delay: [500] ms

Where delay is editable.

You can get to it by

File -> Settings -> Editor/General -> #Other / Show quick documentation on mouse move

Works similar to VS


Depending on the context, there are different ways to get type information. (Shortcuts for OS X)

  1. View > Expression Type ⌘⇧P: shows a popup
  2. Navigate > Type Declaration ⌘⇧B: navigates in the editor
  3. If 2. does not help, I do Navigate > Declaration ⌘B and then 2.
  4. View > Quick Definition ⌥Space (or ⌘Y)
  5. View > Parameter Info ⌘P: shows a popup with the declaration of a function parameter