Visual Studio Code complains that it "Cannot find namespace" for types defined in *.d.ts files

Question

I created a new project using the gulp-angular Yeoman generator with language set to TypeScript. Then ran the Gulp build process and also opened the page in a web browser, which all worked without any bigger problems. I only had to replace ref: "master" in the tsd.json with ref: "1.4.1" to make the build work. Basically I executed following commands:

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

Afterwards I opened the project in Visual Studio Code.

Now, Visual Studio Code complains for example that it "Cannot find namespace 'ng'" for each occurrence where AngularJS data types are used. It also complains about MomentJS and other typings defined in *.d.ts files.

The project's tsd.json looks like this:

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

The .tmp/typings folder contains following files:

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

To give an example of one of the source files where Visual Studio Code is complaining, here is the navbar.directive.ts file:

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();
    }
  }
}

In this file Visual Studio Code is complaining about the ng.IDirective type that it "Cannot find namespace 'ng'" and it is complaining about the moment.MomentStatic type that it "Cannot find namespace 'moment'".

edit:

Explicitely referencing the type definition files by adding the following to the top of navbar.directive.ts removes the problem:

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

But these files are already referenced in .tmp/tsd.d.ts, which contains the following:

/// <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" />

So there should be no need to explicitly reference the files?

Answer 1

Adding a tsconfig.json to the root of my VS Code project is what fixed the issue for me. Also, had to restart VS code. Here is what I put inside that file:

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

For more info on the tsconfig.json file, check out:

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