مبانی TypeScript؛ Mixins
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: سه دقیقه

یکی از راه‌های محبوب دیگر برای ساخت کلاس‌ها با استفاده از اجزایی با قابلیت استفاده مجدد، ساخت آنها با ترکیب partial class‌های ساده، می‌باشد. mixins در زبان‌های برنامه نویسی مانند ++C و Lisp، کلاس‌هایی هستند که یکسری توابع را از طریق ارث بری در اختیار SubClass‌ها قرار می‌دهند. شاید با ایده استفاده از mixins، یا traits در زبانی مانند Scala و الگوی mixins که بین جامعه جاوااسکریپت هم تا حدودی محبوب شده است، آشنا هستید.
در جاوااسکریپت، ارث بری کردن از mixins، شبیه به افزایش عملکرد خود از طریق extension‌ها می‌باشد؛ چرا که این mixin‌ها این امکان را در اختیار اشیاء می‌گذارند که با کمترین پیچیدگی، بتوانند عملکردی (functionality) را از آنها به امانت بگیرند. Mixins در جاوااسکریپت به عنوان الگویی است که با object prototype‌ها کار می‌کند و امکان ارث بری چندگانه را هم به ما خواهد داد.

یک مثال از استفاده از Mixins در جاوااسکریپت
var myMixins = {
 
  moveUp: function(){
    console.log( "move up" );
  },
 
  moveDown: function(){
    console.log( "move down" );
  },
 
  stop: function(){
    console.log( "stop! in the name of love!" );
  }
 
};
کد بالا نشان دهنده یک object literal با 3 متد می‌باشد و نشان دهنده mixins ما نیز هست.
برای توسعه prototype مربوط به اشیاء، به منظور استفاده از رفتارهای تعریف شده در mixins بالا، می‌توان از هلپرهایی به مانند ()extend._ موجود در Underscore.js استفاده کرد.
// A skeleton carAnimator constructor
function CarAnimator(){
  this.moveLeft = function(){
    console.log( "move left" );
  };
}
 
// A skeleton personAnimator constructor
function PersonAnimator(){
  this.moveRandomly = function(){ /*..*/ };
}
 
// Extend both constructors with our Mixin
_.extend( CarAnimator.prototype, myMixins );
_.extend( PersonAnimator.prototype, myMixins );
 
// Create a new instance of carAnimator
var myAnimator = new CarAnimator();
myAnimator.moveLeft();
myAnimator.moveDown();
myAnimator.stop();
 
// Outputs:
// move left
// move down
// stop! in the name of love!
در کد بالا دو شیء جدید را تعریف کرده‌ایم که برای prototype هر کدام از آنها هم یک متد در نظر گرفته‌ایم. با استفاده از هلپر مذکور توانستیم عملیات مربوط به myMixins را به prototype هرکدام از اشیاء تعریف شده‌ی در بالا نسبت دهیم. استفاده‌ی از متدهای stop یا moveDown بر روی نمونه‌ای از CarAnimator نشان دهنده‌ی این ادعا می‌باشد.

پیاده سازی این الگو در TypeScript
// Disposable Mixin
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }

}

// Activatable Mixin
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}
از دو  کلاس  بالا به عنوان mixin‌های خودمان استفاده خواهیم کردم. همانطور که مشخص است هر کدام از آنها بر روی فعالیت خاصی متمرکز شده‌اند.
class SmartObject implements Disposable, Activatable {
    constructor() {
        setInterval(() => console.log(this.isActive + " : " + this.isDisposed), 500);
    }

    interact() {
        this.activate();
    }

    // Disposable
    isDisposed: boolean = false;
    dispose: () => void;
    // Activatable
    isActive: boolean = false;
    activate: () => void;
    deactivate: () => void;
}
گام بعدی تعریف کلاسی برای ترکیب شدن با دو mixins تعریف شده، میباشد. اگر توجه کنید در کد بالا به جای استفاده از کلمه کلیدی extend، از implements استفاده شده است. در واقع mixin‌ها شبیه به اینترفیس هایی  با امکان پیاده سازی درون خود، هستند. کلاس‌های استفاده کننده فقط باید تعریف این متدها و خصوصیت‌ها را به منظور تشخیص این خصوصیات در زمان اجرا، در خود تعریف کرده باشند.
applyMixins(SmartObject, [Disposable, Activatable]);
در نهایت با استفاده از هلپر applyMixins که در ادامه کد آن را مشاهده خواهید کرد، عملیات میکس را انجام دادیم.
در مثال زیر یک نمونه از کلاس SmartObject تهیه کرده‌ایم که به راحتی به دلیل پیاده سازی Activatable، دسترسی به استفاده از متد activate را داشته و آن را درون متد interact خود فراخوانی کرده است. اجرای خط دوم کد زیر، مبنی بر درستی ادعای ما میباشد.
let smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000);

پیاده سازی هلپر applyMixins
function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}
کد بالا تمام خصوصیات موجود در baseCtors‌ها را که همان mixin‌های ما هستند، واکشی کرده و در خصوصیات موجود در کلاس پیاده سازی کننده‌ی آن Mixin، پر میکند.