An Introduction to TypeScript

You may also like to see:

• Learning AngularJS Part 1: Introduction to AngularJS

Initially, JavaScript language was introduced for the client side programming, later with the Node.js progress it started to become an emerging server-side programming language too. As you might know when you start developing an application with JavaScript and as its code starts to grow, at some points it gets complex and difficult to maintain.

Since JavaScript does not support the features like strong type checking, concepts of object-oriented programming and compile time error checks which make it a difficult language to code with. Also, these problems limit JavaScript usage for enterprise level applications development. TypeScript is developed to overcome these issues and make a reliable and better experience of coding with JavaScript. TypeScript is a promising change and will likely to make JavaScript much famous.

What is TypeScript?

Definition of TypeScript on its official site.

As stated in the definition of the official site, the TypeScript is strongly typed superset of JavaScript that generates the JavaScript, which means that TypeScript is JavaScript moreover it has some additional helpful features. TypeScript is a transpiler which generates the plain JavaScript, so at any point, if you are not comfortable with TypeScript syntax, you can start writing a JavaScript syntax code & it will work perfectly with TypeScript code.

TypeScript helps to code in structural programming style, using classes, interfaces, strong typing, modules and also it easily integrates with other popular JavaScript libraries. TypeScript is kind of wrapper on JavaScript that has extra features to help the developer.

TypeScript is developed by Microsoft and also it has been used to develop the Angular 2, which is also the reason that TypeScript gained so much attention recently. Having the support of two big tech communities means that there is a lot more to come in future and surely it is going to be a more stable tool.

Why TypeScript?

TypeScript is just a superset of JavaScript, it does not have any effect on the final output. So it is completely on you to use TypeScript or not. The reasons to use TypeScript is its great tools which help in larger projects where your code-base is larger, TypeScript helps to manage the code base.

Development Friendly Tools

As discussed earlier, with larger size projects JavaScript code gets messier and difficult to manage and if the code is not properly structured it gets nightmare to work on. Once project size gets bigger making refactoring or any kind of changes to existing code is very scary or kind of next to impossible task. TypeScript has some great tools to manage the larger code base, like navigation, IntelliSense, and easy refactoring. These are the tools that required for a large project.

With these great tools, any changes or refactoring in existing codes is less risky and time savings. The extensions like Resharper helps in utilizing these tools very effectively.

Object Oriented Programming flavor

With TypeScript you can achieve object oriented flavor in JavaScript, it allows you to create an interface, classes, implement inheritance. These are the concepts any developer having experience in OOP language can understand. Let's take an example that you are working on an application in which you have an object of User with different roles (i.e, Admin, EndUser etc), which has some basic user properties. Now if you are working on plain JS, you cannot restrict the definition of User object i.e, its properties and functions. That is the reason you might have different versions of the User object in different methods.

While using TypeScript you can define an interface for User objects and all roles will implement this interface so that we can make sure that object contains the required mandatory properties.

interface IUser {
   id: int; 
   firstName: string;
   LastName: string;
   email: string;
   //...
} 

class SuperAdmin implements IUser {
//other custom properties
} 
class EndUser implements IUser {
//other custom properties
} 

An important point here is that TypeScript gives these flavors of Object Oriented programming but not force it and as already discussed any valid js code is valid TypeScript code so a developer might start developing on concrete objects instead of these abstract implementation without any warning.

Readable and Easy to understandable Code

TypeScript adds details to the signature of function which makes it easy to understand. Let's take an example of jQuery ajax function, how descriptive it is?

jQuery.ajax(url, settings);

What information you can get from this line of code? It is a function which takes two arguments, what are those two arguments types? Is URL an object? what are settings object contains? its declaration has not clear information. To find the answers to above concerns you will require to see its source code or the jQuery documentation which is the overhead.

Let see the strong type declaration of the same function:

ajax(url: string, settings?: AjaxSettings): XHRObject;

interface AjaxSettings{
  cache?: boolean;
  async?: boolean;
  contentType?: any;
  headers?: {
     [key: string]: any;
  };
  //...
}

interface XHRObject {
  responseJSON?: any;
  //...
}

Let see what this function is telling us, it says ajax is a function which can take two arguments, URL which is a string and AjaxSettings is an optional argument, which is an interface and can only contain the properties of specific type, allowed by the interface definition also declaration tells us that this function will return XHRObject.

Migrating Existing Code

If you have existing written code you can easily migrate your js code to TypeScript code without much effort. Since TypeScript is just a superset of JavaScript and any valid JS code is a valid TypeScript code. So you can convert any existing .js file to .ts (TypeScript file extension). After switching file extension you can start changing dynamic types of your code to strongly typed. Once your are done with one module you can pick next module and your code is any time ready and functional whether its completely migrated to TypeScript or not.

You may also like to see:

• Learning AngularJS For Beginner