Mixins

TypeScript (and JavaScript) classes support strict single inheritance. So you cannot do:

  1. class User extends Tagged, Timestamped { // ERROR : no multiple inheritance
  2. }

Another way of building up classes from reusable components is to build them by combining simpler partial classes called mixins.

The idea is simple, instead of a class A extending class B to get its functionality, function B takes class A and returns a new class with this added functionality. Function B is a mixin.

[A mixin is] a function that

  1. takes a constructor,
  2. creates a class that extends that constructor, with new functionality
  3. returns the new class

A complete example

  1. // Needed for all mixins
  2. type Constructor<T = {}> = new (...args: any[]) => T;
  4. ////////////////////
  5. // Example mixins
  6. ////////////////////
  8. // A mixin that adds a property
  9. function Timestamped<TBase extends Constructor>(Base: TBase) {
  10.   return class extends Base {
  11.     timestamp = Date.now();
  12.   };
  13. }
  15. // a mixin that adds a property and methods
  16. function Activatable<TBase extends Constructor>(Base: TBase) {
  17.   return class extends Base {
  18.     isActivated = false;
  20.     activate() {
  21.       this.isActivated = true;
  22.     }
  24.     deactivate() {
  25.       this.isActivated = false;
  26.     }
  27.   };
  28. }
  30. ////////////////////
  31. // Usage to compose classes
  32. ////////////////////
  34. // Simple class
  35. class User {
  36.   name = '';
  37. }
  39. // User that is Timestampted
  40. const TimestampedUser = Timestamped(User);
  42. // User that is Timestamped and Activatable
  43. const TimestampedActivatableUser = Timestamped(Activatable(User));
  45. ////////////////////
  46. // Using the composed classes
  47. ////////////////////
  49. const timestampedUserExample = new TimestampedUser();
  50. console.log(timestampedUserExample.timestamp);
  52. const timestampedActivatableUserExample = new TimestampedActivatableUser();
  53. console.log(timestampedActivatableUserExample.timestamp);
  54. console.log(timestampedActivatableUserExample.isActivated);

Let’s decompose this example.

Take a constructor

Mixins take a class and extend it with new functionality. So we need to define what is a constructor. Easy as:

  1. // Needed for all mixins
  2. type Constructor<T = {}> = new (...args: any[]) => T;

Extend the class and return it

Pretty easy:

  1. // A mixin that adds a property
  2. function Timestamped<TBase extends Constructor>(Base: TBase) {
  3.   return class extends Base {
  4.     timestamp = Date.now();
  5.   };
  6. }

And that is it ?