ts之 Mixin混入(ts对象的混入、类的混入)

ts之 Mixin混入

对象的混入

interface Name {
    
    
  name: string;
}
interface Age {
    
    
  age: number;
}
interface Sex {
    
    
  sex: number;
}
let aa: Name = {
    
     name: "ppp" };
let bb: Age = {
    
     age: 10 };
let cc: Sex = {
    
     sex: 1 };
let obj = Object.assign(aa, bb, cc); // let obj: Name & Age & Sex

类的混入

// 类的混入 mixin
class AA {
    
    
  type: boolean;
  changeType() {
    
    
    this.type = !this.type;
  }
  constructor(type: boolean) {
    
    
    this.type = type;
  }
}
class BB {
    
    
  name: string;
  public changeName(name: string): string {
    
    
    return this.name = name;
  }
  constructor(name: string) {
    
    
    this.name = name;
  }
}
// @ts-ignore // @ts-ignore

class CC implements AA, BB {
    
    
  type: boolean = false;
  name: string = "ppp";
  // @ts-ignore
  changeType: () => void;
  // @ts-ignore
  changeName: (name: string) => string; // 属性“changeType”没有初始化表达式,且未在构造函数中明确赋值
}

mixins(CC, [AA, BB]);
function mixins(curCls: any, itemCls: any[]) {
    
    
  itemCls.forEach((item) => {
    
    
    // console.log("item", item); // item [class AA] item [class BB]
    Object.getOwnPropertyNames(item.prototype).forEach((name) => {
    
    
      curCls.prototype[name] = item.prototype[name];
    });
  });
}
let ccc = new CC();
console.log("ccc", ccc.name); // ccc ppp
console.log("ccc", ccc.type); // ccc flase
ccc.changeType();
console.log("ccc", ccc.type); // ccc true
ccc.changeName("小小");
console.log("ccc", ccc.name); // ccc 小小

猜你喜欢

转载自blog.csdn.net/weixin_47409897/article/details/129190323