4 years ago
Afaq Arif
2,818 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.
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.
If you add one more extension Brackets Shell, you can run DOS prompt / shell within Brackets itself.
After installation, open-shell as shown in the below image.
Note − We can also use Typescript as a plugin for Visual Studio 2012 and 2013 setups VS 2015 and above includes the Typescript plugin by default.
4 years ago
Afaq Arif
2,818 Views
3