美文网首页我爱编程程序员
Typescript实现设计模式的工厂模式

Typescript实现设计模式的工厂模式

作者: luopeizhen | 来源:发表于2016-11-25 15:23 被阅读0次

程序中经常会用到很多不同的设计模式, 而工厂模式的使用率, 是设计模式中使用率比较高的.
当我们用工厂模式的时候, 需要写一个Factory来创建各个类

interface IObjConstructor {
     new <T>() : T;
}
function create(c : IObjConstructor) : C1 {
    return new c()
}

代码里的create就是我们要的factory了, 然后我们写一个class实现IObjConstructor接口.

class C1 implements IObjConstructor {
    constructor() {
    }
}

这段代码看上去很正常, C1类实现了接口IObjConstructor, 但是编译会报错
Type 'C1' provides no match for the signature 'new <T>(): T'
奇怪了, 为什么说C1没有这个new属性呢? 我们看看官方文档关于interface的说法:

This is because when a class implements an interface, only the instance side of the class is checked. Since the constructor sits in the static side, it is not included in this check.
意思就是当class实现一个接口的时候, 只会检查实例面, 静态面是不检查的, 所以说找不到.

那么, 哪些是静态部分, 哪些是实例部分呢? 我们写一段ts,

class C1 {
    static s1: number = 5
    public s2: number = 0
    constructor() {
    }
}

把代码编译成js

var C1 = (function () {
    function C1() {
        this.s2 = 0;  //实例面
    }
    C1.s1 = 5;  //静态面
    return C1;
}());

这里可以看出来, 因为ts里面的class, 其实编译成js, 还是一个function, 而且是function里面的function, 那么外function就是静态面, 内function就是实例面, 内function当然没有new.
注意, 只有当class实现一个接口的时候, 才是检查实例面, 当类型以参数传入时, 是检查静态面的, 例如

interface IObjConstructor {
    new <T>() : T;
    add(a1:number, a2:number) : number
}
class C1 {
    constructor() {
    }
    add(a1:number, a2:number) : number {
        return a1 + a2
    }
}
function create(c : IObjConstructor) : C1 {
    return new c()
}

这段代码会得到一个错误
Property 'add' is missing in type 'typeof C1'.
那么, 我们要同时约束类的构造函数和其它的属性函数, 要怎么做呢?
要解决这个问题, 我们用create函数约束构造函数, 用接口约束其它属性函数, 例如:

interface IObjConstructor {
    new <T>() : T;
}
interface IObjAction{
    add(a1:number, a2:number) : number;
}
class C1 implements IObjAction {
    constructor() {
    }
    add(a1:number, a2:number) : number {
        return a1 + a2
    }
}
function create<T extends IObjAction>(c : IObjConstructor) : T{
    return new c<T>()
}
const c1 = create(C1)
console.log(c1.add(4, 5))  // = 9

这里IObjConstructor 约束构造函数, new用了泛型, 根据调用的类型T生成一个类型T的实例, C1实现IObjAction, 约束其它的函数.
由于C1传入到create, 并不会自动识别为IObjAction , 所以create函数的泛型类型T继承IObjAction, 让new最终生成的类型属于IObjAction, .

到这里已经用typescript实现了工厂模式.

typescript的接口和泛型可参考官方手册

相关文章

  • 设计模式-创建型模式-工厂模式(工厂三兄弟)TypeScript

    设计模式-创建型模式-工厂模式(工厂三兄弟) TypeScript 简单工厂模式 定义一个接口,三个具体类。然后书...

  • Typescript实现设计模式的工厂模式

    程序中经常会用到很多不同的设计模式, 而工厂模式的使用率, 是设计模式中使用率比较高的.当我们用工厂模式的时候, ...

  • Typescript 工厂模式

    标签: 前端 设计模式 工厂模式 typescript factory 如果下面的代码你能轻易阅读,那么你已经熟悉...

  • 设计模式之工厂模式

    设计模式之工厂模式 标签(空格分隔): 设计模式 工厂模式 设计模式的感念 设计模式的应用 工厂设计模式的产生 工...

  • 工厂模式

    java设计模式-工厂模式 工厂模式: 工厂模式是java设计模式里最常用的设计模式之一。 工厂模式属于创建型模式...

  • 设计模式四、抽象工厂模式

    系列传送门设计模式一、单例模式设计模式二、简单工厂模式设计模式三、工厂模式设计模式四、抽象工厂模式 抽象工厂模式 ...

  • C#实现设计模式 —— 抽象工厂模式

    本文为转载,原文C#实现设计模式 —— 抽象工厂模式 介绍 定义 抽象工厂模式(Abstract Factory ...

  • 设计模式三、工厂模式

    系列传送门设计模式一、单例模式设计模式二、简单工厂模式设计模式三、工厂模式设计模式四、抽象工厂模式 工厂模式 在一...

  • 设计模式-工厂

    这里介绍一下设计模式中的简单工厂模式、工厂方法模式、抽象工厂模式在iOS中的实现。这三个设计模式是有演变关系的;在...

  • Typescript设计模式之工厂模式

    【序】express源码中使用到了工厂模式,恰好在公众号搜罗中看到了这篇TS的工厂模式文章,express中使用的...

网友评论

    本文标题:Typescript实现设计模式的工厂模式

    本文链接:https://www.haomeiwen.com/subject/pwbipttx.html