javascript - 如何让 VS Code 的 Intellisense 与 AngularJS 的注入(inject)服务一起工作？

Question

所以我试图让 Visual Studio Code 为我的 AngularJs(不是 Angular)应用程序服务提供智能感知。我设法获得了 angular 的标准类型(现在当我输入“angular”时，它会提示模块等内容)。这行得通而且很棒，但是我找不到让它与我的服务(或工厂)一起工作的方法。我知道，对于 IDE 来说，通过依赖注入(inject)等方式计算出代码并不是那么容易。

但是当我的 Controller 和它使用的服务都在同一个 JS 文件中时，它似乎工作正常!我遇到的唯一问题是我的应用程序太大，无法全部放在一个 JS 文件中，一旦我将代码拆分到多个文件中，它就会失败。

请注意，我曾尝试使用“三斜杠指令”(///)，但没有帮助。我一整天都在努力解决这个问题，非常感谢任何帮助。

代码示例:

var app = angular.module('app', []);

app.controller('ctrl', ['$scope', 'test',
    function ($scope, test) {

        $scope.test = test.word; //TRY TYPING 'test.' --> want to have intellisense suggest 'word'

}]);
//PUT THE BELOW IN ANOTHER FILE AND INTELLISENSE DOES NOT SHOW 'word'
app.service('test', [function(){
    /**
     * @type {string}
     */
    this.word = "balls";
    /**
     * @function
     * @param {string} variable
     */
    this.getLower = function (variable) {
        return variable.toLowerCase();
    }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    <p class="lead">{{test}}</p>
  </div>
</div>

Answer 1

您提到尝试使用三斜杠指令，但不清楚(至少从您的代码片段来看)您是否真的在使用 TypeScript。如果您不使用后者，那么如果您希望改进跨文件的 IntelliSense，则需要使用后者。

VS Code 为您提供您从 type definitions provided for AngularJS 中看到的有限 IntelliSense .

简而言之，您需要:

• 配置您的项目以使用 TypeScript(即设置 tsconfig.json)
• 安装 AngularJS 类型定义(即 npm i --save-dev @types/angular)
• 以利用类型定义 (Todd Motto's guide provides some good guidance about this) 的风格编写 AngularJS 代码

这是这种风格的一个非常简短的例子:

// Service.ts
export default class Service {
    constructor() {}
    log(message: string) {
        console.log(message);
    }
}

// Controller.ts
import ng from 'angular';
import Service from './Service';

export default class Controller implements ng.IController {
    static $inject: string[] = ['Service'];
    constructor(private service: Service) {}
    $onInit() {
        this.service.log('Hello, world!');
    }
}

// App.ts
import angular from 'angular';
import Controller from './Controller';
import Service from './Service';

export const angular
    .module('app', [])
    .service('Service', Service)
    .controller('Controller', Controller)
    .name;

如果你尝试上面的方法，你应该能够在 Controller.ts 的 Service 中为 log 调用获取 IntelliSense .