Defining TypeScript interfaces

What is an interface (interface) and how are they defined in TypeScript. Examples where an interface offers help when developing.

We continue our , the Javascript superset that implements static typing in this language (among other things), to talk about interfaces.

TypeScript offers the ability to work with interfaces, which are a type of construct used in the . The interfaces can give us a little more work when it comes to throwing lines of code, but they help us a lot during the whole time that we are developing a program.

In this article we will briefly explain what an interface is, you will learn how to define an interface and we will be able to see how an interface makes it easier for us to quickly display errors when we are writing code.

What is an interface

We do not want to miss the opportunity to clarify the interface concept, although the truth is that it is somewhat beyond the scope of this article.

Technically, interfaces are a mechanism that tries to make up for the lack of multiple inheritance. Most languages ​​that implement object orientation do not offer the ability to define a class that extends multiple classes at once, and yet it is sometimes desirable. That’s where interfaces come in.

A class can extend another class, inheriting its properties and methods, and declare that it implements any number of interfaces. The difference between classes that you extend from interfaces is that interfaces contain no implementation of their methods, so the class that implements an interface must write the code for all the methods it contains. For this reason, interfaces are said to be like a contract, specifying the things that a class must contain in order for it to implement an interface or fulfill the contract declared by that interface.

That would be the concept in a generic way. Then each language can have slight differences when applying interfaces. For example, in TypeScript an interface can define properties, while in other languages ​​interfaces only define methods.

Declare an interface in TypeScript

Interfaces in TypeScript are declared in much the same way as classes, indicating the list of properties and methods they will contain. There is only one fundamental detail, that properties cannot have values ​​and methods cannot have code for their implementation.

Here we can see the code of an interface called “submersibleInterface”.

interface submersibleInterface { maxUnderWaterTime: number; maxDepth: number; repelWater(): void; }

As you can see, we have only indicated the types and methods, but we have not indicated their values. We have also used the TypeScript typing, since it is basic to take advantage of the language characteristics.

implement an interface

At the traditional programming level, the most typical thing you can do with an interface is to implement it in a class.

Once your interface is defined, you can implement it in as many classes as you like by using the keyword “implements” in the class header. For our example, once the interface submersibleInterface is defined, all classes that are going to have objects that can be submerged will have to implement it.

class submersibleClock implements submersibleInterface { maxUnderWaterTime = 1; maxDepth = 10; repelWater() { console.log(‘The water slips on me’); } }

The interface makes it necessary to declare all the properties and implement all the methods when defining the class. In short, it is like a contract.

If the interface contract is broken, then either our editor will complain (if it’s prepared to display TypeScript errors), or the compiler will warn us.

The interface as a new type

But in addition, TypeScript offers us an additional application of interfaces: the creation of a new type that we can use throughout our code.

interface calendarappointment { dateTime: Date; title: string; place: string; } let appointment1: appointmentCalendar;

As you can see, when creating variables, I can tell that their type is a declared interface. Perhaps at first you won’t find it very useful, but it really is interesting because of all the help that the editor or the TypeScript compiler offers you when programming.

For example, this is what would happen if you assign a value to the variable “quote1” that does not fulfill the interface contract, by assigning it anything else that does not have this type.

Not only the editor warns us, but also the TypeScript compiler.

So that no one complains, you will need to assign a value to the “quote1” variable that matches the interface, that is, fulfill the contract established in the type declaration.

appointment1 = { dateTime: new Date(Date.now()), title: ‘Program in TypeScript’, place: ‘Oficina de .com’ }

Now we do have all the properties with the declared types, so the editor will no longer mark this assignment as an error and the compiler will be able to do its job of transpiling to Javascript.

conclusion

As you have seen, the interfaces are not complicated to define. In the world of object-oriented programming they are used a lot, but what we wanted to show in this article is that they can be used in TypeScript to produce help at development time.

They force us to write a bit more code but give us valuable types that we’ll be able to use in our variables. From then on, any small error when writing the code, either because we forget something, or we type incorrectly and write a property wrong, the editor or the compiler will warn us, preventing us from having to go back crazy to find bugs, which are sometimes hard to spot.