TypeScript Environment Setup
There are two popular options available for writing TypeScript code:
- Use an online playground
- Use Visual Studio 2015 and above
Online Playground
Typescriptlang.org provides a web page where we can immediately write and see javascript output in a web page. You can click on Playground link.
In the left section of page we can write our TypeScript code and right section automatically converts it into JavaScript code. For example, we declare a variable num1 as number datatype in left section and it automatically updated in right section in JavaScript code.
This page also provide examples of some features of TypeScript. Click on the dropdown above the left section and choose any example.
Visual Studio
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
- app.css
- index.html
- web.config
'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:
- app.js
- app.js.map
app.js file contains the compiled javascript code from app.ts file and app.js.map file is a source map file.
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.