How Typescript make JavaScript development more easy?

We all know that JavaScript is good. But do you know what’s even better? That's Typescript. TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript and adds optional static typing to the language. TypeScript is designed for development of large applications and transpired to JavaScript. As TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. TypeScript may be used to develop JavaScript applications for both client-side and server-side (Node.js) execution. The TypeScript compiler is itself written in TypeScript and compiled to JavaScript. It is licensed under the Apache 2 License. TypeScript first appeared on 1st of October, 2012. It’s being lead by Anders Hejlsberg (lead architect of C#) and his team.

Features of TypeScript

Compatibility with JavaScript

JavaScript program is also a valid TypeScript program, and a TypeScript program can seamlessly consume JavaScript. With TypeScript, it is possible to use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript-generated code from other JavaScript. Type declarations for these libraries are provided with the source code.

Type annotations

TypeScript provides static typing through type annotations to enable type checking at compile time. This is optional and can be ignored to use the regular dynamic typing of JavaScript. Type annotations can be exported to a separate declarations file to make type information available for TypeScript scripts using types already compiled into JavaScript. Annotations can be declared for an existing JavaScript library, as has been done for Node.js and jQuery.

Type inference

The TypeScript compiler makes use of type inference to infer types when types are not given. For example, the add method in the code above would be inferred as returning a number even if no return type annotation had been provided. This is based on the static types of left and right being numbers, and the compiler's knowledge that the result of adding two numbers is always a number. However, explicitly declaring the return type allows the compiler to verify correctness.

Declaration files

When a TypeScript script gets compiled there is an option to generate a declaration file (with the extension .d.ts) that functions as an interface to the components in the compiled JavaScript. In the process, the compiler strips away all function and method bodies and preserves only the signatures of the types that are exported. The resulting declaration file can then be used to describe the exported virtual TypeScript types of a JavaScript library or module when a third-party developer consumes it from TypeScript.

Classes

TypeScript supports ECMAScript 2015 classes that integrate the optional type annotations support.

Generics

TypeScript supports generic programming.

Modules and namespaces

TypeScript distinguishes between modules and namespaces. Both features in TypeScript support encapsulation of classes, interfaces, functions, and variables into containers. Namespaces utilize immediately-invoked function expression of JavaScript to encapsulate code, whereas modules (formerly external modules) leverage JavaScript library patterns to do so.

Typescript make JavaScript development easier

TypeScript is a typed superset of JavaScript. This means that all the existing JavaScript is also valid TypeScript. You can convert an existing JavaScript project to contain type definitions and other language features that make maintenance and scalability of your project much easier and efficient in the long run. TypeScript comes with a compiler and while a .ts file cannot be run in a browser when compiled, it gives back a .js file which is plain JavaScript as if we originally wrote the whole project in JavaScript itself. While including such a ‘convenience layer’ over JavaScript code isn’t hard and doesn’t hurt any existing infrastructure at all.

TypeScript provides excellent tool support, you can also use TypeScript with existing JavaScript frameworks, such as Node.js and jQuery, and even catch type issues and provide enhanced code help. Special "declaration" files that have a d.ts extension are available for Node.js, jQuery, and other libraries out of the box.

TypeScript support for declaration files makes it easier for you to catch problems up front while working with existing libraries such as jQuery.

You can certainly simulate classes using JavaScript patterns, TypeScript makes the task of defining classes quite easy, especially for developers who come from an object-oriented programming background. This makes it easy to group related variables and functions into a container, which helps tremendously with reuse and maintainability, especially in enterprise-scale JavaScript applications.

The ability to define static types is a key feature of TypeScript (and where its name comes from) and one that can help you identify bugs before even running the code. TypeScript supports many types, including primitive types such as string, number, bool, undefined, and null, as well as object literals and more complex types such as HTMLInputElement.

TypeScript Code is Converted into Plain JavaScript 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.

Data Types

When you declare any variable in JavaScript you typically do so using var keyword without specifying any particular data type for the variable.

Classes

In many web applications, developers keep their JavaScript code merely as a collection of functions. TypeScript allows you to easily and neatly organize your code in classes.

Access Modifiers and Properties

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.

Modules

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.

Inheritance

TypeScript allows you to inherit from existing classes. By inheriting classes you can extend their functionality as per your requirement. For example, you may have a class named Person. You can create specialized classes based on the Person class by extending it to the other classes.

Interfaces

Just as TypeScript supports inheritance, it also supports interfaces. You can define an interface and then implement it in one or more classes.

Constructors

The classes you define in TypeScript can have the 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.

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 the TypeScript code finally gets compiled into plain JavaScript and JavaScript doesn't support the concept of function overloading in its true sense.