• TypeScript泛型


    TypeScript泛型

    一、什么是泛型

    泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中,分别称为泛型类、泛型接口、泛型方法。

    二、泛型方法

       1、需求:定义identity函数。 这个函数会返回任何传入它的值

    不用泛型的话,这个函数可能是下面这样:

    function identity(arg: number): number {

    return arg;

    }

    或者,使用any类型来定义函数:

    function identity(arg: any): any {

    return arg;

    }

    使用any类型会导致这个函数可以接收任何类型的arg参数,这样就丢失了一些信息:传入的类型与返回的类型应该是相同的。如果我们传入一个数字,我们只知道任何类型的值都有可能被返回。

    问题:我们需要一种方法使返回值的类型与传入参数的类型是相同的。

    2、解决办法:

      使用类型变量,它是一种特殊的变量,只用于表示类型而不是值。

           function identity<T>(arg: T): T {

    return arg;

    }

    identity添加了类型变量T T帮助我们捕获用户传入的类型(比如:number),之后我们就可以使用这个类型。 之后我们再次使用了 T当做返回值类型。现在我们可以知道参数类型与返回值类型是相同的了。 这允许我们跟踪函数里使用的类型的信息。

    3、使用方法:

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

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

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

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

    let output = identity("myString");

    注意我们没必要使用尖括号(<>)来明确地传入类型;编译器可以查看myString的值,然后把T设置为它的类型。 类型推论帮助我们保持代码精简和高可读性。

    三、泛型类:

      需求:找最小数的算法,需要同时支持返回数字和字符串两种类型,通过类的泛型来实现

      非泛型实现方式:

    class MinClass {
        public list:number[]=[];

        add(num:number){
            this.list.push(num);
        }

        min():number{
            var minNum = this.list[0];
            for (var i=0; i<this.list.length;i++){
                if (minNum>this.list[i]){
                    minNum = this.list[i];
                }
            }
            return minNum
        }
    }

    var m = new MinClass();
    m.add(2);
    m.add(12);
    m.add(33);
    m.add(52);
    console.log(m.min());

      泛型方式实现:

    class MinClass1<T> {  // 泛型类
        public list:T[] = [];
        add(value:T):void {
            this.list.push(value)
        }

        min():T{
            var minNum = this.list[0];
            for (var i=0; i<this.list.length;i++){
                if (minNum>this.list[i]){
                    minNum = this.list[i];
                }
            }
            return minNum
        }
    }

    var m1 = new MinClass1<string>();//这里的泛型是string,当然也可以是number
    m1.add('a');
    m1.add('A')
    m1.add('b')
    console.log(m1.min());

     

    四、泛型接口:

    例如:函数接口:

    interface ConfigFn {
        (value1:string,value2:string):string  // 函数接口
    }
    var setData:ConfigFn = function(value1:string, value2:string):string{
        return value1+value2
    }
    console.log(setData('name:','刘备')); //函数接口的实现

    转换成泛型:

     1、第一种定义方式:

    //泛型接口:
    interface ConfigFns {
        <T>(value:T):T  //'T'表示参数类型
    }
    var getData: ConfigFns = function <T>(value: T):T { //泛型接口的实现
        return value;
    }

     2、第二种方式:

     interface ConfigFns<T> {
        (value:T):T
    }
    function getData(value:T):T {
        return value;
    }

    var GetData:ConfigFns<string> = getData;
    console.log(GetData('Deyun'))

     

     

  • 相关阅读:
    NABCD(校园包车)
    作业5.2~5.3
    作业5.1
    作业
    JAVA EE社团管理升级版-数据库设计
    JAVA EE社团管理升级版-微信小程序端说明文档
    社团项目软件展示
    社团项目个人总结
    北京地铁规划项目总结
    地铁出行线路规划项目设计
  • 原文地址:https://www.cnblogs.com/lone5wolf/p/15834990.html
Copyright © 2020-2023  润新知