Table of Contents
URL: https://www.progressiverobot.com/typescript-mixins/
Introduction
In TypeScript, we can't inherit or extend from more than one class, but Mixins helps us to get around that.
Mixins create partial classes that we can combine to form a single class that contains all the methods and properties from the partial classes.
Note: The documentation describes the approach in this tutorial as an "Alternative Pattern".
In this tutorial, you will create and use mixins in TypeScript.
Understanding the Limitations of Classes
Let's create an example so that we can demonstrate the value of mixins.
Consider two classes, Car and Lorry, which contain the drive and carry methods respectively. Then, consider a third class called Truck. A Truck should include both drive and carry methods:
[label app.ts]
export class Car {
drive(name:string) {
console.log(`This ${name} can drive very fast`);
}
}
export class Lorry {
carry(weight:number) {
console.log(`This vehicle can carry ${weight} kg`);
}
}
export class Truck extends Car, Lorry {}
This will not work because we can only extend a single class.
[secondary_label Output]
error: Classes can only extend a single class
To solve this, we can use mixins.
Understanding Interface Class Extension and Declaration Merging
To create a mixin, we'll take advantage of two functionalities of TypeScript:
Interface class extension
Unlike classes, interfaces can extend multiple classes in TypeScript.
[label app.ts]
interface A extends ClassB, ClassC {}
When an interface extends a class, it extends only the class members but not their implementation because interfaces don't contain implementations.
Declaration merging
When two or more declarations are declared with the same name, TypeScript merges them into one.
[label app.ts]
interface Alligator {
eyes: number;
nose: number;
}
interface Alligator {
tail: number;
}
const gator: Alligator = {
eyes: 2,
nose: 1,
tail: 1
};
gator contains properties from both Alligator interfaces.
Using the Helper Function
By leveraging these two functionalities in TypeScript, we can create an interface with the same name as Truck and extend both the Car and Lorry classes:
[label app.ts]
export class Truck {}
export interface Truck extends Car, Lorry {}
Due to declaration merging, the Truck class will be merged with the Truck interface. This means that the Truck class will now contain the function definitions from both Car and Lorry classes.
To enable the Truck class to implement the functions inherited from Car and Lorry, we'll use a helper function found in the TypeScript docs.
The function takes the name of the class to which we want to copy the implementations as the first argument (which in our case is Truck) and takes an array of classes from which we want to copy the implementations as the second argument (which in our case is Car and Lorry).
[label app.ts]
// the helper function
function applyMixins(derivedCtor: any, constructors: any[]) {
constructors.forEach((baseCtor) => {
Object.getOwnPropertyNames(baseCtor.prototype).forEach((name) => {
Object.defineProperty(
derivedCtor.prototype,
name,
Object.getOwnPropertyDescriptor(baseCtor.prototype, name) ||
Object.create(null)
);
});
});
}
And here's how it's used:
[label app.ts]
applyMixins(Truck, [Car, Lorry]);
We can now access the methods in Car and Lorry from a truck object.
[label app.ts]
const truck = new Truck();
truck.drive("truck");
truck.carry(10);
This code will produce the following output:
[secondary_label Output]
This truck can drive very fast
This vehicle can carry 10 kg
This truck can access drive() and carry().
Conclusion
In this tutorial, you created and used mixins in TypeScript.
From here, learn How To Use TypeScript Declaration Merging for Interfaces.
