Upon using the gulp-angular Yeoman generator with TypeScript as the language, I successfully created a new project. Running the Gulp build process and opening the page in a web browser went smoothly, except for a minor adjustment needed in the tsd.json file. Specifically, I had to change ref: "master" to ref: "1.4.1". The commands executed were:
yo gulp-angular
vim tsd.json
gulp
gulp serve
code .
Subsequently, I accessed the project in Visual Studio Code.
Visual Studio Code flagged issues such as the inability to locate the 'ng' namespace whenever AngularJS data types were used, along with similar problems related to MomentJS and other typings from *.d.ts files.
The content of the project's tsd.json is as follows:
{
"version": "v4",
"repo": "borisyankov/DefinitelyTyped",
"ref": "1.4.1",
"path": ".tmp/typings",
"bundle": ".tmp/typings/tsd.d.ts"
}
The .tmp/typings folder contains the 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
For example, here is part of the navbar.directive.ts source file where Visual Studio Code shows errors:
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 code snippet, Visual Studio Code highlights issues with the 'ng.IDirective' and 'moment.MomentStatic' types being unidentified namespaces.
edit:
To resolve these problems, explicitly referencing the type definition files at the beginning of navbar.directive.ts eliminates the errors:
/// <reference path="../../../../.tmp/typings/angularjs/angular.d.ts"/>
/// <reference path="../../../../.tmp/typings/moment/moment.d.ts"/>
It's worth noting that these files are already referenced in .tmp/tsd.d.ts as shown below:
/// <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" />
Hence, there should be no requirement to explicitly reference the files again.