My Experience With Typescript : Good way to write Javascript Code

Submitted by hudixt on Fri, 11/17/2017 - 05:04
typescript

Typescript is a superset of Javascript which provides optional static typing, classes, and interfaces. One of the main advantages of using Typescript for Javascript project is to create more robust and readable software. Typescript is being adopted by lot more software project these days with several popular frameworks such Angular 4 are written using Typescript.

trend

The above Google trend shows the interest growing for Typescript over the time.

Installing 

The easiest way to install typescript is thru NPM. The g flag is used to install it globally in the system

npm install -g typescript

To check the installation, Open the terminal and run

tsc -v

Compiling Into Javascript

Typescript files need to be compiled into javascript file to be able to run them in the browser. To compile ts file name main.ts run the following code

tsc main.ts

This will compile to main.js file, Whereas

# Will result in separate .js files: main.js worker.js. tsc main.ts worker.ts # Compiles all .ts files in the current folder. Does NOT work recursively. tsc *.ts

# Initializes a watcher process that will keep main.js up to date. tsc main.ts --watch

Interfaces

In typescript support of interfaces is added. One of the main advantages of the typescript is that it adds support of constructs which helps in organizing the code in the better form. With help of interfaces, we can define the complex type definitions such as while creating an object that might contain other properties.

interface BaseCar{

 engine: string;

 color: string;

}

class Car implements BaseCar {

 constructor (public engine: string, public color: string) { }

}

Classes

Typescript adds support for classes. So it’s easy to get into if you have previous experience with languages like C++, Java, etc. Also, it provides support for the constructor.

class Greeter {

 greeting: string;

 constructor (message: string) {

  this.greeting = message;

 }

 greet() {

  return "Hello, " + this.greeting;

 }

}

Compiled code in javascript will be 

var Greeter = (function () {

 function Greeter(message) {

  this.greeting = message;

 }

 Greeter.prototype.greet = function () {

  return "Hello, " + this.greeting;

  }; return Greeter;

})();

Type Checking

Type checking in javascript is often pain, especially for developers who are starting out. With typescript, a compiler will check the type so typing errors can be ignored at the runtime.

var name: string; name = 2; // type error, assign a number to a string type variable

Module System

Modules are the way to organize the logical grouping of the code. There are 2 type of module:-

Internal modules

They are contained in one file and you don’t have to reference any outside files to use them. After Typescript 1.6 or later module syntax was replaced with the namespace. These need to be contained in namespace block (We need to explicitly define the declaration)

namespace Modules1 {

 export function add(x, y) {

  console.log(x + y);

 }

}

External modules

External modules hide the internal statements of the module definitions and show only the methods and parameters associated with the declared variable.

Suppose the following code is in main.ts.

import log = module("log");

log.message("hello");

This file references an external module,log defined by whatever log.ts exports.

export function message(s: string) {

 console.log(s);

}

Superset Of Javascript

You all current javascript code is already TS code. Typescript is in javascript as SASS is to CSS. Being superset, the learning curve of the typescript is very simple. You can rename your javascript file into typescript file and create tsconfig file.

Plenty of tools

This is an important part when using any new language, as typescript is one of the active and growing community, there are various tools like tslint, typing, etc. Also has a language service which provides code analysis and automatic code completion.

Declaration Files

With declaration file, we can use the library that was originally designed for Javascript.
A declaration file has the extension .d.ts and contains various information about the library and its API. Most of the time library already comes with .d.ts files to make it out of the box compatible with typescript.

Angular Framework

One of the most popular web framework backed by Google is written using Typescript. It’s recommended for developers to use the same. It’s one of the most popular frameworks at this moment, also as the community start moving to angular 2 from angular 1 more and more support will be available for the same.
Conclusion

Conclusion

Is it worth giving Typescript a shot?

 

GIF

Typescript is ideal for developers who are already familiar with OOP concept and don’t want to deal with the limitation of Javascript. To know more about Typescript, Check Official Documentation.