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.

JSDoc works in Monaco since version 0.90. See https://stackoverflow.com/a/45181853/2102158. — Jon N, Jul 19 '17 at 05:46

score 23 · Accepted Answer · edited Jun 20 '20 at 09:12

23

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");

edited Jun 20 '20 at 09:12

Community

1
1

answered Sep 26 '16 at 03:58

gman

83,286
25
191
301

This technique doesn't appear to work for imported types. e.g., `var Foo = require("foo"); /** @type {Foo} */ var foo;` In this example, `Foo` is a type that VSCode recognizes and has full intellisense on. If instead you do `var Foo = require("foo"); var foo = new Foo();` everything works. Any pro-tips to make this work correctly with imported types? – Micah Zoltu Mar 03 '17 at 20:22
@MicahZoltu I had a similar issue annotating types from the Express library. I found how to make this work and posted an additional answer on this question. https://stackoverflow.com/a/48752318/1359579 – DannyMeister Feb 12 '18 at 17:39
Important note: it *only* works if you use `/** */` comments. `/* */` and `//` comments have no effect annoyingly. – Timmmm Jun 14 '20 at 12:22

score 4 · Answer 2 · answered Feb 12 '18 at 17:37

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

It also works with function parameters ```const foo = (/** @type {Foo.Bar} */bar) => {...};``` — Henrik Perrochon, Apr 08 '19 at 18:12

score 0 · Answer 3 · answered Jan 11 '17 at 04:25

0

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

var gl : WebGLRenderingContext;

answered Jan 11 '17 at 04:25

Doug

10,752
11
57
97

Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS – gman Jan 12 '17 at 04:06
@gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over – kinger6621 Feb 25 '18 at 22:29
2

@kinger6621 Nope, it's no easy: once that you are in TypeScript everything is "typed", and you must do follow with that. – 0zkr PM Sep 23 '18 at 03:21

Adding JavaScript type hints for VSCode/Monaco Intellisence

3 Answers3

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

Linked