LayaBox---TypeScript---Mixins

Table of Contents

1. Introduction

2. Mixing example

3. Understand the example

---

1. Introduction

In addition to traditional object-oriented inheritance, a popular way to create classes from reusable components is to combine the code of another simple class.You're probably already familiar with mixins and their features in languages ​​like Scala, but it's also very popular in JavaScript.

2.Mixin example

// Disposable Mixinclass Disposable {isDisposed: boolean;dispose() {this.isDisposed = true;}}// Activatable Mixinclass Activatable {isActive: boolean;activate() {this.isActive = true;}deactivate() {this.isActive = false;}}class SmartObject implements Disposable, Activatable {constructor() {setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);}interact() {this.activate();}// DisposableisDisposed: boolean = false;dispose: () => void;// ActivatableisActive: boolean = false;activate: () => void;deactivate: () => void;}applyMixins(SmartObject, [Disposable, Activatable]);let smartObj = new SmartObject();setTimeout(() => smartObj.interact(), 1000);// In your runtime library somewherefunction applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor => {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {derivedCtor.prototype[name] = baseCtor.prototype[name];});});}

3. Understand this example

The code first defines two classes, which will be used as mixins.You can see that each class defines only one specific behavior or function.Later we use them to create a new class that has both functions.

// Disposable Mixinclass Disposable {isDisposed: boolean;dispose() {this.isDisposed = true;}}// Activatable Mixinclass Activatable {isActive: boolean;activate() {this.isActive = true;}deactivate() {this.isActive = false;}}

Let's create a class that combines these two mixins.Here's how it works:

class SmartObject implements Disposable, Activatable {

The first thing you should notice is that instead of using extends, you use implements.Treat the class as an interface and use only the types of Disposable and Activatable instead of their implementations.This means that we need to implement the interface inside the class.But this is what we want to avoid when using mixins.

We can do this by creating placeholder properties for the property methods that will be mixed in.This tells the compiler that these members are available at runtime.This allows you to use the convenience of mixins, although you need to define some placeholder properties in advance.

// DisposableisDisposed: boolean = false;dispose: () => void;// ActivatableisActive: boolean = false;activate: () => void;deactivate: () => void;Finally, mixins into the defined class to complete the entire implementation part.applyMixins(SmartObject, [Disposable, Activatable]);

Finally, create this helper function to help us do the mixin.It will traverse all the properties on the mixins and copy them to the target, replacing the previous placeholder properties with the real implementation code.

function applyMixins(derivedCtor: any, baseCtors: any[]) {baseCtors.forEach(baseCtor => {Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {derivedCtor.prototype[name] = baseCtor.prototype[name];})});}