Creating interfaces

In this lesson, we learn what interfaces are and how to create them.

Understanding an interface

An interface allows a new type to be created with a name and structure. The structure includes all the properties and methods that the type has without any implementation.

Interfaces don't exist in JavaScript - they are only used by the TypeScript compiler type checking process.

The syntax for creating an interface

We create an interface with the interface keyword, followed by its name, followed by the properties and methods that make up the interface in curly braces:

Copy
interface TypeName {
  propertyName: PropertyType;
  methodName: (paramName: ParamType) => MethodReturnType;
}

Using interfaces for objects

As an exercise, we will create an interface called ButtonProps that has a text property of type string and an onClick method that has no parameters and doesn't return anything.

Open exercise in CodeSandbox

The code declares a variable called buyButton of type ButtonProps which hasn't been defined yet.

• Create the ButtonProps type using an interface above the buyButton declaration.

The TypeScript type checking is now happy with our code.

Optional interface members

Interface members can be optional.

• Change the ButtonProps interface that we created earlier so that the onClick method is optional:

• We can then remove the onClick method from BuyButton:

Copy
const buyButton: ButtonProps = {
  text: "Buy",
};

The TypeScript type checker is happy with this because the onClick method is optional.

Extending interfaces

Interfaces can extend other interfaces to inherit all the properties and methods from the interface being extended. We use the extends keyword after the new interface name and before the interface name that is being extended:

Copy
interface InterfaceA extends InterfaceB {
 ...
}

Let's explore this:

• In the code editor, create a new interface called ColoredButtonProps that extends the ButtonProps interface and adds a color property of type string.

• Create the following greenBuyButton object using the ColoredButtonProps interface:

Copy
const greenBuyButton: ColoredButtonProps = {
  color: "Green",
  text: "Buy",
  onClick: () => console.log("Buy"),
};

We find that the type checker is perfectly happy with this.

Using interfaces for functions

Interfaces can also be used to represent functions using the syntax below:

Copy
interface TypeName {
   (paramName1: paramType1, ...): ReturnType;
}

Let's explore interface functions in our code editor.

• Copy the function below and paste it in the code editor:

Copy
const log = (message: string) => {
  console.log(message);
};

This is the log arrow function we used a type alias in the last lesson.

• Create an interface called Log that represents this function.

• Add Log in a type annotation on the arrow function:

TypeScript should be happy with type annotation on the arrow function.

Declaration merging

It is legal in TypeScript for multiple interfaces with the same name to be created. TypeScript will merge interfaces with the same name in a process called declaration merging.

• Let's start to explore declaration merging by adding the following interface to the code editor:

Copy
interface ButtonProps {
  id: string;
}

We have added a second interface that is called ButtonProps.

Interface members are added to the existing type during the declaration merging process.

It is worth noting that duplicate type names and declaration merging can be confusing if we use this in our code. It is arguably clearer to extend types as we did in the last section so that each type has a unique name.

However, declaration merging is useful on types from a 3rd party library. This is because the types in some libraries are maintained outside of the main library and can be out of date. If this is the case, we can use declaration merging to update types in our code until it is updated in the official library.

Summary

Interfaces are a powerful way of creating new TypeScript types that can be used throughout our code. The ability to extend existing interfaces helps us build objects from small lower-level interfaces.

In the next lesson, we will learn about combining existing types to construct a new type.