Adding JavaScript type hints for VSCode/Monaco Intellisence

Question

Is there a way to hint to VSCode/Monaco's intellisense the types of variables.

I have some code like this

var loc = window.location;
var gl = context1.getContext("webgl");
var ctx = context2.getContext("2d");

I see that VSCode knows that loc is a URL

But it doesn't know what gl is

Nor does it know what ctx is

Which makes sense, having a function return different types based on its input is a somewhat unusual case.

But it does have type data for WebGLRenderingContext

and it knows CanvasRenderingContext2D

Is there a way to for me to tell vscode/monaco that gl is an instance of WebGLRenderingContext and that ctx is an instance of CanvasRenderingContext2D without having to switch to typescript? Maybe by adding some kind of comment?

I need the solution to work in monaco (which at least in my tests shows all the same completions) because this is for a WebGL tutorial site, not actually for VSCode but I'm hoping the solution is the same.

Answer 1

Update: As of 0.9.0 of Monaco these type annotations now work

---

Is see that JSDoc style type annotations work in VSCode though they don't appear to work in Monaco.

var loc = window.location;

/** @type {WebGLRenderingContext} */
var gl = context1.getContext("webgl");    

/** @type {CanvasRenderingContext2D} */
var ctx = context2.getContext("2d"); 

Answer 2

As Micah pointed out in a comment on the accepted answer, there can still be issues with external modules. Simply doing a require of the module will already enable jsdoc type annotations to work if the library defines a global object from which you can reference the types. Otherwise, you can mimic this by importing everything and mapping it to your own name.

import * as Foo from 'foo'

/** @type {Foo.Foo} */
var foo;

https://github.com/Microsoft/TypeScript/issues/8237#issuecomment-213047062

Answer 3

If you are willing to use Typescript, you can do this:

var gl : WebGLRenderingContext;