zabbarob zabbarob - 1 month ago 21
TypeScript Question

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

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

Cannot find namespace 'ng'"

Make sure the project contains no reference to declare module ng. Same for moment.

Update

based on edit in the question:

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

Please use a tsconfig.json : https://basarat.gitbooks.io/typescript/content/docs/project/compilation-context.html