ASP.NET Core: Modify an Angular App to use Typescript

In this step we’ll modify our Angular 1.x app to use typescript.

Code can be found on: https://github.com/geobarteam/myClub

Branch: 1-2.Add.Typescript

Configure a Typescript Build

First install the latest Typescript compiler:

npm install -g typescript

Add a script folder to your project, this will be the home for your typescript files:

scriptfolder

Add a tsconfig.json file right under the scripts folder.

tsconfigs

The tsconfig.ts file contains the build options for the typescript compiler, it allows to run the Typescript compile process without specifying arguments.  To compile from the command line you should navigate inside the script folder and run: tsc

tsconfig.ts:
[snippet id=”181″]

Configure Typings

Typings allow to simply manage and install TypeScript definitions.

Install typings globally via npm:

npm install typings –global

To install typing definitions for angular 1.x, and Jquery use the command:

typings install angular jquery –ambient –save

 

Migrate the Angular scripts to use typescript

Move all your javascript angular scripts into the “scripts” directory and rename their suffix to “xxxxx.ts”.

tsconfigs

Add the “any” type to all your parameters and variables.
This is only required because we   used the “noImplicitAny”: false setting.  I like to use it as it makes clear that I should type all variables.
[snippet id=”191″]

You should now modify the tsconfig.ts to add the files to compile and set an output file:
[snippet id=”201″]

Inside _Layout.cshtml modify the angular scripts link to use the app.js script file:
[snippet id=”211″]

When compiling the app in VS2015 or running tsc from the command line inside the script folder;  you should end up with a app.js file inside the wwwroot/app directory:

prscr

Test the app, it should still run exactly as before.

Leave a Reply