TypeScript–Surprisingly Simple, Extraordinarily Powerful– Part 4

Classes and Interfaces:

TypeScript has built-in support for classes. Class is similar to what we see in C#/Java. Classes are used to encapsulate code like functions, variables, define constructors so that they can be used in the whole application.

To define a class in TypeScript is very much similar to C# as shown below

class Student {}, the class is defined by using keyword “class” followed by the name of the class. The class can define constructors, fields, functions inside the curly braces. Below is the code for TypeScript and JavaScript when a class is defined

As we can see JavaScript just created a self-invoking function with the name Student. In classes, everything is public by default.

In the next example, we define fields in a class and populate values using a constructor.

NOTE: The use of “this” keyword. It gives access to “this” instance to TS

Functions in Classes:

Properties in Classes: They act as filters and can have get/set block to help developers determine how the values can be set or get.

Following code extends the above example to include functions inside a class, we can very well add complex types in the class similar to how this happens in C#.  Also, instantiating these classes is similar to in OOPs concept where we use a “new” keyword to create an instance of a class.

The JavaScript generated for the above code is shown below:

We can see from here that JavaScript used Object.defineProperty to map Properties from TypeScript. Also, note in TypeScript how we are able to use “window.onLoad” function exactly in a similar fashion as it would be used in JavaScript. This shows the power and flexibility of TypeScript, you can just write pure JavaScript in TypeScript and it will work seamlessly.

The functions defined in TypeScript don’t need to have the “function” keyword as shown in the “print details” function. We can specify the return type for the function after “:”.

Extending Classes:

JavaScript does not natively support inheritance i.e. extending classes, but it can be achieved with “prototype”. TypeScript enables us to use the OOPs concept to create, manage an inheritance, and extending classes. TypeScript uses the keyword “extends” to extend base class functionality to the child class.

Below is the example of using inheritance in TypeScript with the example modified from the above section

Here we see that rather than creating an instance of College class inside Student class, we are inheriting Student class from College class and to call the constructor of College class we use the keyword “super()”. “Super” lets us call the base class constructor and pass any required parameters. Then we will be able to access all the public variables/fields from the base class in child class by using “this” as shown for “this.name”. This feature allows us to manage the relationship between classes better as compared to writing native JavaScript.

Interfaces

Interfaces are code contract which provides a way to make sure all the similar classes implement the same set of functions. In TypeScript the concept of Interfaces is similar to that of C# and Java. We can define a set of methods in an interface and have the class implement that interface. For a class to implement an Interface, use keyword “implements”.

This shows how to interface is defined in TypeScript, note that in JavaScript there is no code change as JavaScript does not worry about code contract. In this interface we have defined a field “year of birth” and a function “age”, now any class which needs to implement this interface will be forced(compiler error) to define the same field and implement the “age” function. Below is the student class which now implements student interface.

Note that we can also use optional parameters (?) in the interface which allows flexibility for classes to decide whether they want to implement those fields.

Extending Interfaces:

Interfaces can be extended in a similar fashion as classes using the keyword “extends”. Extending interfaces allows us to make sure we have the opportunity to provide more granular functionality for classes. This concept is very similar to OOPs. Here any class which implements child interface (the interface which has extended the base interface) will need to implement all the fields and functions of both child and parent interface.

Next Up Modules