ts之 Mixin混入（ts对象的混入、类的混入）

最新推荐文章于 2024-03-23 09:15:00 发布

小小liang

最新推荐文章于 2024-03-23 09:15:00 发布

阅读量300

点赞数

分类专栏： ts + vue2 vue3.0 + ts 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_47409897/article/details/129190323

版权

vue3.0 + ts 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

ts + vue2

17 篇文章 1 订阅

订阅专栏

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 小小