typescript学习之泛型

￡神魔★判官ぃ 2023-07-14 08:29 2阅读 0赞

*  通俗理解：繁星就是解决 类 接口 方法的复用性，以及对不特定数据类型的支持
 *  可以解决的问题：当一个函数在传入的参数是什么类型的时候，就要返回什么类型
 *  T表示泛型，具体什么类型是调用这个方法的时候决定的 ，当然也可以是其他大写字母，一般都写T

function getInfo<T>(value:T):T{   // 表示传入的参数是什么类型，返回的就是什么类型
        return value;
    }
    getInfo<string>('123') // 指定函数传入的参数必须是string

#### 泛型类 ####

比如有个最小堆算法，需要同时支持返回数字和字符串两种类型， 就需要通过泛型类来实现

class MinUmn<T>{  // T表示泛型，因为不确定类型
        public list:T[]=[]
        add (val:T) { 
            this.list.push(val)
        }
        mixin():T{ 
            let _min = this.list[0];
            for(let i = 1; i <= this.list.length; i++) { 
                if(_min >= this.list[i]) { 
                      _min = this.list[i]
                }
            }
            return _min;
         }
    }
    const m = new MinUmn<number>(); // 实例化类，并指定了类中的T代表的类型是number
    m.add(1)
    m.add(20)
    m.add(15)
    m.add(10)
    m.add(2)
    console.log(m.mixin());

#### 泛型接口 ####

*  方式一

interface ConfigFn{ 
        <T>(value:T):T
    }
    const getdata:ConfigFn = function<T>(value:T):T{ 
        return value;
    }
    console.log(getdata<string>('zhansghan')); // 函数名后面的变量就表示T的类型

*  方式二

// 方式二：
    interface Config<T>{ 
        (value:T):T
    }
    function getData<T>(value:T):T{ 
        return value;
    }
    const otherGetData:Config<string>= getData;
    console.log(otherGetData('20'));

#### 把类作为参数类传递数据 ####

// 定义一个泛型类
    class CreateF<T> { 
        add(info:T):void{ 
            console.log(info)
        }
    }
    // 通过泛型实现校验 方式一
    class Obj{ 
        name:string | undefined;
        sub:string | undefined;
    }
    var o = new Obj();
    o.name = '张山';
    o.sub = '你好';
    const f = new CreateF();
    f.add(o); // 调用的时候实现校验
    // 通过泛型实现校验 方式二
    class Obj1{ 
        title:string | undefined;
        subtitle:string | undefined;
        constructor(params: {  // 实例化类的时候实现校验
            title: string | undefined;
            subtitle:string | undefined;
        }) { 
            this.title = params.title;
            this.subtitle = params.subtitle;
        }
    }
    const obj1 = new Obj1({ 
        title: '54545',
        subtitle: '442424524'
    })
    const f1 = new CreateF<Obj1>();
    f.add(obj1)