Getting Started with TypeScript in ASP.NET Core using Visual Studio 2015

This tutorial helps get started with TypeScript in ASP.NET Core using Visual Studio 2015 Update 3.  We will focus on creating famous “Hello World” example.

Step 1 : Creating an empty ASP.NET Core project

Open Visual Studio 2015 Community Edition Update 3, Select New Web Project naming it “ASPNETCoreTypeScript”  and select “Empty” project template  as shown below.

TypeScript can be used with any Web technologies like ASP.NET MVC, any SPA framework or just plain HTML web site.

Step 2: Configure ASP.NET Core to serve Static Files

ASP.NET Core is designed as pluggable framework to add only necessary files, instead of including too many initial stuff.

Lets create HTML file named “index.html” under wwwroot folder.

Right click on wwwroot folder, Add New Item and create index.html file.  This HTML page will act as default page.

For ASP.NET Core to serve static files, we need to add StaticFiles middleware in Configure method of Startup class.

Run the application now, ASP.NET Core renders static HTML page

TypeScript in asp.net core

ASP.NET Core renders HTML page (Old image)

Step 3: What is TypeScript?

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

Any TypeScript code that runs in browser is plain JavaScript so its “Any browser. Any host. Any OS.”

 

TypeScript in asp.net core

Components of TypeScript

The language consists of the new syntax, keywords, and type annotations. As a programmer, the language will be the component you will become most familiar with.

Understanding how to supply type information is an important foundation for the other components because the compiler and language service are most effective when they understand the complex structures you use within your program.

The Compiler performs the type erasure and code transformations that convert your TypeScript code into
JavaScript.

It will emit warnings and errors if it detects problems and can perform additional tasks such as combining the output into a single file, generating source maps, and more.

The Language Service provides type information that can be used by development tools to supply intellisense,type hinting, re-factoring options, and other creative features based on the type information that has been gathered
from written program.

Step 4: Adding TypeScript in ASP.NET Core

Firstly created “Scripts” folder by right click project “AspNetCoreTypescript”. Here in this folder we will add TypeScript Configuration file to use various settings of typescript.

Right Click on “Scripts” folder, Add new file by selecting from template TypeScript JSON Configuration File as shown below

TypeScript in asp.net core

Select TypeScript Configuration File

The reason to add this file in “Scripts” folder is that “Scripts folder will now act as VIRTUAL TYPESCRIPT project” and whenever we write any Typescript code in  “Scripts” it will be automatically TRANSPILE’D to JavaScript.

Add TypeScript file called “app.ts” from Add New File options on “Scripts” folder.

Step 5: Output Directory for Compiled TypeScript files to wwwroot

In beginning I mentioned that “TypeScript compiles to plain JavaScript that runs in browser”. The obvious question is where will compiled plain JavaScript will be placed?

As we are using ASP.NET Core, we have “wwwroot” which will serve  assets directly to clients, including HTML files, CSS files, image files, and JavaScript files. The wwwroot folder is the root of your web site.

Now lets open “tsconfig.json“, we need to add configuration entry as “outDir” i.e. Output Directory so that compiled TypeScript files are copied there.

Just compile once to see that app.ts is compiled to app.js under wwwroot folder along with its mapping.

TypeScript in asp.net core

Compiled TypeScript to JavaScript (Old image)

Step 6: Writing TypeScript code in app.ts

Its time to write code in app.ts file. Below code is mix of TypeScript Code and usual plain JavaScript code. This is shows that “Any JavaScript code is valid TypeScript Code

Open index.html and copy this code. It has reference to app.js in HEAD section, it signifies that wwwroot acts as root folder of our ASP.NET Core

Run the application, Click the “Click Me” button to see welcome message.

TypeScript in asp.net core

Running TypeScript code in ASP.NET Core

Step 7: What is so special here? Build errors in TypeScript code

TypeScript is special because it can do Type checking when doing a build. Function “Welcome” takes string as parameter. What if I make it as number and check?

TypeScript in asp.net core

Build errors in TypeScript Code

Lets see what is happening here.

  1. Function “Welcome” takes parameter “Person” as number making it strongly typed.
  2. Passing variable  “user” containing string. Its obvious that NUMBER isn’t STRING
  3. Build errors clearly stating that its assignment error.

This is one of features TypeScript provides, making it special.

You may also like...

23 Responses

  1. Mo Mi says:

    Thanks for the article.
    Could you provide some more example of why TypeScript is good to use in combination with MVC.
    e.g.

    – Do you get better intelliSense.

    – Can you debug your typescript code inside Visual Studio

    – Can you combine your TypeScript code with jQuery without loosing the strongly typed aspect.

    – Is typscript able to “see” your C# objects for example if you a strongly typed with based on a person class model, would typescript be able to retrieve the firstname of that model, without having to extract it from the html textbox field.

    – Is typescript able to extract values from html fields such as textbox without having to locate the textbox using class name or name attribute, but rather like i the good old webform way.

    Hope you can throw some light on above questions.

    Sincerely
    Mohammad

  2. Neeraj says:

    Hi I’m doing this in MVC , i’m not getting any compile time error but once i click that button mentioned in ur code than no action performed.

  3. Timur says:

    Help, please! I’m trying to follow the steps but so far no luck. First of all,
    app.UseIISPlatformHandler();

    in startup.cs doesn’t compile (here is the error – ‘IApplicationBuilder’ does not contain a definition for ‘UseIISPlatformHandler’ and no extension method ‘UseIISPlatformHandler’ accepting a first argument of type ‘IApplicationBuilder’ could be found (are you missing a using directive or an assembly reference?) )

    I added all references mentioned in previous comments 🙁
    “Microsoft.AspNetCore.StaticFiles”: “1.0.0-rc2-final”,
    “Microsoft.AspNet.IISPlatformHandler”: “1.0.0-rc1-final”
    )
    Commenting out one particular line ( // app.UseIISPlatformHandler();) makes it compile and run, but the next step seem to be fatal for me – when I add a ts file to the project and try to compile the next error appears in output window:
    >VSTSC : tsc.js(31086, 13) JavaScript runtime error : Unable to get property ‘compilerOptions’ of undefined or null reference

    I would appreciate any assistance!

    • This is post is not updated, I will try to update it over weekend. ASP.NET Core RC 2 web tools related are needed for this.

      Also next ASP.NET Core RTM is getting released, better to wait for week.

      • Timur says:

        Thank you Mithun.

      • Timur says:

        After VS2015 and ASP.NET Core update from yesterday (6/27/2016) it looks much better. The second issue (related to typescript compiling) is gone. But the first one is still there:
        ‘IApplicationBuilder’ is an ambiguous reference between ‘Microsoft.AspNet.Builder.IApplicationBuilder’ and ‘Microsoft.AspNetCore.Builder.IApplicationBuilder’.
        Here is my dependencies:
        “dependencies”: {
        “Microsoft.NETCore.App”: {
        “version”: “1.0.0”,
        “type”: “platform”
        },
        “Microsoft.AspNetCore.Diagnostics”: “1.0.0”,
        “Microsoft.AspNetCore.Server.IISIntegration”: “1.0.0”,
        “Microsoft.AspNetCore.Server.Kestrel”: “1.0.0”,
        “Microsoft.Extensions.Logging.Console”: “1.0.0”,
        “Microsoft.AspNetCore.StaticFiles”: “1.0.0”,
        “Microsoft.AspNet.IISPlatformHandler”: “1.0.0-rc1-final”
        }
        Any idea?
        Thanks

  4. Please change the following line in index.html:
    “”
    it should be

  5. Greg says:

    Hi, Thanks for the great tutorials
    Do you have any idea how we can debug ts files in visual studio?
    I can see it is generating the app.js,map file which points back to the ts file ( ../../scripts/app.ts) but the ts files are not in wwwroot so can’t be seen by the browser, this could be the problem?

  6. jim says:

    thanks. Best tutorial i could find on the subject

  7. Yazid Arezki says:

    Thanks for your reply, I have checked DNVM and DNX are installed. My problem is that if I type DNVM list I get:

    1.0.0-rc1-update1 clr

    If I open a new project and look at the references it says 1.0.0-rc1-final and similarly in the project.json. If I look at the properties of my project, the SDK is for update1

  8. Yazid Arezki says:

    I have installed the latest 1.0.0-rc1-update1

  9. Yazid Arezki says:

    Cannot find

    app.UseDefaultFiles();
    app.UseStaticFiles();

  1. January 7, 2016

    […] my article on Getting Started with TypeScript if you just want beginners intro on […]

Leave a Reply