TypeScript: Simple Guide To The TypeScript Interface

Introduction

A TypeScript interface is a structure that declares the shape of variables. It only contains the declaration but not the implementation. TypeScript only uses the interface for type checking. It will then remove the interfaces from the JavaScript files during compilation. So interfaces do not have any impact on JavaScript runtime.

Declaring a TypeScript Interface

We can declare an interface using the interface keyword followed by the interface name and interface body. For example, here we are declaring an interface called IPerson with two properties, firstName and lastName of the string type. And this means that any variable of type IPerson must define these two properties.

interface IPerson {
  firstName: string;
  lastName: string;
}

We will then use the IPerson interface as the type of variable person. And assign the variable person with an object with two properties, firstName and lastName.

let person: IPerson;
person = {
  firstName: 'John',
  lastName: 'Doe',
};

console.log(`Person => ${person.firstName} ${person.lastName}`);
// Person => John Doe

Suppose you accidentally use a property on the person object that doesn’t exist or assign it with a wrong data type. In such cases, the TypeScript compiler will not compile your application.

person.FirstName = 'John';
// Compiler error, property 'FirstName' does not exist on type 'IPerson'.
person.lastName = 123;
// Compiler error, type 'number' is not assignable to type 'string'

Extending an Interface

An interface can extend one or more interfaces. And this allows you to copy one interface’s members into another. And it gives you more flexibility in how you separate your interfaces into reusable components. Use the extends keyword to implement inheritance among interfaces.

Here we are declaring another interface called IEmployee, which extends the IPerson interface. So, objects of type IEmployee must include all the properties of both IPerson and IEmployee interfaces. Otherwise, we will get an error.

interface IEmployee extends IPerson {
  department: string;
}

let employee: IEmployee = {
  department: 'HR',
  firstName: 'John',
  lastName: 'Doe',
};

TypeScript Interface with Optional Properties

Sometimes it is not necessary to have all of the properties as defined in the interface. We can have optional properties marked by a ? at the end of the property name in the declaration.

Here, I’m going to add an optional property called notes to the IEmployee interface. Since notes is optional, IEmployee objects may or may not include this property.

interface IEmployee extends IPerson {
  department: string;
  notes?: string;
}

let employee: IEmployee = {
  department: 'HR',
  firstName: 'John',
  lastName: 'Doe',
};

Read-only Properties

Some properties of interfaces should only be adjustable when you first initialise an object. And this means that once you assign that property with a value, you can not change it. You can specify this by putting readonly before the name of the property.

Here the employeeNumber property is read-only. We define the employee object of type IEmployee and assign values to the interface properties. Next, we try to change the value assigned to employeeNumber. The TypeScript compiler will show an error when we try to change the read-only employeeNumber property.

interface IEmployee extends IPerson {
  readonly employeeNumber: string;
  department: string;
  notes?: string;
}

let employee: IEmployee = {
  employeeNumber: '123456789',
  department: 'HR',
  firstName: 'John',
  lastName: 'Doe',
};

employee.firstName = 'Jane'; // OK
employee.employeeNumber = '987654321'; 
// Compiler error, cannot assign to 'employeeNumber' because it is a read-only property.

console.log(
  `Employee => ${employee.firstName} ${employee.lastName} works in ${employee.department} department`,
);
// Jane Doe works in HR department

GitHub Repo

Here is the GitHub repository link where you can find the full source code of this article, clone the project and run it on your machine.