Using TypeScript (using the example of angularjs) in Visual Studio 2015

The solution to this problem took me several hours, so in order to save time for other members of the .Net community, I decided to write a short article on Habr.

First of all, open packages.json and add the tsd ( TypeScript Definition manager ) and grunt-tsd packages (to interact with grunt).



We try to download packages and see that the tsd package for some reason does not load.


To understand what the problem is, try to install via the console.

npm install tsd -g

If not previously installed, install git , python (v2.xx) and nodejs . All of them must be registered in the PATH.
')
But this is minor compared to the fact that one of the previous versions of Visual Studio should be installed (an express or community version will do), since node-gyp, which is involved in installing the package, is not able to use the VS2015 compiler yet.


After installing the previous version of Visual Studio, run the following command at the command prompt:

npm install tsd -g --msvs_version = 2013

where 2013 is the studio version. If you installed the Express version, you must specify --msvs_version = 2013e.

If the command has completed without errors, we can return to the studio and try downloading the packages again.
Loaded!

We add a tsd.json file to the root of the project, which lists which TypeScript definitions from the repository we need to load. For example:

{ "version": "v4", "repo": "borisyankov/DefinitelyTyped", "ref": "master", "path": "ClientSide/typings", "bundle": "ClientSide/typings/tsd.d.ts", "installed": { "bootstrap/bootstrap.d.ts": { "commit": "1c829808b649eb0c794ec8caf38177495a5d7630" }, "jquery/jquery.d.ts": { "commit": "1c829808b649eb0c794ec8caf38177495a5d7630" }, "angularjs/angular.d.ts": { "commit": "1c829808b649eb0c794ec8caf38177495a5d7630" }, "angularjs/angular-resource.d.ts": { "commit": "1c829808b649eb0c794ec8caf38177495a5d7630" } } } 

In gruntfile.js we will add operations that will be performed automatically when building the project. In this case, the tsd section has been added to the config file passed to the grunt.initConfig function, and the grunt-tsd task registration has been added to the end of the file:

 module.exports = function (grunt) { grunt.initConfig({ bower: { ... } }, tsd: { refresh: { options: { command: 'reinstall', latest: true, config: 'tsd.json', opts: { } } } } }); grunt.registerTask("default", ["bower:install"]); grunt.loadNpmTasks("grunt-bower-task"); grunt.loadNpmTasks("grunt-tsd"); }; 

We save. In the context menu of gruntfile.js, select Task Runner Explorer.


If the tsd section does not appear, click the Refresh button in the Task Runner Explorer. After that, right-click on the tsd task and select Run.

“Done, without errors” should appear in the Task Runner Explorer output, and the Client Side folder with TypeScript files will appear in the Solution View. The tsd.d.ts file contains links to all installed packages.

Add a couple of files to the project (Resharper and the studio may swear, considering the code is not valid):

• ClientSide / app.ts

   /// <reference path="typings/tsd.d.ts" /> module Demo { 'use strict'; var todomvc = angular.module('app', []) .controller('demoCtrl', DemoCtrl); } 

• ClientSide / Interfaces / IDemoScope.ts

   /// <reference path="../typings/tsd.d.ts" /> module Demo { export interface IDemoScope extends ng.IScope { greeting: string; login: (name: string) => void; } } 

• ClientSide / Controllers / DemoCtrl.ts

   /// <reference path="../typings/tsd.d.ts" /> /// <reference path="../interfaces/idemoscope.ts" /> module Demo { 'use strict'; export class DemoCtrl { constructor(private $scope: IDemoScope) { $scope.greeting = "Wellcome!" $scope.login = function (name) { $scope.greeting = "Hello, " + name + "!"; } } } } 

Now we need to compile all this into a js file. To do this, add the packages.json

"Typescript": "^ 1.4.1",
"Grunt-typescript": "^ 0.6.1"

We save. In Dependencies / npm, call Restore Packages from the context menu.

In gruntfile.cs we add the generation stage based on typescript and check in the task:

 module.exports = function (grunt) { grunt.initConfig({ bower: { ... }, tsd: { ... }, typescript: { base: { src: ['ClientSide/**/*.ts'], dest: 'wwwroot/app.js', options: { module: 'amd', target: 'es5' } } } }); ... grunt.loadNpmTasks("grunt-typescript"); }; 

Save, go to Task Runner Explorer, update, run task typescript. If everything is successful, in the wwwroot folder there will be an app.js file compiled based on all * .ts files in the ClientSide folder.

In order not to start the generation of this file manually, in Task Runner Explorer on typescript call it open the context menu and select Bindings - After Build.

From now on, with every build, the app.js file will be generated automatically.

Now we are missing an angularjs project.
Add to bower.json:

• In the dependencies section

   "angular": "^1.3.10" 

• To the exportsOverride section

    "angular": { "": "*.{js,css}" }, 

We save. In Task Runner Explorer we launch task bower. A folder with angularjs will appear in the wwwroot / libs folder.

The final stage.
In _Layout.cshtml:

• Add attribute to initialize AngularJS

   <html ng-app="demo"> 

• before @RenderSection ("scripts", required: false) we include JS files:
  

   <script src="~/lib/angular/angular.js"></script> <script src="~/app.js"></script> 

The content of Index.cshtml is replaced by:

  <div class="jumbotron" ng-controller="demoCtrl"> <h1>{{greeting}}</h1> <input type="text" ng-model="name" /> <button ng-click="login(name)">Log In</button> </div> 

F5, run!


Sources are available on github .