TypeScript基础入门之Mixins

Easter79
• 阅读 475

转载 TypeScript基础入门之Mixins

介绍

与传统的OO层次结构一起,另一种从可重用组件构建类的流行方法是通过组合更简单的部分类来构建它们。
您可能熟悉Scala等语言的mixin或traits的概念,并且该模式在JavaScript社区中也已经普及。

Mixin示例

在下面的代码中,我们将展示如何在TypeScript中对mixin进行建模。
在代码之后,我们将分解其工作原理。

// Disposable Mixin
class Disposable {
    isDisposed: boolean;
    dispose() {
        this.isDisposed = true;
    }

}

// Activatable Mixin
class Activatable {
    isActive: boolean;
    activate() {
        this.isActive = true;
    }
    deactivate() {
        this.isActive = false;
    }
}

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;
}
applyMixins(SmartObject, [Disposable, Activatable]);

let smartObj = new SmartObject();
setTimeout(() => smartObj.interact(), 1000);

////////////////////////////////////////
// In your runtime library somewhere
////////////////////////////////////////

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}

理解示例

代码示例以两个类作为我们的mixins开始。
您可以看到每个人都专注于特定的活动或能力。
我们稍后将它们混合在一起,形成两种功能的新类。

// 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 {

您可能在上面注意到的第一件事是,我们使用工具而不是使用扩展。
这将类视为接口,并且仅使用Disposable和Activatable后面的类型而不是实现。
这意味着我们必须在课堂上提供实现。
除此之外,这正是我们想要通过使用mixins避免的。

为了满足这一要求,我们为来自mixin的成员创建了替身属性及其类型。
这使编译器满足这些成员在运行时可用。
这让我们仍然可以获得mixins的好处,尽管有一些簿记开销。

// Disposable
isDisposed: boolean = false;
dispose: () => void;
// Activatable
isActive: boolean = false;
activate: () => void;
deactivate: () => void;

最后,我们将mixin混合到类中,创建完整的实现。

applyMixins(SmartObject, [Disposable, Activatable]);

最后,我们创建了一个辅助函数,它将为我们进行混合。
这将贯穿每个mixin的属性并将它们复制到mixins的目标,并使用它们的实现填充替代属性。

function applyMixins(derivedCtor: any, baseCtors: any[]) {
    baseCtors.forEach(baseCtor => {
        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
            derivedCtor.prototype[name] = baseCtor.prototype[name];
        });
    });
}
点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
Easter79 Easter79
2年前
TypeScript 4.0正式发布!现在是开始使用它的最佳时机
!(https://oscimg.oschina.net/oscnet/9d5dde21c00d49b6b148bfabfc93db57.jpg)作者|DanielRosenwasser译者|王强策划|李俊辰稿源|前端之巅微软宣布TypeScript4.0正式版上线了!这一新版本深入改进了表现力、生产力
Wesley13 Wesley13
2年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Easter79 Easter79
2年前
TypeScript基础入门
转载TypeScript基础入门泛型泛型类(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.gowhich.com%2Fblog%2F903)
Easter79 Easter79
2年前
TypeScript基础入门之装饰器(三)
转载 TypeScript基础入门之装饰器(三)(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.gowhich.com%2Fblog%2F956)继续上篇文章\TypeScript基础入门之装饰器(二)(https://www.oschina.net/action/G
Stella981 Stella981
2年前
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法
Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法参考文章:(1)Google地球出现“无法连接到登录服务器(错误代码:c00a0194)”解决方法(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fwww.codeprj.com%2Fblo
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
5个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k