How to set up the environment of Typescript

3 years ago
Afaq Arif
2324 Views
3

In this chapter, we will talk about how the TypeScript environment can be installed on the Windows platform. We will also learn how to install the IDE.

We know TypeScript programming online, so we can run all the available examples online simultaneously while doing our work. It helps you in reading and testing results by trying different options. You can freely change any example and run it online.

var message:string = "Hello World...!" 
console.log(message)

It will generate following JavaScript code on composing.

//Generated by typescript 1.8.10
var message = "Hello World...!";
console.log(message);

You can check your scripts online by using TypeScript TS Playground. The online will show the relevant JavaScript given out by the compiler.

You can also use the following example in TS Playground that will show the result on the rights side in a log.

var num:number = 20
console.log(num)
// The result will be in a log is [LOG]: 20

Local Environment Setup

TypeScript is an Open Source Technology. It can run on any host, any browser, and any kind of OS. You can write and test a TypeScript by using the following tools.

A Text Editor

The text editor will help you to write your source code. A few examples of editors include Windows Notepad, Notepad++, Emacs, vim or visual studio code, etc. The editors used may change with Operating System. The .ts extension is used typically for source files.

The TypeScript Compiler

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

The TSC creates a JavaScript type of the .ts file given to it. In simple, the TSC creates an equivalent JavaScript source code from the input TypeScript file. This process is called transpiration. However, the compiler will not accept any raw JavaScript file given to it. The compiler only deals with .ts or .d.ts files.

Installing Node.js

Node.js is an open-source, cross-platform runtime environment for server-side JavaScript. It runs JavaScript without any browser support and uses the Google V8 JavaScript Engine to run code. You can easily download Node.js source code or a pre-built installer for your program.

Node is available here − https://nodejs.org/en/download

Installation on Windows

You can install Node.js in Windows by following the steps given below.

Step 1 − First download and run the .msi installer for Node.

Step 2 − For checking of successful installation, enter the command node –v in the terminal window.

Step 3 − The following command is used in a terminal window to install TypeScript.

npm install -g typescript

Installation on Mac OS X

You can download a pre-compiled binary package to install node.js on Mac OS X for easy installation. Try this to http://nodejs.org/ and click the install button to download the latest package.

You can install the package from the .dmg by following the install wizard. It will install both node and npm (Node Package Manager). It helps installation of extra packages for node.js.

Installation on Linux

You can install Node.js and NPM by following various conditions.

Ruby and GCC. You will need Ruby 1.8.6 or newer and GCC 4.2 or newer.
Homebrew. Homebrew is a package manager originally planned for Mac. It also ports to Linux as Linuxbrew. You can learn more about Homebrew at http://brew.sh/ and Linuxbrew at http://brew.sh/linuxbrew

After completing these conditions, you can install Node.js by typing the following command on the terminal.

brew install node.

IDE Support

The different development platforms like Visual Studio, Sublime Text 2, WebStorm/PHPStorm, Eclipse, Brackets, etc can be used for TypeScript. We discuss Visual Studio Code and Brackets IDEs here. We used Visual Studio Code (Windows platform) as the development environment here.

Visual Studio Code

It is an open-source IDE from Visual Studio used for Mac OS X, Linux, and Windows platforms. Visual Studio Code is available at ttps://code.visualstudio.com/

Installation on Windows

Step 1 − Download Visual Studio Code for Windows.

Step 2 − Now double-click on VSCodeSetup.exe to start the setup process. It will take a minute.

Step 3 − The IDE screenshot is shown below.

Step 4 − The file’s path can be accessed quickly by right-clicking on the file → open in the command prompt. The Reveal in Explorer option shows the file in the File Explorer.

Installation on Mac OS X

The Guidelines for the installation of Visual Studio Code on Mac OS are available here.

Linux specific installation guide for Visual Studio Code is available at here.

Brackets

Brackets is a free open-source editor for web development created by Adobe Systems. It is available for Linux, Windows, and Mac OS X. Brackets is available at http://brackets.io/

TypeScript Extensions for Brackets

Brackets help extensions for adding extra services through the Extension Manager. The following steps explain installing TypeScript extensions using the same.

Post-installation, click on the extension manager icon with the label installed on the right-hand side of the editor. Enter typescript in the search box.
Install the Brackets TSLint and Brackets TypeScript plugins.