Javascript Intellisense in Microsoft Visual Studio objects defined by custom code define / derive

Question

Situation: using functions to declare your Classes

If you are using and declaring classes with some custom (or framework function) as WinJs does (check their open source git directory), you are certainly familiar with this kind of code:

function define(constructor, instanceMembers, staticMembers) { }

function derive(baseClass, constructor, instanceMembers, staticMembers) { }

define(function constructor(){
   this.yourProperty = 1;
}, {
   // Prototype object
   somePrototypeFunction: function(){
      // When you type "this." here, it will not show up "yourProperty" declared 
      // in the constructor, because you have not instanciated the class, 
      // intellisense does not know that everything is linked
   }
}

Common problem on these "custom" functions

Intellisense does not show up the values declared within the constructor when you try to reach them from the prototype functions.

I found something that have helped me: http://social.msdn.microsoft.com/forums/windowsapps/en-US/3eee400a-fefd-4f5e-9109-68df03fef006/javascript-intellisense-with-this-inside-gettersetter

This leaded me to the solution that I share to you below, it was a pain to make it work, and actually I was about to ** AGAIN ** let go with that problem which was something really disapointing especially with big team projects. I find it weird that there are not many complaints about this on the web, maybe it's a configuration problem? However I had that problem on all VSD installations I saw.

So I hope the following solution will help you too if you run into the same situation.

Answer 1

After a few hours I finally have a solution which is not perfect (I have handled .base like in C# in my javascript library, but with the following code I can't say to intellisense that this ".base(...) " exists in the context of the prototype functions and constructor). If you have any tip on how to do that let me know, I'm interested.

Tested on Visual Studio 2013.

• Simply change window.define / window.derive to the namespace and name you actually use (for WinJs it would be WinJS.Class.define and WinJS.Class.derive).

• Add in _references.js the relative path of the file where you will put the following code, just after your library

And that's all! You'll have intellisense inside your

---

(function (window) {
    "use strict";
    /*
     * Goal: make intellisense understand that the constructor of your define/derive functions are linked to the prototype object you have supplied. 
     * Tested on WinJs library and other custom libraries.
     * Save this in a file, and reference it only in _references.js, insert it after your library containing the define/derive functions
    */

    function initIntellisenseFor(constructor, baseClass) {
        var inst = new constructor();
        // Force intellisense to run function
        for (var key in inst) {
            if (typeof inst[key] == 'function') {
                try {
                    inst[key]();
                } catch (e) {
                    // Silent fail if wrong arguments (not sure if needed)
                }
            }                
        }
        // Force intellisense to discover constructor
        inst.constructor = constructor;

        // Missing: .base() implementation for each method with redirection to the appropriate parent class method
    }

    var oldDefine = window.define;
    window.define = function (constructor, instanceMembers, staticMembers) {
        var result = oldDefine.call(this, constructor, instanceMembers, staticMembers);
        initIntellisenseFor(result);
        return result;
    };

    var oldDerive = window.derive;
    window.derive = function (baseClass, constructor, instanceMembers, staticMembers) {
        var result = oldDerive.call(this, baseClass, constructor, instanceMembers, staticMembers);
        initIntellisenseFor(result, baseClass);
        return result;
    };

})(this);