Typescript Mixins Example

AnotherClassComponent.ts

import type { MainClass } from './MainClass';

export abstract class AnotherClassComponent {
  async anotherFn(
    this: MainClass,
  )  {
    // is fully aware of this.someFn and other parts but generally should try
    // to be self contained
  }
  
  // this would fail due to the allowOverwrites property in applyMixins
  // @ts-expect-error Mixin collision with property someFn on AnotherClassComponent
  async someFn() {}
}

applyMixins.ts

/* eslint-disable @typescript-eslint/no-explicit-any */
export default function applyMixins(
  derivedConstructor: { [key: string]: any },
  baseConstructors: Array<{ [key: string]: any }>,
  allowOverwrites = false,
): void {
  baseConstructors.forEach((baseConstructor) => {
    Object.getOwnPropertyNames(baseConstructor.prototype).forEach((name) => {
      if (name === 'constructor') {
        return;
      }
      if (
        !allowOverwrites &&
        Object.hasOwnProperty.call(derivedConstructor.prototype, name)
      ) {
        throw new Error(
          `Mixin collision with property ${name} on ${baseConstructor.prototype.constructor.name}`,
        );
      }
      Object.defineProperty(
        derivedConstructor.prototype,
        name,
        Object.getOwnPropertyDescriptor(
          baseConstructor.prototype,
          name,
        ) as PropertyDescriptor & ThisType<any>,
      );
    });
  });
}

ClassComponent.ts

import type { MainClass } from './MainClass';

export abstract class ClassComponent {
  async someFn(
    this: MainClass,
  )  {
    // blah blah blah
  }
}

MainClass.ts

import applyMixins from './applyMixins';
import { ClassComponent } from './ClassComponent';
import { AnotherClassComponent } from './AnotherClassComponent';

class MainClass {
  constructor( {
    // only has constructor and holds the core shared data / types that abstract classes all share
  }
}

applyMixins(MainClass, [
  ClassComponent,
  AnotherClassComponent
]);

interface MainClass extends ClassComponent, AnotherClassComponent {}

export { MainClass }