Why use TypeScript in 2018 in Web Application

Why use TypeScript in 2018 in Web Application
by

Defining TypeScript

TypeScript is an object-oriented programming language developed and maintained by Microsoft Corporation. It is a superset of JavaScript and contains all of its elements and we can say that TypeScript is modern JavaScript with classes, optional types, interfaces and more.

TypeScript totally follows the OOPS concept and with the help of TSC (TypeScript Compiler), we can convert Typescript code (.ts file) to JavaScript (.js file)

Typescript is a superset of JavaScript.

A brief history of TypeScript

In 2010 Anders Hejlsberg (the founder of Typescript) started working on Typescript at Microsoft and in 2012 the first version of Typescript was released to public (Typescript 0.8). Although the release of Typescript was praised by many people around the world, but still due to lack of support in major IDEs, it was not majorly adopted by JavaScript community.

The first version of Typescript (Typescript 0.8) was released to public on October 2012.

The latest version of Typescript (Typescript 3.0) was released to public on July 2018 and you can
Download the latest version here!

Why should we use TypeScript?

  • TypeScript simplifies JavaScript code which is easier to read and debug
  • TypeScript is Open source
  • TypeScript provides highly productive development tools for JavaScript IDE and practices like static checking
  • TypeScript makes code easier to read and understand
  • With TypeScript, we can make a huge improvement over plain JavaScript
  • TypeScript gives us all the benefits of ES6 (ECMAScript 6), plus more productivity
  • TypeScript can help to avoid painful bugs that developers commonly run into when writing JavaScript by type checking the code
  • Powerful type system, including generics
  • TypeScript is nothing but JavaScript with some additional features
  • Structural, rather than nominal
  • TypeScript code can be compiled as per ES5 and ES6 standards to support latest browser
  • Aligned with ECMAScript for compatibility
  • Starts and ends with JavaScript
  • Supports static typing
  • TypeScript will save your developers time
  • TypeScript is superset of ES3, ES5 and ES6

TypeScript Additional Features:

  • Functions with optional parameters
  • Functions with rest parameters
  • Generics support
  • Modules support

Differences between TypeScript and JavaScript

TypeScript uses concepts such as types and interfaces to describe data being used. This allows developers to rapidly detect errors.

TypeScript JavaScript
It is an object oriented programming language It is a scripting language
In TypeScript there is a Static typing feature There is no static typing
In TypeScript, we can declare a variable in multiple ways like:
var Identifier:Data-type = value;
var Identifier: Data-type;
var Identifier = value;
var Identifier;
JavaScript does not have data types, so we cannot declare variables like TypeScript.
TypeScript support modules JavaScript does not support modules
TypeScript has interfaces. JavaScript does not have Interface.
TypeScript supports optional parameter function. JavaScript has no optional parameter feature.
It supports function Overloading JavaScript doesn’t supports function Overloading
Typescript supports data types JavaScript doesn’t support data types

Google has also announced they would replace AtScript with TypeScript. Angular 2 is built on TypeScript as well.

See what others said about the web’s most popular language TypeScript

“We love TypeScript for many things… With TypeScript, several of our team members have said things like ‘I now actually understand most of our own code!’ because they can easily traverse it and understand relationships much better. And we’ve found several bugs via TypeScript’s checks.

— Brad Green, Engineering Director – AngularJS

“One of Ionic’s main goals is tomake app development as quick and easy as possible, and the tooling support TypeScript gives us with autocompletion, type checking and source documentation really aligns with that.”

— Tim Lancina, Tooling Developer – Ionic

“TypeScript is a smart choice when writing a modern web- or JavaScript-based application.TypeScript’s carefully considered language features and functionality, and its consistently improving tools, result in a terrifically productive development experience.”

— Aaron Cornelius, Research Fellow – Epic

“TypeScript helped us to reuse the team’s knowledge and to keep the same team velocity by providing the same excellent developer experience as C# … A huge improvement over plain JavaScript.”

— Valio Stoychev, PM Lead – NativeScript


Talk to our TypeScript expert
to put your ideas into execution

Hire a TypeScript Developer

Top TypeScript Features You Might Not Know

Object-Oriented Programming

Typescript includes a very good set of Object Oriented Programming (OOP) features, that are good to maintain robust and clean code; this improves the code quality and maintainability. These OOP features make the TypeScript code very clean and organized.

Example with the following snippet:

class CustomerModel
{
customerId: number;
companyName: string;
contactName: string;
country: string; } class CustomerOperation{
addCustomer(customerData: CustomerModel) : number {
//add customer
let customerId =5;// Id returned after save
return customerId; } }

Supports Interfaces, generics, Inheritance, and method access modifiers

Typescript supports interfaces, generics, Inheritance, and method access modifiers. Interfaces are good way of specifying a contract. Generics helps to provide compile time checking, inheritance enables new objects to take on the properties of existing objects and Access modifiers control the accessibility of the members of a class. TypeScript has two access modifiers – public and private. By default, the members are public but you can explicitly add a public or private modifier to them.

Example with the following snippet:

Interface:

interface ITax {
taxpayerId: string;
calculateTax(): number;
} class IncomeTax implements ITax {
taxpayerId: string;
calculateTax(): number {
return 10000;
} } class ServiceTax implements ITax {
taxpayerId: string;
calculateTax(): number {
return 2000;
} }

Access Modifiers and properties:

class Customers{
public companyname:string;
private country:string; }

Showing one public and one private variable

Inheritance:

class Employee{
Firstname:string;
} class Company extends Employee {
Department:string;
Role:string
private AddEmployee(){
this.Department="myDept";
this.Role="Manager";
this.FirstName="Test";
// do the operation
} }

Generics:

function identity<T> (arg: T): T {
return arg;
}
//example showing implementation of generics
let output = identity <string>("myString");
let outputl = identity <number> (23);

Strongly/Static type

TypeScript does not allow intermixing of values with different datatypes. When such restrictions are violated, errors are thrown. Therefore, you have to define type when declaring variables and you cannot assign other values other than the type defined which is very possible in JavaScript.

Example with the following snippet:

let testnumber:  number = 6;
testnumber = "myNumber"; // This will throw an error.
testnumber = 5; // This will work

Compile Time/Static Type-checking

If we do not follow the proper syntax and semantics of any programming language , then compile time errors are thrown by the compiler. They will not let your program to execute a single line until, you remove all the syntax errors or until you debug the compile time errors. It is the same case with TypeScript as well.

Example with the following snippet:

let isDone: boolean = false;
isDone = "345";  //This will throw an error.
isDone = true; //This will work

Less Code as compared to JavaScript

Typescript is a wrapper around JavaScript so helper classes are available that reduces the code. Code in Typescript is easier to understand.

Readability

Interfaces, classes etc. provide readability to the code. As the code is written in classes and Interfaces, it is more meaningful and easy to read and understand.

Example with the following snippet:

class Greeter {
private greeting: string;
constructor (private message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
} }

Javascript code:

var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter; })();

Compatibility

Typescript is compatible with JavaScript libraries like underscorejs, Lodash etc. They have many inbuilt and easy to use functions that makes development faster.

Provide a “compiler” that can convert code to JavaScript-equivalent code

TypeScript code consists of plain JavaScript code as well as certain keywords and constructs specific to TypeScript. However, when you compile the TypeScript code it is converted into plain JavaScript. That means the resultant JavaScript can be used with any browser that supports JavaScript.

Supports Module

As your TypeScript code base grows, it becomes important to organize classes and interfaces for better maintainability. TypeScript modules allow you to do just that. A module is a container for your code that helps you organize your code in a neat way. Conceptually you may find them similar to .NET namespaces.

Example with the following snippet:

module Company {
class Employee {
}
class EmployeeHelper {
targetEmployee: Employee;
}
export class Customer {
} } var obj = new Company.Customer();

ES6 Feature Support

Typescript is a superset of ES6, so all feature of ES6 are there plus some additional features like it supports Arrow Function commonly called lambda function. ES6 has introduced a slightly different syntax to define anonymous functions called the fat arrow syntax.

Example with the following snippet

setTimeout(() => {
console.log("setTimeout called!")
}, 1000);

Used in Popular Frameworks

TypeScript has become more and more popular over the last few years. Maybe the defining moment of TypeScript popularity was the time when Angular 2 officially switched to TypeScript, which was a win-win situation.

Reduces bugs

It reduces bugs like Null handling, undefined etc. Strongly typed characteristics restrict developers to write type specific code with proper checks.

Function Overloading

TypeScript allows you to define overloaded functions. This way you can invoke different implementations of a function depending on the parameter. Remember, however, that TypeScript function overloading is bit odd and requires type checking during the implementation. This limitation is due to the fact that TypeScript code finally gets compiled into plain JavaScript and JavaScript doesn’t support the concept of function overloading in its true sense.

Example with the following snippet:

class functionOverloading{
addCustomer(custId: number);
addCustomer(company: string);
addCustomer(value: any) {
if (value && typeof value == "number") {
alert("First overload - " + value);
}
if (value && typeof value == "string") {
alert("Second overload - " + value);
}
} }

Constructors

The classes you define in TypeScript can have constructor. The constructor usually does the job of initializing the object by setting default values to its properties. The constructor can also be overloaded just like a function.

Example with the following snippet:

export class SampleClass{
private title: string;
constructor(public constructorexample: string){
this.title = constructorexample;
} }

Debugging

It is easy to debug the code written with TypeScript.

TypeScript is just JavaScript

TypeScript starts with JavaScript and ends with JavaScript. Typescript adopts the basic building blocks of your program from JavaScript. All TypeScript code is converted into its JavaScript equivalent for the purpose of execution.

Example with the following snippet:

class Greeter {
greeting: string;
constructor (message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
} }

Javascript code:

var Greeter = (function () {
function Greeter(message) {
this.greeting = message;
}
Greeter.prototype.greet = function () {
return "Hello, " + this.greeting;
};
return Greeter; })();

Portable

TypeScript is portable across browsers, devices, and operating systems. It can run on any environment that JavaScript runs on. Unlike its counterparts, TypeScript does not need a dedicated VM or a specific runtime environment to execute.

Summary

We recommend Typescript for any large/medium projects because of its language features.

At GrayCell, we are using TypeScript extensively for some of our projects. If you have any questions about Typescript, drop a mail to us, and we will get in touch with you.


Looking to hire dedicated Typescript developers? Let us help!

Contact us and let’s talk about your business

HIRE TYPESCRIPT DEVELOPERS