Mixins are compartmentalized classes or functions that are used as a base component in order to assemble a more complex component or such programming design pattern.
Inheritance vs Mixins
Inheritance in OOP is similar to mixins in the sense that inheritance is also used to create a more complex class(child class) from a parent class.
class Tall {
getCriteria() { "height > 180" }
}
class Heavy {
getCriteria() { "weight > 90" }
}
// I want to make Giant class that is tall and heavy
// However, you cannot inherit multiple parent classes.
// class Giant extends Tall extends Heavy{
// }
class Person {
}
const Meh: { constructor: (...args: any[]) => any } = {
constructor: () => {
}
}
// const Me: Constructor = function(){
// }
// const me = new Me();
class ParentClass {
public getCriteria?() {
}
}
type Constructor = new (...args: any[]) => ParentClass;
type Constructor = new (...args: any[]) => any;
// TallMixin
// function TallMixin<SuperClass>(superClass: SuperClass) { // This will throw an compile error
function TallMixin<SuperClass extends Constructor>(superClass: SuperClass) {
return class extends superClass {
getCriteria = () => {
if (super.getCriteria instanceof Function) {
super.getCriteria();
}
console.log("height > 180cm");
}
}
}
function HeavyMixin<SuperClass extends Constructor>(superClass: SuperClass) {
return class extends superClass {
getCriteria = () => {
if (super.getCriteria instanceof Function) {
super.getCriteria();
}
console.log("weight > 90kg");
}
}
}
function addMixins<Constructor>(subClass: Constructor, ...mixins: any[]) {
return mixins.reduce((prev, cur) => cur(prev), subClass);
}
const MixInApplication = HeavyMixin(TallMixin(Person));
//const MixinApplication2 = addMixins(Person, TallMixin, HeavyMixin);
const mixInApplicationInstance = new MixInApplication();
//const mixInApplicationInstance2 = new MixinApplication2();
mixInApplicationInstance.getCriteria();
mixInApplicationInstance2.getCriteria();
mixin #typescript #javascript
What are mixins?
Mixins are compartmentalized classes or functions that are used as a base component in order to assemble a more complex component or such programming design pattern.
Inheritance vs Mixins
Inheritance in OOP is similar to mixins in the sense that inheritance is also used to create a more complex class(child class) from a parent class.
Resources https://justinfagnani.com/2015/12/21/real-mixins-with-javascript-classes/