Flow type description on Quick documentation lookup (Win: Ctrl+Q)

Is this possible to show Flow type definitions on quick documentation lookup or by hovering on a variable? (Like in VSCode, for example)

If not, is it feature planned to implement? it's really important in a big codebase with a complex type hierarchy.

17 comments
Comment actions Permalink

Not sure I follow you... If the type can be resolved by WebStorm (you can navigate to type definition with Ctrl+click) and has some comments attached to it in the code, quick documentation will show the docs...

0
Comment actions Permalink

Something like this. (Example in VSCode)

But VSCode sometimes shows any type instead of real type.
In Webstorm (I use IDEA with plugin) it shows:

IDEA can resolve type and I can navigate to it by Ctrl+B or Ctrl+mouse click. Is it possible not to navigate but open tooltip with this type similar to VSCode?

0
Comment actions Permalink

Still don't understand... Does VSCode show type definition rather than type name? You can view type definition in WebStorm using View | Quick Definition (Ctrl+Shift+I in default keymap)

0
Comment actions Permalink

Yes! That's exactly what I want. But seems WebStorm can't infer type of variables and show an only place where variable or argument (in example case it's argument) defined, not full type definition.
Example:


VSCode:





0
Comment actions Permalink

Please provide full code snippets (as text) that can be used to recreate the issue

0
Comment actions Permalink

This is of interest to us too.

Here's a simple example:

Enter this into a JS file in a project with JavaScript level set to Flow and the flow server enabled.

type SampleType = {
a: string,
b: number,
};

const a: SampleType = {a: '', b: 2};

function doThing(aInferred) {
//.. do something with it here
}

doThing(a);

 

Place the cursor on `aInferred`.  Run the Quick Definition action.

 

Result:

 

Expected that WebStorm would use Flow to interrogate the type of the aInferred variable and display that in the popup.

E.g. Definition of aInferred box above should contain something like:

aInferred: SampleType {
a: string,
b: number,
}

 

0
Comment actions Permalink

No, I'd not expect the View definition invoked on a parameter declaration to show the definition of argument function is called with. What if a function is called multiple times with different args? View Definition allows to preview definition of an object at caret - same as Navigate | Declaration, but without opening a files, etc.

0
Comment actions Permalink

Basic example:

// @flow

type SampleType = {|
a: number | string,
|}

function cell({ a }: SampleType): number {
if(typeof a === 'number') {
return a
}
return 0
}

cell({ a: 1 })



1
Comment actions Permalink

That's a better example! I noticed that if you put the cursor over the *type* (e.g. SampleType in the last example) and run the View Definition action it does indeed describe the type, which is useful for sure. What dmitriy posted would be even better.

0
Comment actions Permalink

Created https://youtrack.jetbrains.com/issue/WEB-31423; hope I understood correctly what you meant to say

0
Comment actions Permalink

It's only a part of the problem. The problem is that I want to see the type of variable that covered by Flow in a tooltip when hovering variable or by shortcut. VSCode supports this for TS and Flow. I expected to use Ctr+Q to get all information (docs+types) about an entity in code like this done with other languages in IDEA and others IDE. It's small but really important part of a process to write code with types. This process not really diffrent from other languages, for example, C# with Rider:


There I got type by Ctrl+Q of function parameter not to try to search or find it's declaration or just remember the type.

0
Comment actions Permalink

Haven't got what you mean. WebStorm normally does show inferred type on Ctrl+Q

0
Comment actions Permalink

Here's another go at explaining the requirement here:

If we save Dmitry's code (reproduced below) into a file called `src/flowInferredTest.js`  ..

// @flow

type SampleType = {|
a: number | string,
|}

function cell({ a }: SampleType): number {
if(typeof a === 'number') {
return a
}
return 0
}

cell({ a: 1 });

We want to find the inferred type of 'a' on the line with `return a` on it. This is on line 9 and column 12.

The Flow CLI tool has a way to tell you the inferred type of a token at a specific position. 

To do this for this example, run this command:

    flow type-at-pos src/flowInferredTest.js 9 12

The output is the following:

`number`

The type-at-pos command is mentioned here https://flow.org/en/docs/cli/. More detail is available by typing `flow type-at-pos --help`

So, what we've asking for here is a way within the WebStorm tool of running the above flow command at the current cursor position, and displaying it in a popup. 

This is (presumably) the exact command that VSCode is running to show the inferred type. 

I hope that helps! 

 

 

 

 

0
Comment actions Permalink

ok, once I'd taken the time to write that down it's actually pretty simple to create an External Tool definition to run that example.

I tried it on my first example (Feb 22nd post) and it prints out the value I expected `{a: string, b: number}`.

So this is a good start! It'd be much nicer of course if WebStorm could display the result in a popup rather than the console, but this is definitely helpful.

1
Comment actions Permalink

Can you say, what is the status of this feature request? I know, that you added some functionality in 2018.1.4 which shows the type, however, it is not the same as flow type-at-pos does, especially for generics and templates.

// @flow

function injectField<O: {}>(obj: O): { ...O, foo: number } {
return {
...obj,
foo: 123,
};
}

const obj = injectField({ bar: 'str' });

flow type-at-pos shows

{bar: string, foo: number}

but WebStorm shows only { bar: string }

 

 

0
Comment actions Permalink

what feature request? https://youtrack.jetbrains.com/issue/WEB-31423? it's still open (you can check its status by following the link)

If you are talking about a different feature, please feel free to file a request for it to youtrack, https://youtrack.jetbrains.com/issues/WEB

0
Comment actions Permalink

what with this issues?
I think what best solution it's show type from flow same as in View->Type Info

0

Please sign in to leave a comment.