Environment Setup for Development in TypeScript

Environment setup for development in NodeJS

What is TypeScript

TypeScript is a programming language developed and maintained by Microsoft. It is super set of JavaScript which provides optional static typing to language. TypeScript may be used to develop JavaScript applications for client-side or server-side (Node.js) execution.

TypeScript compiles to JavaScript so any existing framework of JavaScript can execute it i.e. browsers. Every valid JavaScript program is also a valid TypeScript program but not every TypeScript program is JavaScript which is clear from following figure.

Figure-1, (Image source: https://www.tutorialspoint.com)

For development in TypeScript, one needs to know the following:

A Text Editor

The text editor helps you to write your source code. Examples of a few editors include Windows Notepad, Notepad++, sublime & atom, etc. Editors used may vary with Operating Systems.
The source files are typically named with the extension .ts.

The TypeScript Compiler

The TypeScript compiler is itself a .ts file compiled down to JavaScript (.js) file. The TSC (TypeScript Compiler) is a source-to-source compiler (transcompiler / transpiler).

Figure-2, (Image source: https://www.tutorialspoint.com)

The TSC command generates a JavaScript version of the .ts file passed to it. Bascially, the TSC produces an equivalent JavaScript source code from the Typescript file given as an input to it. This process is termed as transpilation.
However, the compiler tends to rejects any raw JavaScript file passed to it. The compiler only deals with .ts or .d.ts files.

For installing TypeScript, we need to install NodeJs and npm.

Installation on Windows

Download the LTS version of node from https://nodejs.org/en/download/ and install it.

Figure-3 (Node.js installation window)

This package would also include the latest LTS version of npm (In my case node: v8.9.0 and npm: v5.5.1). you can verify the installation of node and npm with executing following commands in command prompt.

Figure-4 (Command Prompt showing versions of node and npm)

Installation on Ubuntu (16.04 LTS)

Installation of node in Ubuntu is much simple, you just need to open the terminal and execute following commands:
First you need to update apt packages list using following command.

Figure-5 (Terminal command to update packages list)

After updating apt packages list execute following commands.

Figure-6 (Installation of curl, no need if you already installed)

Figure-7 (Put the path of node version 8 so that it can be downloaded from this path)

Figure-8 (This will install the latest LTS version of node and npm)

Now to check version of installed node and npm execute following commands:

Figure-9 (Node and npm versions installed)

To install TypeScript, we just need to execute the following command in either command prompt (for windows) or terminal (for Ubuntu/Linux)

Figure-10 (It will install the latest version of typescript)

This will include ‘tsc’ environment variable for transpilation of TypeScript, for verification of installation of TypeScript execute the following command:

Figure-11 (Showing the installed version of typescript)

Editor

The most common and powerful IDE for development of TypeScript is Visual Studio Code. For installation of Visual Studio Code visit this website and download the respective installation package i.e. for windows or Ubuntu/Linux. https://code.visualstudio.com/
After it in windows open the installer follow the on screen instructions,

Figure-12 (Visual Studio Code installation window)

And in Ubuntu run the following command in terminal

Figure-13 (Terminal command to install a Debian package)

Hello World Program

Open Visual Studio and write your first program:

Figure-14 (Snippet of Visual Studio Code)

Let us see how to compile and execute a TypeScript program using Visual Studio Code. Follow the steps given below.

Step 1 − Save the file with .ts extension. We saved the file as Test.ts. The code editor marks errors in the code, if any, while you save it.

Step 2 − Right-click the TypeScript file under the Working Files option in VS Code’s Explore Pane. Select Open in Command Prompt/terminal option.

Figure-15 (Right click Hello.ts File and select Open in Terminal)

Step 3 − To compile the file use the following command on the terminal window. Then use node to execute JavaScript file.

Figure-16 (In terminal write tsc Hello.ts to transpile and node index.js to execute it)

The successful transpilation of TypeScript Code and execution of transpiled JavaScript code indicates the correct installation of node, npm, visual studio code and TypeScript for development.