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

vscode knows loc

But he doesn't know what gl

is

vscode doesn't know gl

And he doesn't know that ctx

vscode doesn't know 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

vscode knows webglrenderingcontext

and he knows CanvasRenderingContext2D

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

+2


source to share


3 answers


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

      

enter image description here

enter image description here

+3


source


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

+1


source


If you want to use Typescript you can do this:

var gl : WebGLRenderingContext;

enter image description here

0


source







All Articles