A Brief Introduction to TypeScript — Part 4

One of the most important principles in TypeScript is type-checking 🔍, and this focuses on the shape. So far, we have used a limited amount of data types, all of them being primitive data types. But in many scenarios we might need to implement our own custom types 🔧, and TypeScript makes this possible with the use of interfaces.

An interface in object-oriented languages is a an abstract type that defines behaviours as method signatures. It can be considered as a code contract 📝, in order to implement it we must follow its rules.

Let’s create an interface called LabelledValue, this would be a custom type that assigns a label to a value:

Now we can use LabelledValue as a type, for instance, in a variable declaration:

We need to provide all the required elements in the interface in order to use it 📝:

The transpiler would alert us of this error with a message like: Type “{label: string}” is not assignable to type “LabelledValue”. Property “value" is missing in type “{label: string}”.

Optional properties

Some properties of an interface might not be required, and TypeScript allow us to define when a property is optional or not. Each optional property is denoted by a ? at the end of the property name.

In this interface the property hexColor is optional, and we can use this interface as follows:

The advantage of optional properties is that we can describe the optional properties while still also preventing use of properties that are not part of the interface.

Readonly properties

Properties with the keyword readonly can only be modified when an object is first created.

After the assignment, the values x and y can’t be changed.

The transpiler will alert us with the message: Left-hand side of assignment expression cannot be a constant or a read-only property.

This is pretty handy if we need an “immutable” behaviour. In general, we use const when we are using a variable , and readonly if we are using a property.

Interfaces are a very powerful feature, they allow us to have much more control over the way we structure our data. Let’s use Color interface inside Point interface, that way we can have consistency in our objects:

Class Types

In some cases class inheritance might not be the way to go ⚠️, but interfaces can provide the consistency needed among classes. Mainly because interfaces explicitly enforce that a class meets a particular contract.

An interface defines a generic template (properties and methods) that will have to be implemented by the class, this is another difference with inheritance where the child class inherits the members from the parent class.

For instance, we can define an interface that would enforce the implementation of two methods, area and volume.

Now we will implement this interface in a class: