TypeScript - Some bascis & setting up the environment

Introduction to series

TypeScript is relatively new language from Microsoft to write JavaScript in structured way with class and interfaces. It transpiles to JavaScript to execute in browser. Means no TypeScript runtime is required. Its open source and leverage features which are going to come in future JavaScript versions. Currently it transpiles to ES 5 version of JavaScript. Since its converted to JavaScript, we can get rid of it anytime and continue using the generated JavaScript. More details in their home page.

Basics

According to me its just another language with it's own syntax. But the interesting thing is TypeScript is super set of JavaScript. All the valid JavaScript programs are valid TypeScript programs. So to starting ts is easy as rename .js files to .ts.

Importance

There is no meaning in going behind some buzzwords and wasting the time. AngularJS team is writing Angular 2 in TypeScript. But they are telling we can write our ng2 apps in JavaScript. So that should not be the reason for us to invest in TS.

Lets see why we need to learn TypeScript for surviving.

JavaScript is dynamic typed.

Developing in JavaScript is very difficult. Especially when its a big project. I have started a series "Caution JavaScript Ahead" on the same. It doesn't tell what will break if we do refactor. There are tools like JSLint and JSHint. But still its a problem.

Any time your method might get a new definition. The below code execution will stop console.log writing to the browser console for all the subsequent calls.

console.log= function(msg){alert('I do nothing');}

May be TS cannot solve all the shortcomings of JS. But many things will be easy when using TypeScript

Structured JavaScript

We can have/workaround namespaces in JavaScript. But its difficult. TS makes it very much easy. We can write namespace the same way of Java/C#.

We can have inheritance in pure JavaScript. But its little difficult for a normal OOP developer. TypeScript makes it easy with the class keyword. In fact ES 6 has the class keyword.

Setting up environment

It can be done with notepad of course but requires the TypeScript compiler to convert to JavaScript. At the time of writing this post the latest released version is TS 1.6 and there are plans will TS 1.8. The TypeScript installer which includes the compiler can be downloaded from their home page.

Visual Studio is perfect editor when combining with web essentials extension. Then we get a split view where we can see the TS in left and corresponding JS in right. Each save will compile and right side will be refreshed.

The location of tsc.exe the compiler is C:\Program Files (x86)\Microsoft SDKs\TypeScript\<version> on windows machine

NPM

If the development environment is different with support for node npm, TS can be installed using 

npm install -g typescript

Learning TypeScript

Microsoft provided an online playground for TS. We can learn the language features there without installing anything in our computer. The home page itself gives pretty good documentation without going to MSDN.

Working TS and JS together 

The obvious question when moving to TypeScript is what to do with the pure JavaScript libraries. Can I use jQuery library from TypeScript? Yes we can via the type definition files. They bridge the gap and make the JavaScript libraries available to TS. More details on how to write type definition files later.

Debugging TypeScript

Debugging support is essential for any language. If TypeScript is compiled to JavaScript it can be debugged via F12 developer tools in browser. IE helps to debug the code as TypeScript itself. Visual Studio also gives us the debugging support.