Search code examples
javascriptintellisensevisual-studio-codemonaco-editor

Adding JavaScript type hints for VSCode/Monaco Intellisence


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

vscode knows loc

But it doesn't know what gl is

vscode does not know gl

Nor does it know what ctx is

vscode does not know ctx

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

vscode knows webglrenderingcontext

and it knows CanvasRenderingContext2D

vscode 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.


Solution

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

    enter image description here

    enter image description here