Getting Started with TypeScript

Hi Friends,

In today’s discussion, we are going to discuss TypeScript. Basically, in Enterprise-Scale websites, you are writing tons of JavaScript, many a times it happens that it sounds very clumsy, I mean not a reusable and maintainable code unless you are following some of the predefined JavaScript Design Patterns. Still many people write JavaScript just to accomplish short term goal rather than stressing on its coding standard and which is why it sounds like image shown below

26th

However, we really want code which is highly maintainable and reusable. And, this is the place, where in TypeScript really shines. Off-course, there are others tons of advantages of using the same and we will see them one by one in coming posts. But, off-course everybody likes Reusable, Maintainable and Human-Readable code almost like my workstation shown below.

27th

One of the pain point as a C# developer, which I feel is, JavaScript is dynamically typed language which means while writing If I am doing anything wrong, I will come to know at run-time. It would be really helpful, if there is any kind of wrapper which tells me upfront, hey you are writing wrong code here as in syntax checking or like number is supposed to passed here and you are passing string. I mean kind of static checking upfront. This way coding efficiency increases immensly. Although, this is my perception from systems language point of view and UI developers may have different opinion about this.

By definition, TypeScript is a SuperSet of JavaScript, which really means, its built on the top of JavaScript, hence you can use TypeScript fundamentals to write a very clean code, which upon compilation, compiles to JavaScript. Hence, TypeScript, I would say a way to write JavaScript; much better way than its current shape. Again, I’m talking from OOPs (Object Oriented Design) point of view, JavaScript Developers may differ from this.

Now, let’s look some of the cool features, which TypeScript offers from high level.

Cross Browser Support –> Doesn’t matter which browser, you are on. It works smoothly

Any OS –> Again, since JavaScript is going to run ultimately. Doesn’t matter which OS you are using.

Project is open source –> Typescript is open source project. Therefore, if you like to dig inside, you can certainly do and contribute features as well.

Very Good Tooling support –> Visual Studio, Visual Studio Code, Webstorm etc has got really good tooling support.

Now, let’s take a look at TypeScript features on top of JavaScript. Let us say if you are coming from C# or Java background, then you might be already knowing this.

Static Typing

Classes

Interfaces

Constructors, Properties

View Models

Lambdas etc

Below is the simple flow how TypeScript compiler works.

28th

Although the diagram is self explanatory. But, let me cover the same in brief with an example. Here, TS compiler takes the TS code and converts the same into equivalent JavaScript code. Below is the sample TS snippet.

and equivalent JS

You can explore many more examples @ http://www.typescriptlang.org/PlaygroundHowever, for getting started you can also get started with this handbook http://www.typescriptlang.org/Handbook

In the coming sections, we will delve further with many more examples around that. Thanks, for joining me.

Thanks,
Rahul Sahay
happy coding

2,097 total views, 1 views today