Page Contents

It is a commonly used JavaScript/TypeScript strategy to extend a class with new properties and methods.

A good approach to apply mixins is defining them as sub-class factories. Then declare the new mixed class as:

class MixedClass extends MixinFoo(MixinBar(BaseClass)) {};

Check article real mixins with javascript classes to learn more about it.

Define Mixin

By defining a mixin, you create a mixin function that takes in a base class, and returns a new class extending the base class with new properties and methods mixed to it.

For example you have a simple controller which only has a greeter function prints out ‘hi!’:

Controllers/myController.ts

class SimpleController {
    constructor() {

    }
    greet() {
        console.log('hi!');
    }
}

Now let’s add mixins to it:

  • A time stamp mixin that adds a property createdAt to a record when a controller instance is created.

  • A logger mixin to provide logging tools.

Define mixin timeStampMixin:

Mixins/timeStampMixin.ts

import {Class} from "@loopback/repository";

export function timeStampMixin<T extends Class<any>> (baseClass: T) {
  return class extends baseClass {
      // add a new property `createdAt`
      public createdAt: Date;
      constructor(...args: any[]) {
        super(args);
        this.createTS = new Date();
      }
      printTimeStamp() {
        console.log('Instance created at: ' + this.createdAt);  
      }
  }
}

And define mixin loggerMixin:

Mixins/loggerMixin.ts

import {Class} from "@loopback/repository";

function loggerMixin<T extends Class<any>> (baseClass: T) {
  return class extends baseClass {
    // add a new method `log()`
    log(str: string) {
      console.log('Prints out a string: ' + str);
    };
  }
}

Now you can extend SimpleController with the two mixins:

Controllers/myController.ts

import {timeStampMixin} from 'Mixins/timeStampMixin.ts';
import {loggerMixin} from 'Mixins/loggerMixin.ts';

class SimpleController {
    constructor() {

    }
    greet() {
        console.log('hi!');
    }
}

class AdvancedController extends loggerMixin(timeStampMixin(SimpleController)) {};

// verify new method and property are added to `AdvancedController`:
let aControllerInst = new AdvancedController();
aControllerInst.printTimeStamp();
// print out: Instance created at: Tue Oct 17 2017 22:28:49 GMT-0400 (EDT)
aControllerInst.logger('hello world!');
// print out: Prints out a string: hello world!

References

Here are some articles explaining ES2015 and TypeScript mixins in more details:

  • https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#Mix-ins

  • http://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/

  • https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-2.html