如何在 WebStorm 中显示推断的 TypeScript 类型？

Question

In VS2012, you can hover over a typescript variable and it will show you the inferred type. Is there a similar feature in webstorm?

Answer 1

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:

Answer 2

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 : 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

Answer 3

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

Answer 4

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

Answer 5

As an addition to hovering to see the type, since version 2020.3 you can go to
Settings -> Editor -> Inlay Hints -> TypeScript -> Type annotations
and check all the boxes, to see the type interference right away in your IDE: