Seven, Typescript mixins (mixed)

In addition to the customary idea of facing objects, another popular way to create classes from reusable components is to mix simple classes together. You may be familiar with this hybrid approach or have an understanding of the features of the Scala language, a pattern that is popular in the JavaScript community.

Mixed case

In the following code, we show how to mix the model in typescript, after reading the code, and then analyzing its execution.

//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])varSmartobj =NewSmartObject (); SetTimeout (()= Smartobj.interact (), 1000); //////////////////////////////////////////Somewhere in your code.////////////////////////////////////////functionapplymixins (Derivedctor:any, basectors:any[]) {Basectors.foreach (Basector={object.getownpropertynames (basector.prototype). ForEach (Name={Derivedctor.prototype[name]=Basector.prototype[name]; })    }); }

Understanding the case

The code example of the first two classes is the one that will be used as the mixed part. As you can see, each class has a specific function. We then mix the two classes into a new class that has the functionality of the two classes.

 //  disposable Mixin  class Disposable {isdisposed:  boolean  ; Dispose () { this . isdisposed = true //  Activatable Mixin  class Activatable {isActive:  boolean  ; Activate () { this . isActive = true      this . isActive = false     ; }}

Next, we create a new class and mix the two classes into this new class. Take a closer look at how it's done:

Class SmartObject implements disposable, Activatable {

The first thing you might notice is that we use "implements" instead of "extends". This is done by treating the class as an interface, using only the types after "disposable" and "Activatable", rather than implementing the two interfaces. This also means that we need to implement both interfaces in the class, but this is exactly what we want to avoid by blending.

To meet these requirements, we create placeholders and their types for the attributes that will be blended in. This allows the compiler to recognize that these members are available at run time. Doing so can achieve mixed benefits, even if we need to write the members ' placeholders and their types in advance.

// Disposable Boolean false  void; // Activatable Boolean false  voidvoid;

Finally, we'll mix the two classes into the new class and create all the implementations.

Applymixins (SmartObject, [disposable, Activatable])

Finally, we create an auxiliary function that helps us to do the blending. This function iterates through each of the properties on each of the blended classes and copies them into the blended class, populating the placeholders that were left before and implementing them.

function applymixins (Derivedctor:any, basectors:any[]) {                        = = {= =  Basector.prototype[name];}    ); }

Seven, Typescript mixins (mixed)