TypeScript (TS) Anatomy: Part 1

Why TypeScript (TS)

When you plan for enterprise-level web application development you do server-side coding and client-side coding. With the advent of HTML5 specifications, the client side is as important as the server side. So you write a unit test for your client-side coding, with MVC frameworks on the client side. Isn't that good?

When working on client-side programming you will be writing in JavaScript (JS). When it comes to large-scale client-side development, JavaScript can be challenging because of its dynamic typing and no object oriented abstraction such as classes or interfaces. Better or desirable tooling support for JavaScript can be another challenge. All together the client-side development process can get slower. The answer to this is Microsoft TypeScript(TS).


What is TypeScript

TypeScript is an open source programming language from Microsoft. This is a superset of JavaScript with OOP flavor of classes and interfaces, strongly typed or static typed such as the Java or C# programming languages. The best thing about TypeScript is that all the additional features are optional. What does it mean?

This means you can write a mix of both JavaScript and OOP features of TypeScript together in a single file. That file will be compiled into a JavaScript file. Any valid JavaScript syntax is valid TypeScript syntax. So programmers who already understand JavaScript can easily adapt to the new TypeScript syntax. Programmers from the OOP world like Java or C# will be very familiar with the syntax of TypeScript.

The TypeScript compiler itself is built on the JavaScript programming language. It uses ECMAScript6 and EMCAScirpt4 features and is superior to other counterparts like CoffeeScript and the Dart programming languages.

Where it is used

It can be used wherever JavaScript is used. AngularJs 2.0, a popular client-side MVC framework from Google, is written in TypeScript. You can write TypeScript for server-side execution as well, for example, NodeJS.

Execution of TypeScript

The TypeScript compiler is a transcompiler. That means it takes a TypeScript file and converts it to another programming language, that's JavaScript.

You can test how TypeScript works at the Microsoft official TypeScript site. Microsoft has given a quick editor where you can type in valid TypeScript and on the right side you can see the JavaScript generated. It's a neat tool to understand the power of TypeScript. You can check it here.

Demonstration

  • TypeScirpt source:
    1. var x: number = 100;  
    2. class Student {  
    3. }  
  • JavaScript generated:
    1. var x = 100;  
    2. var Student = (function () {  
    3.    function Student() {  
    4.    }  
    5.    return Student;  
    6. })();