Adding JavaScript type hints for VSCode/Monaco Intellisence











up vote
3
down vote

favorite
1












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.










share|improve this question




















  • 1




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















up vote
3
down vote

favorite
1












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.










share|improve this question




















  • 1




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













up vote
3
down vote

favorite
1









up vote
3
down vote

favorite
1






1





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.










share|improve this 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



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.







javascript intellisense visual-studio-code monaco-editor






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Sep 26 '16 at 3:51

























asked Sep 26 '16 at 3:46









gman

45.3k17109192




45.3k17109192








  • 1




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














  • 1




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








1




1




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




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












3 Answers
3






active

oldest

votes

















up vote
5
down vote



accepted










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






share|improve this answer























  • 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 3 '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. stackoverflow.com/a/48752318/1359579
    – DannyMeister
    Feb 12 at 17:39




















up vote
1
down vote













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






share|improve this answer




























    up vote
    0
    down vote













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




    var gl : WebGLRenderingContext;



    enter image description here






    share|improve this answer





















    • Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
      – gman
      Jan 12 '17 at 4: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 at 22:29






    • 1




      @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 at 3:21











    Your Answer






    StackExchange.ifUsing("editor", function () {
    StackExchange.using("externalEditor", function () {
    StackExchange.using("snippets", function () {
    StackExchange.snippets.init();
    });
    });
    }, "code-snippets");

    StackExchange.ready(function() {
    var channelOptions = {
    tags: "".split(" "),
    id: "1"
    };
    initTagRenderer("".split(" "), "".split(" "), channelOptions);

    StackExchange.using("externalEditor", function() {
    // Have to fire editor after snippets, if snippets enabled
    if (StackExchange.settings.snippets.snippetsEnabled) {
    StackExchange.using("snippets", function() {
    createEditor();
    });
    }
    else {
    createEditor();
    }
    });

    function createEditor() {
    StackExchange.prepareEditor({
    heartbeatType: 'answer',
    convertImagesToLinks: true,
    noModals: true,
    showLowRepImageUploadWarning: true,
    reputationToPostImages: 10,
    bindNavPrevention: true,
    postfix: "",
    imageUploader: {
    brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
    contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
    allowUrls: true
    },
    onDemand: true,
    discardSelector: ".discard-answer"
    ,immediatelyShowMarkdownHelp:true
    });


    }
    });














     

    draft saved


    draft discarded


















    StackExchange.ready(
    function () {
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39694407%2fadding-javascript-type-hints-for-vscode-monaco-intellisence%23new-answer', 'question_page');
    }
    );

    Post as a guest















    Required, but never shown

























    3 Answers
    3






    active

    oldest

    votes








    3 Answers
    3






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    5
    down vote



    accepted










    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






    share|improve this answer























    • 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 3 '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. stackoverflow.com/a/48752318/1359579
      – DannyMeister
      Feb 12 at 17:39

















    up vote
    5
    down vote



    accepted










    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






    share|improve this answer























    • 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 3 '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. stackoverflow.com/a/48752318/1359579
      – DannyMeister
      Feb 12 at 17:39















    up vote
    5
    down vote



    accepted







    up vote
    5
    down vote



    accepted






    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






    share|improve this answer














    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







    share|improve this answer














    share|improve this answer



    share|improve this answer








    edited Jan 27 at 12:13

























    answered Sep 26 '16 at 3:58









    gman

    45.3k17109192




    45.3k17109192












    • 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 3 '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. stackoverflow.com/a/48752318/1359579
      – DannyMeister
      Feb 12 at 17:39




















    • 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 3 '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. stackoverflow.com/a/48752318/1359579
      – DannyMeister
      Feb 12 at 17:39


















    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 3 '17 at 20:22




    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 3 '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. stackoverflow.com/a/48752318/1359579
    – DannyMeister
    Feb 12 at 17:39






    @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. stackoverflow.com/a/48752318/1359579
    – DannyMeister
    Feb 12 at 17:39














    up vote
    1
    down vote













    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






    share|improve this answer

























      up vote
      1
      down vote













      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






      share|improve this answer























        up vote
        1
        down vote










        up vote
        1
        down vote









        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






        share|improve this answer












        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







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Feb 12 at 17:37









        DannyMeister

        7141715




        7141715






















            up vote
            0
            down vote













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




            var gl : WebGLRenderingContext;



            enter image description here






            share|improve this answer





















            • Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
              – gman
              Jan 12 '17 at 4: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 at 22:29






            • 1




              @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 at 3:21















            up vote
            0
            down vote













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




            var gl : WebGLRenderingContext;



            enter image description here






            share|improve this answer





















            • Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
              – gman
              Jan 12 '17 at 4: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 at 22:29






            • 1




              @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 at 3:21













            up vote
            0
            down vote










            up vote
            0
            down vote









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




            var gl : WebGLRenderingContext;



            enter image description here






            share|improve this answer












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




            var gl : WebGLRenderingContext;



            enter image description here







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Jan 11 '17 at 4:25









            Doug

            4,73683965




            4,73683965












            • Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
              – gman
              Jan 12 '17 at 4: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 at 22:29






            • 1




              @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 at 3:21


















            • Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
              – gman
              Jan 12 '17 at 4: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 at 22:29






            • 1




              @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 at 3:21
















            Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
            – gman
            Jan 12 '17 at 4:06




            Thanks! Unfortunately I'm using it on a site that's teaching stuff with JS not TS 😭
            – gman
            Jan 12 '17 at 4: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 at 22:29




            @gman Well typescript is pretty similar to javascript. much of it is very similar to javascript, very easy to convert over
            – kinger6621
            Feb 25 at 22:29




            1




            1




            @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 at 3:21




            @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 at 3:21


















             

            draft saved


            draft discarded



















































             


            draft saved


            draft discarded














            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f39694407%2fadding-javascript-type-hints-for-vscode-monaco-intellisence%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            Berounka

            Sphinx de Gizeh

            Different font size/position of beamer's navigation symbols template's content depending on regular/plain...