angularjs - Visual Studio Code 提示 *.d.ts 文件中定义的类型为 "Cannot find namespace"

Question

我使用 gulp-angular 创建了一个新项目语言设置为 TypeScript 的 Yeoman 生成器。然后运行 ​​Gulp构建过程并在网络浏览器中打开页面，所有这些都没有任何更大的问题。我只需将 tsd.json 中的 ref: "master" 替换为 ref: "1.4.1" 即可使构建工作。基本上我执行了以下命令:

yo gulp-angular
vim tsd.json
gulp
gulp serve
code .

之后我在Visual Studio Code中打开项目.

例如，现在，Visual Studio Code 会提示每次出现 AngularJS 时 “无法找到命名空间 'ng'”使用数据类型。它还提示 MomentJS以及 *.d.ts 文件中定义的其他类型。

项目的tsd.json是这样的:

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "1.4.1",
  "path": ".tmp/typings",
  "bundle": ".tmp/typings/tsd.d.ts"
}

.tmp/typings 文件夹包含以下文件:

angular-ui-router/angular-ui-router.d.ts
angularjs/angular-animate.d.ts
angularjs/angular-cookies.d.ts
angularjs/angular-mocks.d.ts
angularjs/angular-resource.d.ts
angularjs/angular-sanitize.d.ts
angularjs/angular.d.ts
jquery/jquery.d.ts
moment/moment-node.d.ts
moment/moment.d.ts
toastr/toastr.d.ts
tsd.d.ts

举一个 Visual Studio Code 提示的源文件的例子，这里是 navbar.directive.ts 文件:

module editorTs {
  'use strict';

  /** @ngInject */
  export function acmeNavbar(): ng.IDirective {

    return {
      restrict: 'E',
      scope: {
        creationDate: '='
      },
      templateUrl: 'app/components/navbar/navbar.html',
      controller: NavbarController,
      controllerAs: 'vm',
      bindToController: true
    };

  }

  /** @ngInject */
  class NavbarController {
    public relativeDate: string;

    constructor(moment: moment.MomentStatic) {
      this.relativeDate = moment(1444135396045).fromNow();
    }
  }
}

在这个文件中，Visual Studio Code 提示 ng.IDirective 类型 “找不到命名空间 'ng'” 并且提示 moment.MomentStatic 键入它“找不到 namespace ‘moment’”。

编辑:

通过将以下内容添加到 navbar.directive.ts 的顶部来明确引用类型定义文件可消除问题:

/// <reference path="../../../../.tmp/typings/angularjs/angular.d.ts"/>
/// <reference path="../../../../.tmp/typings/moment/moment.d.ts"/>

但这些文件已经在.tmp/tsd.d.ts中被引用，其中包含以下内容:

/// <reference path="angular-ui-router/angular-ui-router.d.ts" />
/// <reference path="angularjs/angular-animate.d.ts" />
/// <reference path="angularjs/angular-cookies.d.ts" />
/// <reference path="angularjs/angular-mocks.d.ts" />
/// <reference path="angularjs/angular-resource.d.ts" />
/// <reference path="angularjs/angular-sanitize.d.ts" />
/// <reference path="angularjs/angular.d.ts" />
/// <reference path="jquery/jquery.d.ts" />
/// <reference path="moment/moment-node.d.ts" />
/// <reference path="moment/moment.d.ts" />
/// <reference path="toastr/toastr.d.ts" />

所以应该不需要显式引用这些文件？

Answer 1

将 tsconfig.json 添加到我的 VS Code 项目的根目录是解决我问题的方法。此外，不得不重新启动 VS 代码。这是我放入该文件的内容:

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "sourceMap": true
    }
}

有关 tsconfig.json 文件的更多信息，请查看:

https://code.visualstudio.com/docs/languages/typescript