What is TypeScript, its advantages and some examples

|
| By Webner

What is TypeScript?

TypeScript is a strict syntactical superset of JavaScript and adds optional static typing to the Javascript language.It is pure object oriented with classes, interfaces and statically typed like C# or Java.

It is designed for the development of large applications. As It is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs.

It allows us to use all the latest JavaScript features in our code without worrying about browser support. Once we have written the code, we can compile it to plain old JavaScript supported by all the browsers.

How To Install Typescript:

There are two main ways to get the TypeScript tools:

1. Via npm (the Node.js package manager)
2. By installing TypeScript plugins In the IDE (Visual Studio, Eclipse).

Compiling TypeScript to JavaScript:

Typescript uses .ts file extension. Browsers won’t be able to run this code by themselves. We need to compile the TypeScript into plain JavaScript that can be understood by browsers.
If we are using an IDE, the code can be compiled to JavaScript in the IDE itself. For instance, Visual Studio allows you to directly compile the TypeScript code to JavaScript or it can compile code on Terminal directly by using the command- tsc test.ts. This will create a new file named test.js in the same location.

TypeScript advantages:

Class and Module Support:

TypeScript comes with the class-based object-oriented programming. This makes it fairly simple to structure code into classes, create class hierarchies, and manage the scope and visibility of methods and data throughout the system:

Class Employee {
private firstName: string;
private lastName: string;
private email: string;
private address: string;
private age: integer;

Constructor(firstName:string, lastName:string, email:string, address:string,age:integer){
this.firstName = firstName;
this.lastName = lastName;
this.address = address;
this.age = age;
}
public getFullName(){ }
public getEmail(){ }

}

Modules: In JavaScript, every variable or function that is not defined in a function is automatically created in a global scope. Variables defined with no “var” keyword are also created globally. Populating the global namespace may cause naming conflicts.
TypeScript modules are similar to namespaces and allow variables, functions, classes to the global scope. Internal module declaration can split into multiple files.

Example:

namespace arithMetic
{
export function add(a, b) {
console.log(a + b);
}
}

Static Type-checking:

TypeScript provides support for types (primitives, interfaces, and other custom types). That is the reason TypeScript has the word “Type” in its name. Although types are optional, they’re highly recommended if we want to catch errors early in the development lifecycle. TypeScript compiler will check the type (to surface more typing errors at compiling time):

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

var x;
x = 0; // OK
x = false; // Error: boolean is not assignable to number

ECMAScript 6 Feature Support:

ECMAScript is a Standard for a scripting language. With TypeScript, you can start using many ES6 features although it may not be supported in your target browser.

Example:

// for..of loops
var array = ['x', 'y', 'z'];
for (let item of arr) {
console.log(item);
}
It’s compiled to:-
var arr = ['x', 'y', 'z'];
for (var i = 0; i < arr.length; i++) {
var item = arr[i];
console.log(item);
}

2 comments

  1. Type Script has inbuilt compiler which will convert it to plain JavaScript. We can’t run typescript code directly in the browser.

Leave a Reply

Your email address will not be published. Required fields are marked *