Adding JavaScript type hints for VSCode / Monaco Intellisence
Is there a way to hint at VSCode / Monaco intellisense variable types.
I have code like this
var loc = window.location;
var gl = context1.getContext("webgl");
var ctx = context2.getContext("2d");
I can see that VSCode knows what loc
isURL
But he doesn't know what gl
is
And he doesn't know that ctx
Which makes sense if a function returns different types based on its input, this is a somewhat unusual case.
But it has type data for WebGLRenderingContext
and he knows CanvasRenderingContext2D
Is there a way to tell vscode / monaco what gl
is an instance WebGLRenderingContext
and what ctx
is an instance CanvasRenderingContext2D
without having to switch to typescript? Maybe by adding some kind of comment?
I need a solution to work in monaco (which at least in my tests shows all the same completions) because this is for a WebGL website, not VSCode, but I hope the solution is the same.
Update: as of 0.9.0 from Monaco, these type annotations now work
You can see that JSDoc style type annotations work in VSCode, although they don't seem to work in Monaco.
var loc = window.location;
/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");
/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d");
As Mika pointed out in a comment on the accepted answer, there can still be issues with external modules. Just fulfilling the module requirement will already allow jsdoc type annotations to work if the library defines a global object from which you can refer to types. Otherwise, you can simulate this by importing everything and matching it to your own name.
import * as Foo from 'foo'
/** @type {Foo.Foo} */
var foo;
https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062
If you want to use Typescript you can do this:
var gl : WebGLRenderingContext;
