How to use TypeScript 1.5 from Visual Studio 2015

Edit. This post is now pretty dated considering how the ASP.NET framework has evolved. For a primer on how to get started quickly with TypeScript on ASP.NET Core with Visual Studio 2015, check this post instead: TypeScript on ASP.NET Core with Visual Studio in 5 easy steps

The latest version of TypeScript has been in the works for quite some time and finally got released on July 20th, coinciding with the release of Visual Studio 2015.

Version 1.5 of TypeScript contains quite a few Changes, many aligning with the latest ECMAScript(ES) 6 spec. Among other cool features support for ES6 Modules, for..of, Computed Properties, let & const, Decorators (an ES 7 proposal), and much more.

This article is a basic tutorial that will show you how to get started with TypeScript in Visual Studio 2015 RTM.

What we are going to do is setup an ASP.NET 5 web Project in Visual Studio 2015, create a compile tasks in Gulp and use Task Runner Explorer to execute those tasks. This will be the basis for a good workflow when working with TypeScript.

Start an ASP.NET 5 Project in Visual Studio 2015

1. Select File->New->Project. Select the ASP.NET Web Application.

Dialogue showing New ASP.NET Web Application in VS 2015 - Base of out TypeScript project
Fig 1 – New ASP.NET Web Application

 

 

2. Select ASP.NET 5 Empty Project.

Dialogue showing the Empty ASP.NET 5 Preview Template in Visual Studio 2015
Fig 2 – Select Empty ASP.NET 5 Template

Getting the TypeScript compiler

Create a package.json file in the solution. Make sure you’re positioned in the project in the solution Explorer, press Ctrl-Shift-A, select DNX-Client-Side-NPM configuration file.

Dialogue showing Add New Item - DNX - Client-side- NPM configuration file - Needed for TypeScript compilation
Fig 3 – Add an NPM configuration file

Under the devDependencies section in the package.json file, add a reference to TypeScript, see code snippet. We’re also going to need Gulp, the plugin to run TypeScript compilation from Gulp and some other plugin, so we’re also adding references for those as well.

"devDependencies": {
    "typescript": "^1.5",
    "gulp": "^3.9.0",
    "gulp-typescript": "^2.8.0",
    "merge": "^1.2.0"
  }

After saving the package.json file there is a notification in the status bar (bottom bar of VS) saying “Installing packages”, after that verify that the package got installed properly by expanding Dependencies-NPM and see that TypeScript got installed.

Image showing NPM Dependencies in Visual Studio 2015
Fig 4 – Verify NPM Dependencies in the Solution Explorer

Add static file serving

Change the Startup class in Startup.cs to:

 public class Startup
    {
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services) { }

        public void Configure(IApplicationBuilder app)
        {
            app.UseStaticFiles();
        }
    }

Add static content

If it’s not already in the directory folder structure, add a directory named wwwroot under your projects root folder. When it’s added in the correct folder and has the correct name, you will see it in the Solution Explorer having a special icon resembling a very abstract earth globe (or is it a ball with four lines on it)?

Add a simple index.html file so that we can make sure everything is working. Use the shortcut (ctrl – shift – a) to add files quickly in Visual Studio 2015.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Index</title>
</head>
<body>



<h1>Hello TypeScript fans!</h1>



</body>
</html>

Run the app using the web command and open your browser of choice and redirect it to http://localhost:5000/index.html
You should now see a the text saying “Hello TypeScript fans!”, given everything is working.

Add a TypeScript file

First add a new folder in the Project root and name it TypeScript, this is where we’ll put our TypeScript code.
Add a file under the TypeScript folder, name the file test.ts. Practice using (ctrl – shift – a) if you’re not already doing it by instinct. The TypeScript file type is in the templates under Installed -> DNX -> Client-side.

Dialogue for  adding a TypeScript file in Visual Studio 2015
Fig 5 – Adding a TypeScript File

Add the following code to your TypeScript file:

//a comment
console.log("Hello from TS!");

Simple code, just enough to make sure the process is working correctly.

Setting up TypeScript compilation with Gulp

To compile our TypeScript files we’re going to setup gulp tasks. Then we can use Task Runner Explorer to run our build tasks.
First add a gulp-file to the solution, in the root of the solution add a Gulp Configuration File.

Dialogue to add a  Gulp Configuration File in Visual Studio 2015 - Needed for TypeScript compilation
Fig 6 – Adding a Gulp configuration file

Create a compile task in gulp

To setup a compile task, add the following code to the Gulp config:

var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    merge = require('merge'),
    fs = require("fs");

eval("var project = " + fs.readFileSync("./project.json"));

var paths = {
    npm: './node_modules/',
    lib: "./" + project.webroot + "/lib/",
    tsSource: './TypeScript/**/*.ts',
    tsOutput: "./" + project.webroot + '/scripts/',
    tsDef: "./TypeScript/definitions/"
};

var tsProject = ts.createProject({
    declarationFiles: true,
    noExternalResolve: false,
    module: 'AMD',
    removeComments: true
});

gulp.task('ts-compile', function () {
    var tsResult = gulp.src(paths.tsSource)
                    .pipe(ts(tsProject));

    return merge([
        tsResult.dts.pipe(gulp.dest(paths.tsDef)),
        tsResult.js.pipe(gulp.dest(paths.tsOutput))
    ]);
});

gulp.task('watch', ['ts-compile'], function () {
    gulp.watch(paths.tsDef, ['ts-compile']);
});

This sets up a Gulp tasks that compiles your TypeScript code and produces a definition file. As to where the TypeScript source files are searched for, the placement of the compiled .js files and the definition files, see the declarations in the paths block.

Run TypeScript compilation with Task Runner Explorer

Hit (ctrl – alt -backspace) to open the Task Runner Explorer window in Visual Studio 2015.
If the Gulp-file contents was correct the following will appear

The Task Runner Explorer windows in Visual Studio 2015 (VS 2015)
Fig 7 – Task Runner Explorer showing Gulp tasks

Double click the ts-compile task to run the TypeScript compilation.
Make sure there is a file named test.js output in the wwwroot/scripts folder. Verify that the comment have been removed in the test.js file according to the compiler setup in the Gulp file (see tsProject in the gulp-file).

Adding the script to the HTML file

Add a reference to the script file at the bottom of the header tag of the HTML file we created earlier (index.html).

<script src="scripts/test.js"></script>

Testing the application

Now run the application and open it from your browser (http://localhost:5000/index.html). Open the F12 devTools in your browser, open the console and verify that the print “Hello from TS!” is displayed.

Image showing the result of this TypeScript -VS 2015 tutorial
Fig 8 – The result and the console print

Get the Code!

The entire Visual Studio Solution with the code can be found on my GitHub account.

More TypeScript projects

If you are interested in setting up a TypeScript – MVC 6 app that uses RequireJS in VS2015, check out this post: Setting up a TypeScript – RequireJS – Gulp – MVC 6 Web Project in Visual Studio 2015 RC

Tutorial for setting up a TypeScript – ASP.NET 5 app in Visual Studio Code: How-to: TypeScript in Visual Studio Code

Setting up an Aurelia project in Visual Studio Code with TypeScript: Aurelia and TypeScript from VS Code

 

Happy coding! 🙂

Getting started: TypeScript 1.5 in Visual Studio 2015
Tagged on:                                 

19 thoughts on “Getting started: TypeScript 1.5 in Visual Studio 2015

  • Pingback: Getting started: TypeScript and MVC 6 from Visual Studio Code | mobilemancer

  • Pingback: TypeScript Functions | mobilemancer

  • Pingback: Visual Studio Code Build Task Shortcut | mobilemancer

  • Pingback: TypeScript Classes | mobilemancer

  • Pingback: TypeScript Classes Part II | mobilemancer

  • Pingback: TypeScript Classes Part III | mobilemancer

  • Pingback: Aurelia, Visual Studio Code and TypeScript | mobilemancer

  • December 9, 2015 at 16:45
    Permalink

    Note in RC1 the startup for static files has changed. I used the following:

    public class Startup
    {
    // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
    public void ConfigureServices(IServiceCollection services) { }

    public void Configure(IApplicationBuilder app)
    {
    app.UseMiddleware(new StaticFileOptions());
    app.UseStaticFiles();
    }

    public static void Main(string[] args) => WebApplication.Run(args);
    }

    Reply
    • December 10, 2015 at 09:24
      Permalink

      Hi Jack!

      Yes, stuff has changed a bit between the RTM time frame(when this was written) and now.
      The project for the post was based on ASP.NET 5 beta5 actually, so it’s waaay back 🙂

      Now when I write a post I write a very clear version disclaimer in every post to make sure people see it, in this old post – not so much.

      But since people still read this, I will take my time and update the post and the code, as soon as possible.

      Thank you for your feedback!

      Reply
  • December 9, 2015 at 17:43
    Permalink

    I had to add this to my project.json:

    “webroot”: “wwwroot”,

    to make this work

    Reply
    • December 10, 2015 at 09:25
      Permalink

      Yes, the “webroot” property disapeared in the transition between ASP.NET 5 beta8 and rc-1.
      My newer posts reflect this, I will revise this asap.

      Happy Coding! 🙂

      Reply
  • December 29, 2015 at 20:54
    Permalink

    I’m using gulp 3.9.0, gulp-typescript 2.10.0, and typescript 1.7.5. When using the `createProject` method, I had to use `tsProject.src` instead of `gulp.src` in this line:

    // Your example.
    var tsResult = gulp.src(paths.tsSource)
    .pipe(ts(tsProject));

    // Correct code in my case:
    var tsResult = tsProject.src(paths.tsSource)
    .pipe(ts(tsProject));

    I found this usage here: https://www.npmjs.com/package/gulp-typescript/#using-tsconfig-json

    Otherwise, thanks!

    Reply
    • January 2, 2016 at 23:01
      Permalink

      Thanks for the comment Mike,

      This post is a bit dated now unfortunately, I need to revise it for current versions of tools/libs used, and also with a proper version of Visual Studio.

      So thanks for your feedback, I will use it when I do my update! 🙂
      (Also great info for others reading this before I manage to get an update up!)

      Reply
  • March 29, 2016 at 14:06
    Permalink

    Great post, thanks for putting it together.

    Had to add “Microsoft.AspNet.StaticFiles”: “1.0.0-rc1-final” to project.json under “dependencies” to compile.

    Reply
    • April 8, 2016 at 00:14
      Permalink

      Great that you got it to work! 🙂

      As can be seen in the project.json file, this post is pretty old, as it’s referring to beta5 of the framework.
      I’m going to do an overhaul of the post, but I’m awaiting the rc2 release, that’s hopefully is coming now in April.

      Happy Coding! 🙂

      Reply
  • July 27, 2016 at 22:52
    Permalink

    thanks a lot! for some reason a have a machine with vs2015 that simply won’t create any project with the new ASP.NET Core structure and I didn’t know how to set it up by hand

    Reply
    • July 28, 2016 at 00:39
      Permalink

      VS2015 won’t support ASP.NET Core if it’s a clean new install.
      If you haven’t done it, download VS2015 Update 3 and then the .NET Core tools for Visual Studio.

      Good luck 🙂

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *