Why typescript is developed while having JavaScript?

  • By Manisha Jadhav
  • September 25, 2019
  • Web Development
Why typescript is developed while having JavaScript?

Why typescript is developed while having JavaScript?

This Blog will show you the additional features that are available in typescript and how better typescript as compared to javascript

What is JavaScript?

JavaScript was designed by Brendan Eich in 1995. ECMAScript is the certified name of the programming language. JavaScript is lightweight, interpreted programming language used to create creating network-centric applications. JavaScript is integrated with Java and HTML. JavaScript is most commonly used to develop web pages and client-side script to interact with user. JavaScript is also known as LiveScript, but Netscape change its name to JavaScript.

Benefits of JavaScript

    •  Javascript Helps to reduce server load.
    •  Javascript gives immediate response at client side.
    •  Javascript provides the Improved interactivity 
    •  Javascript having the Richer interfaces. 

Limitations of JavaScript

Javascript having the few limitations like:

 Javascript is totally scripting language it’s not supported to object oriented programming language so we cannot use oops code re-usability concepts in JavaScript

  • JavaScript does not support modules.
  • JavaScript does not have Interface.
  • JavaScript does not support optional parameter function.

To overcome the above drawbacks typescript in the world with advanced features like typescript support object oriented language, it also supports to the modules, interfaces, and all the optional parameters.so let’s see about the typescript in detail.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 A Brief History of Typescript

 Anders Hejlsberg was the first person who started working on the typescript at Microsoft. In 2010 the first version of the typescript was out (TypeScript 0.8). Due to the lack of support of IDE Javascript community not accepted completely. In October 2012 the Typescript version publically released with advanced features. Next typescript version is typescript 3.4 released in 15 March 2019 declare as a preview release. Latest stable release of typescript in 28 August 2019 (typescript 3.6).

 What is Typescript?

Typescript is a superset of JavaScript means it having all the features of ES5, ES6 and some additional features below figure shows in depth what’s exactly typescript. Typescript is invented by Microsoft. Typescript is totally based on the object oriented programming concepts and it’s having the typescript compiler (TSC) use to convert easily typescript file into JavaScript file.

Waste 1

What is Transpiling process?

Basically browsers are not support to typescript means browser not able to understand the typescript code for this purpose we need to convert it into JavaScript the conversion process from typescript code to javascript code is known as transpiling process. To convert from ts file to js file need one compiler name as TSC stand for typescript compiler. Below figure shows regarding transpiling process.

Transpiling  process steps:

Waste 2

Step1: Write typescript code

Step2: Save this file with extension .ts (code.ts)

Step3: Convert this file into JavaScript using TSC (code.js)

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 Why Should We Use Typescript?

  • Typescript helps to simplify js code, which is easier to read and fix.
  • Typescript is freely available.
  • Typescript is highly productive development tools for practices and JavaScript IDEs like type checking.
  • Huge improvement over plain JavaScript.
  • Typescript supports all features of ES6 (ECMAScript 6), with more efficiency.
  • Great type system, including generics.
  • To support the latest browser typescript code compiled on the basis of version standards.
  • Aligned with ECMAScript for compatibility.
  • Typescript only supports static typing not dynamic typing.
  • Typescript helps to save the developer’s time.
  • Typescript is a superset of the versions of js like ES3, ES5, ES6.

Additional Features of Typescript

TypeScript has several features, here are some top features of TypeScript:

a) Object-oriented language:

 Typescript is completely object oriented language it supports all the concepts of oops like inheritance, classes, interfaces, modules etc. Object oriented programming language makes JavaScript code very clean.

Example:

class StudentModel

{

studentId:  number;

studentName: string;

contactNo: string;

city: string;

}

class StudentOperation{

add(studentData: StudentModel) : number {

//add student

let studentId =5;// Id returned after save

return studentId;

}

}

Above example shows how properly oops language write JavaScript code. Typescript supports interfaces, interfaces are the best way to specify a contract. Generics concept is for the compile time type checking just use <T> after the identifier. Inheritance concept used to access properties from the parent class to the child class. Typescript support both the public and private access modifier by default members are public you can change it to private then simply use private access modifier. Below example illustrate public and private access modifier.

Below examples shows how typescript support to the OOPS concept like Interfaces, Generics, Inheritance, and Method Access Modifiers. Below example showing one private variable and one public.

Access Modifiers:

class Department{

              public Departmentname:string;

              private category:string;

              public country:string;

              private state:string;

 

             }

 Interface Example:

interface GST {

   gstpayerId: string;

   calculateGST(): number;

   }

class GstTax implements GST {

   gstpayerId: string;

   calculateGST (): number {

   return 10000;

   }

}

class GstService implements GST {

   gstpayerId: string;

   calculateGST(): number {

   return 2000;

   }

}

Inheritance Example:

class Student{

 Firstname:string;

    }

class Student extends StudentRecord {

   Class:string;

           RoleNo:string

           private AddStudent(){

          this.Class=“Computer”;

          this. RoleNo =“ten”;

          this.FirstName=“manisha”;

          // do the operation

   }

}

Generics Example:

function identity<T> (arg: T): T {

   return arg;

   }

   //example showing implementation of generics

   let out1 = identity <string>(“hello seven mentor”);

   let out2 = identity <number> (23);

 Supports JavaScript libraries:  Typescript also support old JavaScript libraries because typescript is a superset of JavaScript. Typescript support existing JS libraries, JS Frameworks, tools and existing code.

 JavaScript is a TypeScript:  Code written in JavaScript can be converted into typescript simply changing the extension from .js to .ts.

 TypeScript is portable: Typescript is called as portable because it can run on devices browsers, or any operating systems.

  TypeScript is just a JS:  Typescript is just like a js because code written in Typescript is compiled and converted into its equivalent JavaScript code.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

 What is strongly/Static Type? How does it Work?

Typescripts does not allow mixing of values with different data types. When such limitations are violated, errors are thrown. Due to that, you have to define types when declaring variables and you cannot assign other values in typescript. But in JavaScript it can happen. Below example explain in details:

In JavaScript:

 Var  name = “Manisha”;

Var  age = 25;

Var  department = “development”;

 In Typescript:

Var name : string =“Manisha”;

Var age : number =25;

Var department :string = “development”;

 In the above example their no major difference in the code .in the JavaScript we can’t define its datatype like name is of type string or age is of type number. Datatype assigned at compile time, but in the typescript we declare that the name is of type string like name:string and age is of type number age:number or department is of type same string. Why there is a need to write the type in typescript because of that system can easily understand the code. Easy to catch the errors in the system. Suppose you’re taking any variable without type then what happen;

 In Javascript:

Example:

Var age =25;

age =”twenty-five”;

In this example the age variable may be created the issue because of the redeclaration  like it converts the number age into string type age and return the value as string.

Typescript Example:

let agenumber = 26;

age = twenty-two; // This will give an error.

age = 5; // This will not give error  work properly

 Less Code Compared to JavaScript

As compared with the JavaScript code typescript code is less to write and more reusability due to oops concept Typescript code is easier to understand.

 Readability

In the typescript the readability is more due to classes, Interfaces, inheritance etc. As the code is inscribed in interfaces and classes it is more expressive and easy to understand and read. Below two examples explain how the typescript code easily readable and JavaScript is not that much readable.

Typescript Example:

class Department {

   private name: string;

   constructor (private message: string) {

   this.name = message;

   }

   info() {

   return “Hello, “ + this. name;

   }

}

JavaScript Example:

var name = (function () {

   function name (message) {

   this.info = message;

   }

   name.prototype.greet = function () {

   return “Hello, “ + this.info;

   };

   return name;

})();

 Compatibility

Typescript is very compatible with JavaScript libraries like Lodash, underscore.js, etc. Typescript having the many built-in functions which are easy to use that helpful to make development faster.

 “Compiler” to Convert Typescript Code to JavaScript-Equivalent Code

 TypeScript code contains plain JavaScript code as well as certain constructs and specific keywords to TypeScript. When you compile the TypeScript code it is converted into JavaScript. That means the generated JavaScript code can be used with any browser that supports JavaScript.

 Supports Modules

A module is nothing but the one container for your code that helps you form your code in a well-ordered way similar to .NET namespaces. Modules gives the better maintainability. Below example shows how module arrange the code.

Example:

module Department {

   class Employee {

   }

   class EmployeeSection {

   targetEmployee: Employee;

   }

   export class Students {

   }

}

var obj = new Department. Students ();

Typescript Feature Support

Typescript having all the features of ES6 and additional so typescript support all the ES6 concepts. Typescript having some additional features like it supports lambda function or Arrow Function .Typescript has introduced a somewhat different syntax to define anonymous functions called the fat arrow. Lambda function divided into three parts −

 Parameters : A function may optionally have parameters.

 Fat Arrow(=> ):The fat arrow notation/lambda notation (=>) It is also called as the goes to operator.

 Statements({}): Represents the function’s instruction set.

 Syntax:  var a = () => {};

Example:

//arrow function with rest parameters

var myfun = (a,…rest)=>{ console.log(a + “”+rest);}

      myfun(10,20,30,40);

 TypeScript in the above example the var myfun is one variable that assign the arrow function having the multiple parameters for passing multiple parameters rest parameter concept is used.

 Reduces Bugs

Typescript reduces bugs like undefined, null handling etc. Typescript is a strongly typed language so it restrict developers to write code with proper checks.

For Free, Demo classes Call: 8237077325
Registration Link: Click Here!

Function Overloading

Overloaded functions allows you to define in the TypeScript. Due to this you can invoke different implementations of a function depending on the parameter. JavaScript doesn’t support the concept of function overloading.

Example:

class functionOverloading{

   addStudent(custId: number);

   addStudent(college: string);

   addStudent(value: any) {

       if (value && typeof value == “number”) {

       alert(“overload  First : “ + value);

       }

       if (value && typeof value == “string”) {

              alert(“overload  Second : “ + value);

       }

   }

}

Debugging

Typescript code is easy to debug as compared to JavaScript.

 Portable

TypeScript is portable across devices, browsers, and operating systems. It can run on any environment where JavaScript code runs. TypeScript does not need a devoted VM or a definite runtime environment to execute 

Author-
Manisha Jadhav

Call the Trainer and Book your free demo Class for JAVA now!!!

call icon

© Copyright 2019 | Sevenmentor Pvt Ltd.

 

Submit Comment

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

*
*