zoukankan      html  css  js  c++  java
  • 06_TypeScript泛型

    1、泛型的定义

      泛型就是解决 类,接口 方法的复用性,以及对不特定数据的支持(类型校验)。

    2、泛型函数

    //T 表示泛型,具体什么类型是调用这个方法的时候决定的,
    //T可以用其他大写字母表示,传入的参数和返回的参数一致
    function getData<T>(value:T):T{
        return value;
    }
    getData<number>(123);
    getData<string>('123');
    getData<number>('123');//错误的写法

    3、泛型类

    //定义一个类,实现有个最小堆算法,需要同时支持返回数字和字符串来俩种类型
    //普通写法:只能支持一种数据类型 number 或 string
    class MinClass{
        plublic 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<number>();
    m.add(2);m.add(4);m.add(6)
    console.log(m.min())
    //泛型写法:可同时支持 number 和 string 
    class MinClass<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;
        }
    }
    //实例化类,并且制定了类的T代表类型是neummber
    var m = new MinClass<number>();
    //实例化类,并且制定了类的T代表类型是string  传参 a-z
    var m = new MinClass<string>();
    m.add('a');m.add('b');m.add('c')
    console.log(m.min())

    4、泛型接口

    //函数类型接口
    interface Config{
        (value1:string,value2:string):string;
    }
    var setData:Config=function(value1:string,value2:string):string{
        return value1+value2;
    }
    setData('name','张三')
    //泛型接口 写法一
    interface Config{
        <T>(value:T):T;
    }
    var getData:Config=function<T>(value:T):T{
        return value;
    }
    getData<string>('123');
    getData<number>(123);
    //泛型接口 写法二
    interface Config<T>{
        (value:T):T;
    }
    function getData<T>(value:T):T{
        return value;
    }
    var myGetData:Config<string>=getData;
    myGetData('1223')

    5、把类当作参数

    //定义一个User类
    class User{
        username:string | undefined;
        pasword:string | undefined;
    }
    //定义一个MyData类
    class MyData{
        //把User 类当作参数来验证传入参数的合法性
        add(user:User):boolean{
            return true;
        }
    }
    var u = new User();
    u.username = '张三';
    u.pasword = '1234';
    var D = new MyData();
    //把类当作参数传入
    D.add(u);
    //定义一个User类
    class User{
        username:string | undefined;
        pasword:string | undefined;
    }
    //定义一个MyData类 ,泛型写法
    class MyData<T>{
        add(info:T):boolean{
            console.log(info);
            return true;
        }
    }
    var u = new User();
    u.username = '张三';
    u.pasword = '1234';
    var data = new MyData<User>();
    data.add(u);
  • 相关阅读:
    vue滑块拖拽校验
    vue和原生自动聚焦
    vue实现bar左右拖拽
    fastclick插件使用
    三大家族易忘点和案例
    移动端调试工具chrome+devtools
    restful 与 webapi 详解
    .NET Core 中依赖注入框架详解 Autofac
    .NET Core 对象( Transient、Scope、Singleton )生命周期详解 (对象创建以及释放)
    C# 通过DataSet 获取SQL 存储过程返回的多个结果集(tables)
  • 原文地址:https://www.cnblogs.com/MaShuai666/p/12358446.html
Copyright © 2011-2022 走看看