Interface in TypeScript

The Interface in TypeScript defines the Shape of an object. i.e. it specifies what properties & methods a given object can have and their corresponding value types. TypeScript interfaces are abstract types. They do not contain any code. An object, function, or class that implements the interface must implement all the properties specified in the interface. They are similar to type alias. Both allow us to name a type and use it elsewhere in the code.

Creating an interface

We create an interface using the keyword interface followed by the interface name. It is then followed by curly brackets {}. We define the shape of the object inside the curly brackets.

The following IProduct interface defines the three properties and a method. Note that the interface doesn’t initialize nor implement the properties. It does not contain any code.

Once you have defined an interface, you can use it as a type. In the following example, we annotate the product variable with the IProduct interface.

If the Product variable does not contain any property or method defined in the Interface, then the Typescript compiler immediately throws an error.

For Example, if we remove the property price from the product, then it will result in Property 'price' is missing in type compiler error.

Hence the product object must adhere to an Interface. When it does that, we say that the object implements the interface.

JavaScript does not have Interfaces. Hence Interface definitions are not removed when the code is compiled to JavaScript.

Optional Properties

In the previous example, when we removed the property price from the product object, the compiler flagged it as an error. But in real life, there could be situations where we may require to create objects without assigning values to all properties.

In such cases, we can mark the property as optional with a question mark after the name.

In this example, address is optional. The compiler does not throw any errors.

Read-Only Properties

We can also mark the property as read-only by prefixing the property as readonly. When the property is marked as read-only, we can assign a value to the property only when initializing the object or in the class constructor. Any subsequent assignments will result in a compiler error.

Further reading Read-only Properties in TypeScript

Interface for an array of objects

The following examples show how you can use represent an array of objects using the interface.

The simplest option is to create the interface for the object and use the [] to declare the variable.

You can also create another interface to extend the Array interface as shown below.

Interfaces for functions

Interfaces are also capable of describing the functions.

To create an interface for function type use the keyword interface followed by the interface name. Then follow It up with curly brackets {}. Inside the curly braces { } add the list of parameters (comma-separated) inside parentheses. Follow it up with a semicolon : and return type.

This example shows how you can create an interface for a function. The IAdd interface declares a function with two arguments.

Typescript compiler throws an error if we try to use more arguments or arguments of incompatible data types to the implementation function.

But allows less number of arguments. In this example, arg2 is missing in the implementation function and yet the compiler will not complain.

This example shows how you can create an interface for types that contain a function. The signature of the getName function inside the IEmployee type in declared inline.

You can also create a separate interface for the function and use it to annotate the getName function.

Function Overloading

Functions with the same name but with different parameter types will result in the creation of an overloaded function. Read more about it from Function Overloading

This example has someFunc declared twice but with different arguments and return types. This is known as function overloading.

unction Overloading in TypeScript Interfaces

Class Implementing Interface

The Interfaces can be used with the Classes using the keyword implements.

The following example creates the Employee class which implements the IEmployee interface.

We will learn more about the classes in the subsequent tutorials.

Extending Interfaces

We can extend the Interfaces to include other interfaces. This helps us to create a new interface consisting of definitions from the other interfaces

This example IEmployee interface also extends the IAddress interface. The employee object must contain all the properties from both the interface.

You can extend an interface from several other interfaces.

Note that if the properties with the same name and data type are merged. In the case of functions, the function signatures must match. i.e. number of arguments, their data type, and function return type must be compatible.

Interface Merging

Declaration merging is one of the unique concepts of TypeScript. “declaration merging” means that the compiler merges two or more separate declarations declared with the same name into a single definition.

This example creates two interfaces with the name IEmployee.

The compiler does not complain, but instead, it merges both the interface into one.

That is why the following code results in a compiler error because the employee object does not implement the address, city and state property.

In the case of interface merging, the common properties with the same name and data type are merged. But in the case of functions, if the function signatures do not match, then overload functions are created. This is different from interface extending where it compiler throws an error.

Generic interfaces

The generics in typescript allow us to work with a variety of types instead of a single one.

In this example, we have created two interfaces IaddString & IaddNum. Both take two arguments and add them and return the result.

Using generics, we can reduce the number of interfaces into a single one. Here T represents a type. It could be anything string, number or array, etc. Here a single interface handles multiple related functions.

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top