技术分享

使用TypeScript开发微信小程序(6)——泛型(Generic)


软件工程中,不仅要创建一致的定义良好的API,同时也要考虑可重用性,组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,为创建大型系统提供了十分灵活的功能。在 TypeScript里, 可以像C#和Java语言一样,使用泛型来创建可重用的组件,一个组件可以支持多种类型的数据,这样用户就可以以自己的数据类型来使用组件。

泛型

可以使用类型变量,它是一种特殊的变量,只用于表示类型而不是值,使返回值的类型与传入参数的类型是相同的。

    function identity<T>(arg: T): T {        return arg;
    }

以上代码,给 identity 添加了类型变量 T。 T  可以捕获用户传入的类型(比如:number),并使用 T 当做返回值类型。参数类型与返回值类型是相同的了,可以跟踪函数里使用的类型的信息。 把 identity 函数叫做泛型,因为它可以适用于多个类型。 不同于使用 any,它不会丢失信息,参数类型与返回值类型保持准确性。

定义了泛型函数后,可以用两种方法使用。

第一种是,传入所有的参数,包含类型参数:

    let output1 = identity<string>("myString");

第二种方法更普遍。利用了类型推论 — 即编译器会根据传入的参数自动地帮助我们确定T的类型:

    let output2 = identity("myString");

使用泛型创建泛型函数时,编译器要求在函数体必须正确的使用这个通用的类型。 换句话说,必须把这些参数当做是任意或所有类型。

    function loggingIdentity<T>(arg: T): T {        console.log(arg.length);  // Error        return arg;
    }

以上代码,编译器会报错说使用了arg 的 length 属性,但是没有地方指明 ar g具有这个属性。 些类型变量代表的是任意类型,所以使用这个函数的人可能传入的是个数字,而数字是没有  length 属性的。

除了可以创建泛型函数,还可以创建泛型接口和泛型类,但无法创建泛型枚举和泛型命名空间。

泛型函数的类型

泛型函数的类型与非泛型函数的类型没什么不同,只是有一个类型参数在最前面。可以使用不同的泛型参数名,只要在数量上和使用方式上能对应上就可以。

    function identity2<T>(arg: T): T {        return arg;
    }    let myIdentity2: <U>(arg: U) => U = identity2;

还可以使用带有调用签名的对象字面量来定义泛型函数。

    function identity3<T>(arg: T): T {        return arg;
    }    let myIdentity3: { <T>(arg: T): T } = identity3;

泛型接口

可以把泛型参数当作整个接口的一个参数,就能清楚的知道使用的具体是哪个泛型类型(比如: Dictionary而不只是Dictionary)。 这样接口里的其它成员也能知道这个参数的类型了。

    interface GenericIdentityFn<T> {
        (arg: T): T;
    }    function identity3<T>(arg: T): T {        return arg;
    }    let myIdentity: GenericIdentityFn<number> = identity;

以上代码,不再描述泛型函数,而是把非泛型函数签名作为泛型类型一部分。 当使用 GenericIdentityFn 的时候,还得传入一个类型参数来指定泛型类型(这里是:number),锁定了之后代码里使用的类型。

泛型类

泛型类看上去与泛型接口差不多。 泛型类使用( <>)括起泛型类型,跟在类名后面。

    class GenericNumeric<T> {
        zeroValue: T;
        add: (x: T, y: T) => T;
    }    let numberNumeric = new GenericNumeric<number>();
    numberNumeric.zeroValue = 0;
    numberNumeric.add = function (x, y) { return x + y; };    console.log(numberNumeric.add(numberNumeric.zeroValue, 100));    let stringNumeric = new GenericNumeric<string>();
    stringNumeric.zeroValue = "";
    stringNumeric.add = function (x, y) { return x + y; };    console.log(stringNumeric.add(stringNumeric.zeroValue, "test"));

与接口一样,直接把泛型类型放在类后面,可以帮助确认类的所有属性都在使用相同的类型。泛型类指的是实例部分的类型,所以类的静态属性不能使用这个泛型类型。

泛型约束

可以定义一个接口来描述约束条件。创建一个包含 属性的接口,使用这个接口和 extends 关键字还实现约束:

    interface Lengthwise {
        length: number;
    }    function logIdentity<T extends Lengthwise>(arg: T): T {        console.log(arg.length); 
        return arg;
    }    // logIdentity(3);  // Error    logIdentity({length: 10, value: 3});

以上代码,泛型函数 logIdentity 被定义了约束,因此它不再是适用于任意类型,需要传入符合约束类型的值,必须包含必须的属性。

在泛型约束中使用类型参数

可以声明一个类型参数,且它被另一个类型参数所约束。 比如,现在有两个对象,并把一个对象的属性拷贝到另一个对象, 需要确保没有不小心地把额外的属性从源对象拷贝到目标对象,因此需要在这两个类型之间使用约束。

    function copyFields<T extends U, U>(target: T, source: U): T {        for (let id in source) {
            (<U>target)[id] = source[id];
        }
        return target;
    }

    let x = { a: 1, b: 2, c: 3, d: 4 };
    copyFields(x, { b: 10, d: 20 }); 
    // copyFields(x, { Q: 90 }); // Error

在泛型里使用类类型

在TypeScript使用泛型创建工厂函数时,需要引用构造函数的类类型。

    class BeeKeeper {
        hasMask: boolean;
    }

    class ZooKeeper {
        nametag: string;
    }

    class Animal {
        numLegs: number;
    }

    class Bee extends Animal {
        keeper: BeeKeeper;
    }

    class Lion extends Animal {
        keeper: ZooKeeper;
    }

    function findKeeper<A extends Animal, K>(a: {
        new (): A;
        prototype: { keeper: K }
    }): K {

        return a.prototype.keeper;
    }

    findKeeper(Lion).nametag;

以上代码,使用原型属性推断并约束构造函数与类实例的关系。

参考资料

  • TypeScript官网
  • TypeScript中文网

其他

  • 完整代码:https://github.com/guyoung/GyWxappCases/tree/master/TypeScript
  • 微信小程序Canvas增强组件WeZRender:https://github.com/guyoung/WeZRender