Type Script: Session 1

Type Script: Session 1

(another wonderful beginning of Scripting Language)

Twitter: @abhimaitrey

Introduction

I’ll cover the following topics in this writing:

·         About TypeScript

·         About code editors

·         Environment set-up (Prerequisites and installation)

·         Features (What problems are solved with this)

What is TypeScript?

·         TypeScript is a language that aims to make easy development of large scale applications written in JavaScript.

·         Developed in 2012 by Anders Hejlsberg (co-creator of Turbo Pascal, Delphi and C#) and maintained by Microsoft.

·         Starts with JavaScript and Ends with JavaScript hence everything is JavaScript in background.

·         Compiles into JavaScript language.

·         It is Open Source Apache 2.0 License hence free.

·         Superset of JavaScript.

·         It is a compiled language not interpreted at run-time.

·         It provides big opportunity to use OOPs in the front end

·         Its compiler reads .ts (extension of TypeScript) file and converts into .js (extension of JavaScript) file.

·         Since it is an extension of ECMAScript 6 therefore could be understood like

o   TypeScript = ES6 + Annotations + Types

·         ECMAScript 6 (ES6) with optional typing.

o   ECMAScript 6 aka ES6 is the standardized specification for the JavaScript language

o   Optional Typing means define data type is not necessary at the time of declaring the variable i.e.

string fullName = ”Abhishek Maitrey” can be written as

var fullName = ”Abhishek Maitrey”

or

var fullName : string = “Abhishek Maitrey”

Code Editors

The following editors has inbuilt support of TypeScript:

·         Microsoft Visual Studio family editors

o   VS 2013 update 2

o   VS 2015

o   VS Code (light weight editor)

·         Other than Microsoft

o   Sublime Text

o   Atom

o   WebStorm

o   Eclipse

o   Vim

o   Etc.

Prerequisites

·         Node.js

·         Or Microsoft Visual Studio TypeScript plugins

How to get it?

There are two ways to get the TypeScript in your system.

1.       Visual Studio TypeScript inbuilt or plugins

·         If you are using Visual Studio 2013.2 or 2015, you will get TypeScript template with it.

·         Else, you can download TypeScript plugins also.

2.       Using Node.Js Package Manager (npm)

·         The simplest approach is to use npm (node package manager). Just need to take following steps

                                                               i.      Download NodeJs

                                                             ii.      Once download and installation completes, write the run the following command using command prompt

               npm install -g typescript

Note :->

This command will install the latest stable TypeScript in your system. The current stable version is 1.8 while I’m writing this article hence the examples would be given in this series will be based on TypeScript 1.8 version until explicitly declared another version like TypeScript 2.0.

Features which solve significant problems

1. ·         Complete OOP approach hence supports features like inheritance, interface etc
2. ·       Supports generics, lambdas
3.         Better-design time tooling
4.         Very useful in large-scale JavaScript application problems
5.         Compile-time checking
6.         Dynamic module loading at runtime
7.            Warns about implicit global variables
8. ·         Angular2 (a renowned JavaScript framework by Google) uses TypeScript

What tools am I using for this series?

I’m using :->

·         Microsoft Visual Studio 2015 as IDE

·         NPM as package manager  (optional as VS 2015 already has TS package)

·         And TypeScript 1.8

The first step for development . . .

1. Open Visual Studio 2015
2. Go to File Menu >> New >> Project
3. You’ll get this dialog box

4. Per the given instruction. Choose TypeScript in left panel >> HTML Application with TypeScript  template. I’ve taken .Net Framework 4.5.2
5. Choose your desired folder and filename per your choice. I trust you know this process! 
6. The system will generate a default project for you as given in snapshot below

 Notice the app.ts file which is actually TypeScript file where entire logic is written and index.html is used to render output on internet browser

7. The code produced by the system automatically is given in below image

**Since this code is auto-generated for me, I have not made any changes into it till now.

You can also check the TypeScript version installed on your system by Tools >> Extensions and Updates menu. Refer the below given snapshot.

I believe you would be curious to know the remaining parts of TypeScript. Please wait until next article which is coming shortly.

Next article: Types and implementation, OOPs concepts

Abhishek Maitrey