TypeScript Environment Setup
There are two popular options available for writing TypeScript code:
- Use an online playground
- Use Visual Studio 2015 and above
This page also provide examples of some features of TypeScript. Click on the dropdown above the left section and choose any example.
Visual Studio 2015 and above has already TypeScript installed. Open New project and choose template "HTML Application with TypeScript" like shown below.
In Visual Studio 2017 by default 'HTML Application with TypeScript' template is not available. You can search for online templates. Click on Online and write 'HTML Application with TypeScript' in search textbox and click on Install button.
By default using above template, these 4 files are created.
'app.ts' file is our typescript code file where we write our typescript code. Just build the project and then click on 'Show All Files' link. Build will create two additional files:
We'll learn more about source maps files later. 'app.js' is already linked with index.html file we don't need to do anything here.
Open app.ts file and remove all code and write below code.
var var1: number = 44; console.log('Value: ' + var1);
Above code will declare a number variable named 'var1' and print its value into console window.
Build project and run the application in chrome. Open Developer Tools in chrome by pressing 'F12' and click on console tab. Result 44 is shown in console tab like shown below.
In the above section, we write some basic TypeScript code and run the application to check that our environment is setup or not.
In our next posts, we shall learn more about TypeScript syntax and data types available in TypeScript.