Along with traditional OO hierarchies, another popular way of building up classes from reusable components is to build them by combining simpler partial classes.\nYou may be familiar with the idea of mixins or traits for languages like Scala, and the pattern has also reached some popularity in the JavaScript community.
\nIn the code below, we show how you can model mixins in TypeScript.\nAfter the code, we’ll break down how it works.
\n\nts// Disposable Mixin\nclass Disposable {\n isDisposed: boolean;\n dispose() {\n this.isDisposed = true;\n }\n\n}\n\n// Activatable Mixin\nclass Activatable {\n isActive: boolean;\n activate() {\n this.isActive = true;\n }\n deactivate() {\n this.isActive = false;\n }\n}\n\nclass SmartObject {\n constructor() {\n setInterval(() => console.log(this.isActive + \" : \" + this.isDisposed), 500);\n }\n\n interact() {\n this.activate();\n }\n}\n\ninterface SmartObject extends Disposable, Activatable {}\napplyMixins(SmartObject, [Disposable, Activatable]);\n\nlet smartObj = new SmartObject();\nsetTimeout(() => smartObj.interact(), 1000);\n\n////////////////////////////////////////\n// In your runtime library somewhere\n////////////////////////////////////////\n\nfunction applyMixins(derivedCtor: any, baseCtors: any[]) {\n baseCtors.forEach(baseCtor => {\n Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {\n Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));\n });\n });\n}
The code sample starts with the two classes that will act as our mixins.\nYou can see each one is focused on a particular activity or capability.\nWe’ll later mix these together to form a new class from both capabilities.
\n\nts// Disposable Mixin\nclass Disposable {\n isDisposed: boolean;\n dispose() {\n this.isDisposed = true;\n }\n\n}\n\n// Activatable Mixin\nclass Activatable {\n isActive: boolean;\n activate() {\n this.isActive = true;\n }\n deactivate() {\n this.isActive = false;\n }\n}
Next, we’ll create the class that will handle the combination of the two mixins.\nLet’s look at this in more detail to see how it does this:
\n\ntsclass SmartObject {\n ...\n}\n\ninterface SmartObject extends Disposable, Activatable {}
The first thing you may notice in the above is that instead of trying to extend Disposable and Activatable in SmartObject class, we extend them in SmartObject interface. SmartObject interface will be mixed into the SmartObject class due to the declaration merging.
This treats the classes as interfaces, and only mixes the types behind Disposable and Activatable into the SmartObject type rather than the implementation. This means that we’ll have to provide the implementation in class.\nExcept, that’s exactly what we want to avoid by using mixins.
\nFinally, we mix our mixins into the class implementation.
\n\ntsapplyMixins(SmartObject, [Disposable, Activatable]);
Lastly, we create a helper function that will do the mixing for us.\nThis will run through the properties of each of the mixins and copy them over to the target of the mixins, filling out the stand-in properties with their implementations.
\n","headings":[{"value":"Table of contents","depth":1},{"value":"Introduction","depth":1},{"value":"Mixin sample","depth":1},{"value":"Understanding the sample","depth":1}],"frontmatter":{"permalink":"/docs/handbook/mixins.html","title":"Mixins"}}},"pageContext":{"slug":"/docs/handbook/mixins.html","isOldHandbook":true}}}tsfunction applyMixins(derivedCtor: any, baseCtors: any[]) {\n baseCtors.forEach(baseCtor => {\n Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {\n Object.defineProperty(derivedCtor.prototype, name, Object.getOwnPropertyDescriptor(baseCtor.prototype, name));\n });\n });\n}