Configuring Typescript for ASP.NET CORE Apps

Start with an empty project

Open up Visual Studio 2015 and create a new ASP.NET Core Web Application. Make sure you have ASP.NET CORE RC2 installed in your PC if you want to follow this walkthrough step by step.

Choose the Empty Template from the available ASP.NET Core Templates since we are totally starting from scratch.

After your project is created, it should restore required NuGet packages defined in the project.json file. The empty project solution will look like this,

Adding a default html file

To serve a default html file when the application is launched, we need a .net core package ("Microsoft.AspNetCore.StaticFiles": "1.0.0-rc2-final") and the html file itself under the wwwroot folder.

Update the dependencies of project.json file with the following highlighted line of code.

Notice that this library will only serve a default html file with the following name formats

index.html
index.htm
default.html
default.html

For this article we chose index.html

Now to actually serve this html page as a startup page, write the following two lines code in the Configure(IApplicationBuilder app) method which is in the Startup.cs file.

Running the app will now serve the index.html page as a startup page.

Installing NPM and Bower

NPM is used here to install BOWER itself and other node packages to help transpiling typescript files into raw javascript files. BOWER is used to resolve client side packages. Add a npm Configuration File in the project,

Update the devDependencies node with the following packages and save the file.

Again add a Bower Configuration File and update the dependencies node with the following package

Although installing Angular is not mandatory but the article demonstrate writing Angular code using typescript.

Adding a Typescript Configuration File

Add a typescript JSON Configuration File.

The file consists of the following configurations,

This is the file where you can configure typescript according to your project structure by playing around with different configurations (for example: change the target property value from es5 to es3 to let your typescript transpiler know that you want your transpiled typescript file to follow ECMAScript 3 specifications)

Installing Typescript Definition File

Deprecated!

For raw javascript, typescript has a definition file called lib.d.ts. To be able to use definition files for other open source libraries we need to install them using a package manager called tsd. You can avoid installing definition file but in that case you won’t get any intellisense.

Open up a command prompt and install the package manager globally (tsd) using NPM. Run the following command in the command prompt,

npm install -g tsd

Now install the type definition file for Angular. Run the following command in the command prompt,

tsd install angular –save --resolve

Note that Angular’s type definition file has a dependency on JQuery’s type definition file. So both are installed even though we’ve command just for Angular. After installing, you project structure will have a new tsd.json file and a folder called typings where the actual type definition files can be found.

Prefered way (using typings)

Okay, so tsd is deprecated but unfortunately by the time I was writing this post I didn't notice that. Anyways, not a big deal. Let's see how we can use typings instead of the tsd to manage typings files for our project. Run the following npm command to install typings globally,

npm install typings --global

We have our previously added typings files still in the project. To remove those files, first go to tsd.json and remove every single references from the installed node. Now run this command in the command line to remove those files permanently

tsd reinstall --clean

After doing so, you can remove the tsd.json file from your project. If you noticed, now you have a typings.json file in your project which looks almost same as tsd.json. You are done! Now you can install typings files using a command like below

typings install knockout --save

The below command will install the typings file for angular from the DefinitelyTyped website.

typings install dt~angular --global --save

To know more about the functionalites of different flag, read the documentation of the typings repo

https://github.com/typings/typings

Here goes a final look of the project structure till now

Adding Gulp Task for transpiling typescript into javascript

Add a gulp Configuration File in you project and remove the existing code from it.

Note that we have already installed all the node packages we need to transpile typescript to javascript with a gulp task. The following code transpile all the typescript file available in the client folder and merge them into a single file named site.min.js. site.min.js is located in the wwwroot under the js folder


'use strict';

var gulp = require('gulp'),
    tsc = require('gulp-typescript'),
    sourcemaps = require('gulp-sourcemaps'),
    rimraf = require("rimraf"),
    concat = require("gulp-concat"),
    merge = require('merge2'),
    uglify = require("gulp-uglify"),
    tsProject = tsc.createProject('tsconfig.json');

var paths = {
    webroot: "./wwwroot/",
    clientroot: "./client/"
};

paths.tsOutputPath = paths.webroot + '/js';
paths.js = paths.webroot + "js/**/*.js";
paths.minJs = paths.webroot + "js/**/*.min.js";
paths.concatJsDest = paths.webroot + "js/site.min.js";
paths.allTypeScript = paths.clientroot + '/**/*.ts';
paths.typings = './typings/';
paths.libraryTypeScriptDefinitions = './typings/**/*.ts';

gulp.task('compile:ts', function () {
    var sourceTsFiles = [paths.allTypeScript,                //path to typescript files
                         paths.libraryTypeScriptDefinitions]; //reference to library .d.ts files


    var tsResult = gulp.src(sourceTsFiles)
                       .pipe(sourcemaps.init())
                       .pipe(tsc(tsProject));


    return merge([ // Merge the two output streams, so this task is finished when the IO of both operations are done.
        tsResult.dts.pipe(gulp.dest(paths.tsOutputPath )),
        tsResult.js.pipe(sourcemaps.write('.')).pipe(gulp.dest(paths.tsOutputPath))
    ]);
});

gulp.task("clean:js", function (cb) {
    rimraf(paths.concatJsDest, cb);
});


gulp.task("min:js", function () {
    return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
        .pipe(concat(paths.concatJsDest))
        .pipe(uglify())
        .pipe(gulp.dest("."));
});

As you can see, there are three tasks defined in the gulpfile.js. compile:js transpile typescript files into javascript files. min:js file merges all the javascript files into a single file called site.min.js. clean:js task removes existing site.min.js from the wwwroot/js folder.

Start writing typescript

For demo purpose, create two .ts files under the client folder named app.ts and controller.ts. The code is not important here (you can download the full solution from the github link provided at the bottom of the post), the only important thing is whether we have typescript intellisense in those files.

As you can see, we have intellisense when we start writing angular and raw javascript code. To transpile the typescript files, run the task named “compile:ts”. You will have a result like below if you run all the tasks in order

Now if you update the html with the required library and run the project (see the updated html file with angular binding from the source code provided). The browser will show this message below,

Download Source Code

Github Repository Link - https://github.com/fiyazbinhasan/Typescript-ASP.NET-CORE