无论如何在Visual Studio intellisense中定义一个未定义的对象?

时间:2022-11-14 08:16:31

Lets say I have a controller in AngularJS:

假设我在AngularJS中有一个控制器:

myApp.controller('SearchController',
    function ($scope, UserService) {

        // for intellisense, UserService is undefined here
        var user = UserService.getUsers().then(function(data){
                             // yada yada
                   }, function(err){
                             // yada yada
                   });
    });

However, in my intellisense file, I can dynamically inject UserService to get its functions like this:

但是,在我的intellisense文件中,我可以动态注入UserService来获取它的函数:

intellisense.addEventListener('statementcompletion', function (event) {
    // tried doing this, but doesn't work!
    // event.target   = {};

    var injector   = angular.injector(['ng', 'myApp']);
    var dependency = injector.get(event.targetName);

    event.items    = [];
    for (method in dependency) {
        intellisense.logMessage(method);
        event.items.push({ name: method, kind: 'field', value: function () { } });
    }

});

Now, if I have a global variable (or function variable) defined as UserService = {} and inside my controller function I type UserService. I will get a pop up of all the functions in the service. But if I don't have it defined, since it is interpreted as undefined by intellisense, it can't show me the options even though statementcompletion is working (as seen in the Javascript Language Service console).

现在,如果我有一个定义为UserService = {}的全局变量(或函数变量),并在我的控制器函数内输入UserService。我将弹出服务中的所有功能。但是如果我没有定义它,因为它被intellisense解释为未定义,即使语句完成正常工作,它也无法显示选项(如Javascript语言服务控制台中所示)。

My question is, apart from annotating the function, is there anyway to define UserService as an object in the intellisense file? Defining event.target = {} does not work (see intellisense code above).

我的问题是,除了注释函数之外,还有将UserService定义为intellisense文件中的对象吗?定义event.target = {}不起作用(参见上面的intellisense代码)。

1 个解决方案

#1


13  

One way that works is to "call" the component functions (controller, services, etc) from intellisense code with empty objects.

一种有效的方法是使用空对象从智能感知代码中“调用”组件功能(控制器,服务等)。

I am sure this can be a lot cleaner but here's what I've done:

我相信这可以更清洁,但这就是我所做的:

https://github.com/diwasbhattarai/angularjs-intellisense

https://github.com/diwasbhattarai/angularjs-intellisense

By John Bledsoe: https://github.com/jmbledsoe/angularjs-visualstudio-intellisense/

作者:John Bledsoe:https://github.com/jmbledsoe/angularjs-visualstudio-intellisense/

references.js - add this file as reference in Tools>Options>TextEditor>Javascript>Intellisense>References

references.js - 在工具>选项> TextEditor> Javascript>智能感知>参考中添加此文件作为参考

    /// <reference path="../source/lib/assetBundle.js" />
    /// <reference path="_moduleDecorator.js" />
    /// <reference path="_componentDecorator.js" />
    /// <reference path="../source/app/appBundle.js" />

    intellisense.addEventListener('statementcompletion', function (event) {
    // for core angular objects
    addComponentToIntellisense('ng');
    // for custom objects in application modules
    for (var moduleIndex in modules) {
        addComponentToIntellisense(modules[moduleIndex]);
    }

    function addComponentToIntellisense(module) {
        var $injector = angular.injector(['ng', module]),
            dependency = $injector.get(event.targetName),
            dep;

        if (typeof dependency === "function") dep = new dependency();
        else dep = dependency;

        for (var method in dep) {
            event.items.push({ name: method, kind: 'field', value: dependency[method] });
        }
    }
});

_moduleDecorator.js - to keep track of all the modules in your app

_moduleDecorator.js - 跟踪应用中的所有模块

    //_moduleDecorator
    (function () {
    var originalModule = angular.module;
    // TODO change to array
    modules = {};
    var rep = false;
    var count = 0;
    angular.module = function () {
        for (var k in modules) {
            if (modules[k] === arguments[0]) {
                rep = true;
                break;
            }
        }
        if (!rep) modules[count++] = arguments[0];

        return originalModule.apply(angular, arguments);
    };
})();

_componentDecorator.js - to "call" component functions with empty object parameter

_componentDecorator.js - 使用空对象参数“调用”组件函数

    (function () {
    // pick all the components in all modules and initialize them for intellisense
    for (var moduleIndex in modules) {
        var currentModule = angular.module(modules[moduleIndex]),
            queue = currentModule._invokeQueue,
            // add other components such as value, provider, etc later
            angularComponents = ['controller', 'factory', 'service', 'value'];

        for (var i = 0; i < angularComponents.length; i++) {
            var currentComponent    = angularComponents[i],
                originalComponentFn = currentModule[currentComponent];

            currentModule[currentComponent] = (function (currentModule, queue, originalComponentFn) {
                return function () {
                    originalComponentFn.apply(currentModule, arguments);
                    initializeComponents(queue);
                };
            })(currentModule, queue, originalComponentFn);
        }
    }

    function initializeComponents(queue) {
        var elem = queue.filter(function (element) {
            var componentName = element[2][0].toLowerCase();
            return (componentName.indexOf(componentName) !== -1);
        });

        for (var i = 0; i < elem.length; i++) {
            var tempComp = elem[i][2][1],
                compFunc;

            // for array notation for DI
            if (typeof tempComp !== "function") {
                compFunc = tempComp[tempComp.length - 1];
            } else {
                compFunc = tempComp;
            }

            // 10 parameter dependencies initialization for now
            compFunc({}, {}, {}, {}, {}, {}, {}, {}, {}, {});
        }
    }
})();

#1


13  

One way that works is to "call" the component functions (controller, services, etc) from intellisense code with empty objects.

一种有效的方法是使用空对象从智能感知代码中“调用”组件功能(控制器,服务等)。

I am sure this can be a lot cleaner but here's what I've done:

我相信这可以更清洁,但这就是我所做的:

https://github.com/diwasbhattarai/angularjs-intellisense

https://github.com/diwasbhattarai/angularjs-intellisense

By John Bledsoe: https://github.com/jmbledsoe/angularjs-visualstudio-intellisense/

作者:John Bledsoe:https://github.com/jmbledsoe/angularjs-visualstudio-intellisense/

references.js - add this file as reference in Tools>Options>TextEditor>Javascript>Intellisense>References

references.js - 在工具>选项> TextEditor> Javascript>智能感知>参考中添加此文件作为参考

    /// <reference path="../source/lib/assetBundle.js" />
    /// <reference path="_moduleDecorator.js" />
    /// <reference path="_componentDecorator.js" />
    /// <reference path="../source/app/appBundle.js" />

    intellisense.addEventListener('statementcompletion', function (event) {
    // for core angular objects
    addComponentToIntellisense('ng');
    // for custom objects in application modules
    for (var moduleIndex in modules) {
        addComponentToIntellisense(modules[moduleIndex]);
    }

    function addComponentToIntellisense(module) {
        var $injector = angular.injector(['ng', module]),
            dependency = $injector.get(event.targetName),
            dep;

        if (typeof dependency === "function") dep = new dependency();
        else dep = dependency;

        for (var method in dep) {
            event.items.push({ name: method, kind: 'field', value: dependency[method] });
        }
    }
});

_moduleDecorator.js - to keep track of all the modules in your app

_moduleDecorator.js - 跟踪应用中的所有模块

    //_moduleDecorator
    (function () {
    var originalModule = angular.module;
    // TODO change to array
    modules = {};
    var rep = false;
    var count = 0;
    angular.module = function () {
        for (var k in modules) {
            if (modules[k] === arguments[0]) {
                rep = true;
                break;
            }
        }
        if (!rep) modules[count++] = arguments[0];

        return originalModule.apply(angular, arguments);
    };
})();

_componentDecorator.js - to "call" component functions with empty object parameter

_componentDecorator.js - 使用空对象参数“调用”组件函数

    (function () {
    // pick all the components in all modules and initialize them for intellisense
    for (var moduleIndex in modules) {
        var currentModule = angular.module(modules[moduleIndex]),
            queue = currentModule._invokeQueue,
            // add other components such as value, provider, etc later
            angularComponents = ['controller', 'factory', 'service', 'value'];

        for (var i = 0; i < angularComponents.length; i++) {
            var currentComponent    = angularComponents[i],
                originalComponentFn = currentModule[currentComponent];

            currentModule[currentComponent] = (function (currentModule, queue, originalComponentFn) {
                return function () {
                    originalComponentFn.apply(currentModule, arguments);
                    initializeComponents(queue);
                };
            })(currentModule, queue, originalComponentFn);
        }
    }

    function initializeComponents(queue) {
        var elem = queue.filter(function (element) {
            var componentName = element[2][0].toLowerCase();
            return (componentName.indexOf(componentName) !== -1);
        });

        for (var i = 0; i < elem.length; i++) {
            var tempComp = elem[i][2][1],
                compFunc;

            // for array notation for DI
            if (typeof tempComp !== "function") {
                compFunc = tempComp[tempComp.length - 1];
            } else {
                compFunc = tempComp;
            }

            // 10 parameter dependencies initialization for now
            compFunc({}, {}, {}, {}, {}, {}, {}, {}, {}, {});
        }
    }
})();