Typescript

Welcome to the most widely used programming language typescript.

Typescript is a typed superset of JavaScript that compiles to plain javascript. It provides a strongly typed layer as well as an object-oriented layer in conjunction with JavaScript.

If you are having expertise in object-oriented language will now find it easy to write code using typescript which will be compiled to JavaScript.

With typescript, you can write the declaration code to enforce rules.

For e.g. If a variable is supposed to be a string you can declare it as such in typescript .there is no such strong typing with JavaScript.

If your code assigns an integer value to that same variable, the typescript compiler catches and reports that error.

To start our coding and developing experience with typescript we need to know the prerequisite and installation process, we have created an interactive step by step installation process for your ease. Please go through the video below:

tsc-h or just tsc

and now let's learn about through creating a sample file in typescript.

We can create a sample file sample.ts and now we can run that sample file by typing

tsc sample.ts

To compile multiple typescript file we can type

tsc one.ts two.ts many.ts

we can also combine multiple files into one javascript file

tsc.sample.ts  one.ts  out typeapp.js

Why we should learn typescript

Typescript is not a replacement of javascript, it allows developers to use their object-oriented programming skills directly to produce better javascript. It gives you the opportunity to write less javascript code.

Simulating object orientation in javascript can involve writing more code.

Typescript can reduce that burden because types can be declared in typescript.

Typescript is an attempt to bridge differences between server-side language like c# with OOP without sacrificing javascript true power.

Understanding classes/Modules/Functions in Typescript

Typescript works as object-oriented programming language classes ,functions etc.

A class is a copy of creating objects, class encapsulates data for the object. Typescript gives built-in support for this concept called class.

Typescript Classes

In object-oriented language classes are the fundamentals entities to create components

Typescript uses object-oriented techniques like abstraction and encapsulation.class in typescript is compiled to plain javascript by typescript, compilers to work across browsers.

[code] Class student { stuCode : number; stuName: string; constructor (code: number, name: string) { This.stuName= name; This.stuCode= code; } getnumber() :number { Return 99; } } [/code]

Typescript compiler will convert the class to the following javascript code using closure:

[code] var student = (function() /** @class */ { function student (name, code) { This.stuName = name; This.stuCode = code; } student.prototype.getnumber=function() { Return 90; }; Return student; } ()); [/code]

Constructor in Typescript

Constructor is a special method which is used to call when creating an object, in typescript, it is always defined as “constructor”

For eg

[code]Class student { stuCode : number; stuName: string; constructor (code: number, name: string) { This.stuName= name; This.stuCode= code; } getnumber() :number { Return 99; } }[/code]

Type script -Modules

When we write typescript code the scope is always global. Projects with multiple files is written in one file and are accessible in other files.

For e.g.

File1.ts

[code]var greeting: string ="Hello World";[/code]

File2.ts

[code] Console.log(greeting); Greeting ="Hello Typescript";[/code]

The above variable greeting declared in file1.ts can be accessed in file2.ts

Editors Available for typescript

·       Webmatrix

·       Brackets

·       Intellij

·       Sublime text

·       Microsoft visual studio 2013

We can explore all the related plugins and installation in the video below

Typescript Build tools

Build tools in typescript to help automate the transformation and bundling of your code into a single file. Most common build-in tools available that can be integrated with typescript.

·       Browsefy

·       Gulp

·       Webpack

·       Grunt

Exploring typescript playground

Let take a quick look at how typescript playground works 

Next is to select walkthrough JavaScript

You will see both the windows parallel and same code

   Here we can see the use of function Greeter

     
    And so we will receive the output as this window:

I am sure by now you are now ready to explore in-depth with the coolest programming language. Our team of experienced developers has prepared a full course on this.

Have a look in the video below

 http://skillbakery.com/courses/master-typescript.html

Happy learning