How To Extend a Type in Typescript

Typescript is a language that can handle many different data types. It is like an upgrade of JavaScript, providing powerful manipulation of data types, for example you can extend a type in Typescript. This article will show you ways to extend a type using extends keyword and using & operator.

Ways to extend a type in Typescript

We will show two ways to extend a typescript type: using the extends keyword and the & operator.

Using extends keyword

The extends keyword can be extended with the class by implementing an extended interface. It is flexible in use by executing in many different places.

The interface keyword is used for the state of a TypeScript interface and its body can contain variables. We can retrieve interface from other interfaces where we can say that it allows an interface to take over with 0 or more base types and base type can be a class or interface. The extends keyword is used to implement inheritance between interfaces.

Example:

In this example, two data types, Car and Motorcycle, lack properties, so we use the extends keyword to extend the required properties.

// Car before extending
type Car = {
	name: string;
	price: number;
};

// Motorcycle before extending
type Motorcycle = {
	manufacturer: string;
	model: string;
};

// Using the "extends" keyword to extend Car
interface InterfaceCar extends Car {
	manufacturer: string;
	model: string;
}

// Using the "extends" keyword to extend Motorcycle
interface InterfaceMotorcycle extends Motorcycle {
	name: string;
	price: number;
}

const car1: InterfaceCar = {
	name: "Civic",
	price: 199000,
	manufacturer: "Honda",
	model: "Hatch Back",
};

console.log(car1);

Output:

{
    "name": "Civic",
    "price": 199000,
    "manufacturer": "Honda",
    "model": "Hatch Back"
}

You can extend many different data types at the same time by separating data types by commas.

Example:

interface InterfaceCar extends Car, Motorcycle {
	engine: string;
}

Using the & operator

You can use the & operator to extend types in TypeScript. These are called intersection types that can be used to combine two or more data types together

Example:

type Car = {
	name: string;
	price: number;
};

type Motorcycle = {
	manufacturer: string;
	model: string;
};

// Using the & operator to extend Car
type CarExtended = Car & {
	manufacturer: string;
	model: string;
};

const car: CarExtended = {
	name: "Civic",
	price: 199000,
	manufacturer: "Honda",
	model: "Hatch Back",
};

console.log(car);

Output:

{
    "name": "Civic",
    "price": 199000,
    "manufacturer": "Honda",
    "model": "Hatch Back"
}

You can extend Car and Motorcycle at the same time. Or you can extend as many data types as you want.

Example:

// Using the & operator to extend Car and Motorcycle
type Vehicle = Car & Motorcycle & {
	engine: string;
	license: number;
	status: boolean;
};

Now Vehicle has the attributes of Car and Motorcycle.

Summary

In this article, we learn how to extend data types using extends keywords to expand classes into interfaces and how to use the & operator to broaden types. Hope the article helps you to understand clearly. Thanks for reading.

Carolyn Hise

Carolyn Hise has three years of software development expertise. Strong familiarity with the following languages is required: Python, Typescript/Nodejs, .Net, Java, C++, and a strong foundation in Object-oriented programming (OOP).