TypeScript Features
Overview
TypeScript is an object-oriented programming language that was designed by Microsoft in the year 2012. It is considered the superset of JavaScript as TypeScript is built on top of JavaScript. Firstly, the TypeScript code has been written then it will be compiled into plain JavaScript code with the help of a TypeScript compiler for further execution. It extends the functionality of JavaScript by adding data types, classes, and other object-oriented features with type-checking. If a JavaScript program has no syntax errors, it can be considered a TypeScript program also.
Scope
This article will revolve around the discussion of the features of TypeScript. There are various important features in TypeScript that make it more convenient to use for developers than other programming languages. We will get to know about the features in detail.
Features of TypeScript
There are various features of TypeScript that make it different from other competitor languages and efficient to use for developers. Some of the important features are given below:
- Object Oriented Programming Language - TypeScript provides support for Object Oriented Programming concepts like Classes, Interfaces, Inheritance, etc. For Development, TypeScript code is valid for both client-side and server-side rendering.
- Compilation - TypeScript compiler provides the feature of error checking. If there is a syntax error in the code, then TypeScript will generate a compilation error so that the error could get highlighted before runtime.
- Strong Static Typing - TypeScript has the feature of strong static typing which comes through TLS(TypeScript language service). If a variable is declared with no type specified then TLS can conclude it based on its value.
- TypeScript Supports JavaScript Libraries - As it is a superset of JavaScript, all the libraries and existing JavaScript code are valid TypeScript code as well. As a result, Developers can access and use all the JavaScript libraries, tools, and frameworks easily.
- Supports Type Definitions - It supports type definitions for existing JavaScript libraries. TypeScript definition file that has the .d.ts extension defines external JavaScript libraries.
- Portable - TypeScript is portable as the code written in TypeScript can be run on any browser or operating system. It can run in any environment in which JavaScript can run.
- JavaScript is TypeScript - It is a widely used TypeScript feature in which the code is written in JavaScript with a .js extension that can be converted to TypeScript by changing the extension from .js to .ts.
- TypeScript is just a JS - TypeScript code doesn't directly run on the browser. A program written in TypeScript starts with JavaScript and ends with JavaScript. Therefore, the code written in TypeScript can be compiled and converted to JavaScript equivalent for execution. This process is known as trans-piled, in which the browser can read TypeScript code and display the desired output.
- DOM Manipulation - We can make use of TypeScript to handle DOM for adding or removing elements.
- Code Readability in TypeScript - Its code is written using classes and interfaces. They provide organization to the program and therefore it is easy to maintain and debug the code.
- Code Completion - It provides code completion in the tsc or in the IDE to help users to write code efficiently. Also, Users can flag errors in the IDE when typing the code. This saves time and enables the user to find and resolve errors easily.
Type Inferencing in TypeScript
Adding type annotations to our code is the extra code, we have to write which consumes more time and effort. TypeScript infers types of variables when there is no information available in the form of type annotations.
Type Inference on Variable Declaration:
It can automatically infer the type of variable if a type annotation hasn't been specified.
Example
In the first example, TypeScript has inferred the type to be Date. In the second example, the type of name is 'John'.
Type Inference with Functions:
It can happen with functions as well.
Example
In the above example, the return type of add and the type of ten is number. TypeScript can infer the return type of a function and the type of variable in a declaration where the assignment is from a function.
Interfaces in TypeScript
It is an abstract type that tells the compiler which property names an object can have. It defines the syntax for the classes to follow, which simply means a class that implements an interface and is bound to implement all its members. They define events, properties, and methods that are the members of an interface. Declaration of members takes place in interfaces. They are used to validate objects passed as a parameter to a function. It is used to validate the objects which are returned from a particular function.
Example:
Output:
Unions in TypeScript
In TypeScript, variables can be defined that can have multiple types of values. So, TypeScript can merge two different types of data (like a number, string, etc.) into a single type which is further known as union type. They are capable to express a variable defined with multiple types. Two or more data types can be combined with the help of a pipe ('|') symbol between the types.
Syntax:
Example:
Output:
Generics in TypeScript
Generics is an important feature in TypeScript that enables developers to create reusable code components which work with different types instead of a single type. Generics are used in almost all programming languages that have support for Object Oriented Programming. To use generics, developers are required to write a type parameter between the open < and close > brackets. They use a type variable <T> which the user can define while invoking it, hence, making the code more flexible.
Example:
Output:
Tuples in TypeScript
In TypeScript, a new data type has been introduced which is known as a tuple. It is a widely used TypeScript feature. A tuple is a data type in which two values of different data types can be stored. It is a typed array with a pre-defined length and type for each index. There are two basic operations in a tuple: push() is used to append an item to a tuple. pop() is used to return the last value of a tuple and remove an item from a tuple.
Syntax:
Example:
Output:
Mapped Types in TypeScript
Mapped types are an essential feature of TypeScript which is used to create new types based on another type. By declaring a map type, developers can avoid initializing interfaces over and over. In this process, one type of variable is taken and transformed into another type by applying transformations to each of its properties.
Example:
Output:
Type Guards in TypeScript
In TypeScript, Type Guard is a TypeScript feature that is used to get information about the type of a variable within a conditional block. TypeScript uses some in-built operators of JavaScript to determine if an object contains a property. These are typeof, instanceof, in operators. Type guard enables the developers to command the TypeScript compiler to conclude a specific type for a variable that is present in a particular context, which ensures the type of argument which is previously defined.
Example:
Output:
Decorators in TypeScript
In TypeScript, a decorator is a special kind of TypeScript feature that refers to a declaration that can be attached to a method, property, class declaration, or parameter. They use the form @expression, where the expression should evaluate a function that can be called at runtime with the information provided that is further related to a decorated declaration. The number of parameters and their types tells where a decorator is applied. To represent the syntax, a class named decorator has been created as follows:
Syntax
Shapes in TypeScript
They function similarly to the TypeScript interfaces. TypeScript deals with objects that have the same shape. In simple words, if two objects have similar attributes then those two objects will be considered to be of the same type.
Example
Regardless of the fact that ActionSet and notActionSet have a different number of identifiers, the TypeScript compiler will assign an instance of notActionSet to x which has a type of ActionSet.
Congratulations!
After reading this article, You get to know about the features of TypeScript. Now, you are ready to implement these features in your project efficiently.
Conclusion
- We get to know about various features of TypeScript like Static Type Checking, Compilation, Support for Type Definitions, Code Readability, etc.
- We get to know about Type Inference which can save our time and make our code more readable by not having type annotations for every declaration.
- We get to know about the functioning of Interfaces, Generics, and Tuples in TypeScript code.
- We get to know about Mapped Types, Type Guards, Shapes, and Decorators and their proper functioning in the TypeScript code.
- Hope this article has provided you with information regarding the features of TypeScript.
See Also
To get more familiar with the TypeScript programming language, a developer should have an understanding of JavaScript programming language. So, To get a sound knowledge of JavaScript, refer to: