logo标签列表

TypeScript中的Mixins

mixinstypescript
7

我正在尝试使用TypeScript，并且有几个函数混入，Eventable和Settable，我想将它们混入到一个Model类中（假设它类似于Backbone.js模型）：

function asSettable() {
  this.get = function(key: string) {
    return this[key];
  };
  this.set = function(key: string, value) {
    this[key] = value;
    return this;
  };
}

function asEventable() {
  this.on = function(name: string, callback) {
    this._events = this._events || {};
    this._events[name] = callback;
  };
  this.trigger = function(name: string) {
    this._events[name].call(this);
  }
}

class Model {
  constructor (properties = {}) {
  };
}

asSettable.call(Model.prototype);
asEventable.call(Model.prototype);

上述代码运行良好，但如果我尝试使用混入的方法之一，例如 (new Model()).set('foo', 'bar')，它将无法编译。
我可以通过以下方式解决：
  1. 为混入添加接口声明
  2. 在 Model 声明中声明虚拟的 get/set/on/trigger 方法
有没有更简洁的方法来避免虚拟声明？
可能与此相关的解决方案可在Microsoft/TypeScript＃2919找到。 - mucaho
4个回答
12
这是一种使用接口和静态 create()方法实现混合的方法。接口支持多重继承，这样就不必为混合重新定义接口，而 static create()方法负责将 Model()实例作为IModel返回（需要<any>类型转换来压制编译器警告）。你需要在IModel上复制所有成员定义，这很麻烦，但似乎是在当前版本的TypeScript中实现所需功能的最清晰方式。

编辑：我已经确定了一种稍微简单的支持混合的方法，并创建了一个帮助类来定义它们。详细信息可以在这里找到。

function asSettable() {
  this.get = function(key: string) {
    return this[key];
  };
  this.set = function(key: string, value) {
    this[key] = value;
    return this;
  };
}

function asEventable() {
  this.on = function(name: string, callback) {
    this._events = this._events || {};
    this._events[name] = callback;
  };
  this.trigger = function(name: string) {
    this._events[name].call(this);
  }
}

class Model {
  constructor (properties = {}) {
  };

  static create(): IModel {
      return <any>new Model();
  }
}

asSettable.call(Model.prototype);
asEventable.call(Model.prototype);

interface ISettable {
    get(key: string);
    set(key: string, value);
}

interface IEvents {
    on(name: string, callback);
    trigger(name: string);
}

interface IModel extends ISettable, IEvents {
}


var x = Model.create();
x.set('foo', 'bar');
6
刚要发布这篇文章。TypeScript真的应该扩展支持类的mixin，因为许多JS库目前都在使用它（例如Backbone.js）。 - Michael Sondergaard
从ts1.4开始，您可以使用“ISettable＆IEvents”代替“IModel”。 - mif
3

最干净的方法是将mixin定义为一个模块，虽然仍需要双重类型声明：

module Mixin {
    export function on(test) {
        alert(test);
    }
};

class TestMixin implements Mixin {
    on: (test) => void;
};


var mixed = _.extend(new TestMixin(), Mixin); // Or manually copy properties
mixed.on("hi");

一种替代使用接口的方法是使用类进行修改（虽然由于多重继承，您需要为 mixin 创建一个公共接口）：
var _:any;
var __mixes_in = _.extend; // Lookup underscore.js' extend-metod. Simply copies properties from a to b

class asSettable {
    getx(key:string) { // renamed because of token-clash in asEventAndSettable
        return this[key];
    }
    setx(key:string, value) {
        this[key] = value;
        return this;
    }
}

class asEventable {
    _events: any;
    on(name:string, callback) {
        this._events = this._events || {};
        this._events[name] = callback;
    }
    trigger(name:string) {
        this._events[name].call(this);
  }
}

class asEventAndSettable {
   // Substitute these for real type definitions
   on:any;
   trigger:any;
   getx: any;
   setx: any;
}

class Model extends asEventAndSettable {
    /// ...
}

var m = __mixes_in(new Model(), asEventable, asSettable);

// m now has all methods mixed in.

正如我在Steven的回答中所评论的，混入确实应该成为TypeScript的一个特性。

我甚至会说，第一个版本应该只是 TypeScript 实现混合的方式 - 这并不太难。 - Michael Sondergaard
如果我正确理解了TS的语义，这两个选项的问题在于它们失去了“函数式”混合的部分。你只是用属性扩展了类，而使这种混合风格好的东西是你可以执行与混合一起的代码，这给了你保存小状态片段或其他你需要做的事情的机会。这种使用函数的方式是我认为使JS有价值的（好吧...还有整个Web标准的事情...）相比其他语言，但除此之外，JS只是一个弱化的替代品。 - aaronstacy
我相信你可以使用以下代码来使生活更轻松： var mixed = _.extend(TestMixin.prototype, Mixin); - qbolec
2

几年前，Typescript中引入了一种新的方法，称为“mixin类”。它在文档中没有得到很好的涵盖，但是他们有一个非常详细的例子来描述这个模式。应用于您的情况，它可能会像这样：

type Constructor = new (...args: any[]) => {}

function Settable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    _props: Record<string, any> = {};

    get(key: string) {
      return this._props[key];
    }

    set(key: string, value: any) {
      this._props[key] = value;
      return this;
    }
  }
}

function Eventable<TBase extends Constructor>(Base: TBase) {
  return class extends Base {
    _events: Record<string, () => void> = {};

    on(name: string, callback: () => void) {
      this._events[name] = callback;
    }

    trigger(name: string) {
      this._events[name].call(this);
    }
  }
}

class Model extends Settable(Eventable(Object)) {
  constructor(properties = {}) {
    super();
  }
}

这将为您提供所需的打字效果，例如，您可以使用完整的打字支持调用(new Model()).set('boo', 'bar')。无需虚拟声明。
1

一种解决方案是不使用typescript类系统，而只使用类型和接口系统，另外加上关键字'new'。

    //the function that create class
function Class(construct : Function, proto : Object, ...mixins : Function[]) : Function {
        //...
        return function(){};
}

module Test { 

     //the type of A
    export interface IA {
        a(str1 : string) : void;
    }

    //the class A 
    //<new () => IA>  === cast to an anonyme function constructor that create an object of type IA, 
    // the signature of the constructor is placed here, but refactoring should not work
    //Class(<IA> { === cast an anonyme object with the signature of IA (for refactoring, but the rename IDE method not work )
    export var A = <new () => IA> Class(

        //the constructor with the same signature that the cast just above
        function() { } ,

        <IA> {
            //!! the IDE does not check that the object implement all members of the interface, but create an error if an membre is not in the interface
            a : function(str : string){}
        }
    );


    //the type of B
    export interface IB {
        b() : void;
    }
    //the implementation of IB
    export class B implements IB { 
        b() { }
    }

    //the type of C
    export interface IC extends IA, IB{
        c() : void;
        mystring: string;
    }

     //the implementation of IC
    export var C = <new (mystring : string) => IC> Class(

        //public key word not work
        function(mystring : string) { 

            //problem with 'this', doesn't reference an object of type IC, why??
            //but google compiler replace self by this !!
            var self = (<IC> this);
            self.mystring = mystring;
        } ,

        <IC> {

            c : function (){},

            //override a , and call the inherited method
            a: function (str: string) {

                (<IA> A.prototype).a.call(null, 5);//problem with call and apply, signature of call and apply are static, but should be dynamic

                //so, the 'Class' function must create an method for that
                (<IA> this.$super(A)).a('');
            }

        },
        //mixins
        A, B
    );

}

var c = new Test.C('');
c.a('');
c.b();
c.c();
c.d();//ok error !
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接