a blog for those who code

Thursday 30 April 2015

Interfaces in TypeScript

In this post we are going to discuss about Interfaces in TypeScript. In simple terms we can say that Interfaces are code contracts. It is a way of standardization of your code. As we have already covered Classes in TypeScript and Inheritance in TypeScript, you might be familiar with extending a class from another class.

The importance of extending of class is to create multiple classes of a parent class when you do not want to duplicate a logic. But the problem of extending a class in TypeScript is that you cannot extend more than one parent class in your child class. Then you might want to use the functionality of Interfaces because you can implement more than interface in a class. The interface will come handy when you want to drive consistency across a set of classes and when you want to allow objects to interact easily.

One thing to note that there is no concept of Interfaces in JavaScript language. Actually Interfaces is totally a compile time approach used to standardization your code structure so that you can catch up issues up front. An interface is a contractual obligation to implement certain methods and properties. The benefit of this is that compiler can verify that a contract which your code relies upon is actually met.

Example of Interface :

In the above example I have created an Interface Sport (which has a property _sportName and a function getSportName()), and then created two classes Cricket and Football which implements the interface Sport. Since we are implementing the interface in our class, we need to adhere to the contract that means we need to implement all the properties and methods in our class.

As you can see in the JavaScript section on the right that the interfaces have no run-time implementation. The JavaScript that is produced by the code is entirely driven by class implementation. That means the value of using Interfaces is to give structure to the code only at compile time.

Interface Extend other Interface : Yes, an interface can extend other interface just like how classes extend other classes using extend keyword.

interface A {
    _a : string;
interface B extends A{
    _b : string;
Now what the above code is telling us that if you implement interface A, you will only have to implement the properties and functions of A interface, but if you implement B you have to implement the properties and methods of A and B interfaces. Its simply like you have a baby interface and then you have bigger interface which extends the baby interfaces. This is important because you may have a classes which only needs interface A and another class which needs both A and B, thus this approach of baby interfaces solves our problem.

Optional Properties in Interface : Now there might be scenario where you do not want to implement only certain properties of an interface. In TypeScript you have the possibility of defining optional properties, that means you may or may not implement that property. You can define the optional properties by using the symbol ?.
As you can see in the above code TypeScript compiler is only giving an error about _b missing not _a because it is an optional property.

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment