TS基础2（泛型、枚举、元组）-学习笔记

川长思鸟来 2022-10-19 12:42 157阅读 0赞

### 文章目录 ###

*   *  TS基础2（泛型、枚举、元组）-学习笔记
     *   *  泛型
         *  枚举
         *  元组
         *  例子参考

## TS基础2（泛型、枚举、元组）-学习笔记 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]

### 泛型 ###

//泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。
        //<T> 泛型变量T T表示什么？任何类型
        function hello<T>(name:T):T{    //hello函数是泛型
            return name
        };
        //hello<string>('abc');
        hello<string|number>(123);  //定义多个类型
        hello(123);  //类型推断 编译器会根据传入的参数来自动的判断T的类型
    
        //缺点 只能传string
        // function hello2(name:string):string{ 
        // return name
        // };
        // hello2(123);
        //缺点 不确定返回值的类型
        function hello3(name:any):any{ 
            return name
        };
        hello3(123);
    
        //泛型在函数中具体的写法
        //函数声明
        function f<T>(x:T):T{ 
            return x
        };
        //函数表达式
        let f2 = function<U>(x:U):U{ 
            return x
        }
        //ES6
        let f3 = <U>(x:U):U=>{ 
            return x
        }
    
        //限制 参数的属性或方法一定是属于任何类型
        function hello4<T>(name:T):number{    //hello函数是泛型
            //name 表示是任何类型
            return name.length  //error T表示为任何类型 也就是name.length是所有类型都支持的属性
        };
    
        function hello5<T>(name:T[]):number{    //number[] string[]
            //name 数组
            return name.length   //
        };
        //hello5<number>([1,2,3])
        hello5<string >(['1','2','3'])
    
    
        //泛型的约束 extends
        //<T extends Abc> 泛型T必须符合接口ABC的形状
        interface LengthN{ 
            length:number
        }
    
        function hello6<T extends LengthN>(name:T):number{    //hello函数是泛型
            //name 必须有length属性的类型 
            return name.length  
        };
        hello6<string>('222');
    
        //数组泛型 类型+[]
        let arr:Array<number> =[1,2,3];
        var arr2:number[] = [1,2,3];
    
        //需求 创建一个数组 传入3表示数组的长度为3 具体'x' ['x','x','x']
        //createArray(长度,值) 
        //createArray(5,'a') ['a','a','a','a','a']
        //createArray(2,3) [3,3]
        function createArray(length:number,value:any):Array<any>{ 
            var arr = [];
            for(let i=0;i<length;i++){ 
                arr[i] = value
            };
            return arr;
        };
        createArray(5,'a') ;
    
        function createArray2<T>(length:number,value:T):Array<T>{ 
            var arr = [];
            for(let i=0;i<length;i++){ 
                arr[i] = value
            };
            return arr;
        };
        createArray2<number>(5,3) ;
    
        //多个类型参数
        function f6<N,S>(a:[N,S]):[S,N]{ 
            return [a[1],a[0]]
        };
        f6<number,string>([1,'a'])
    
        //泛型在类中的运用
        class A2<T>{ 
            n:T;
            constructor(num:T){ 
                this.n = num
            }
            action(x:T):T{ 
                return x
            }
        };
        var a2 = new A2<number>(1);

### 枚举 ###

//枚举 enum类型是对JavaScript标准数据类型的一个补充
        var arr7 = ['a','b','c'];
        arr7['a']  //不能通过键来获取，只能索引
        var obj = { a:1,b:2};
        obj[1] //不能通过索引取值
    
        enum Color { red,green,blue,'a','b','c'};
        var c:Color= Color.red //0 通过键取值
        var c2:string = Color[1] //green 通过索引取值
    
        //改变索引值
        enum Color2 { red=10,green,blue};
        var c3:Color2= Color2.green  //11
    
        //手动设置
        enum Color3 { red=30.7,green=20,blue=10};
        var c4:Color3= Color3.green //20 
    
        //任意值
        var c11 = 'hello';
        enum Color4 { red=30.7,green=<any>c11,blue=c11.length};
        var c5:Color4= Color4.green //hello

### 元组 ###

//元组 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
        //数组
        var lists:number[] = [1,2,3,4,5];
        var lists2:Array<string> = ['1','2'];
        var lists3:Array<any> = ['1','2',true,1,2];
        var t:[number,string] = [10,'a'];  //元组允许一个数组中可以有多个不同的类型 一一匹配

### 例子参考 ###

//档位
    enum Gear { 
        First=1, Second=3, Third=5
    }
    enum Color { 
        White, Red
    }
    //接口
    interface Drivable { 
        //启动
        start(): void;
        //驾驶
        drive(time: number, speed: Gear): void;
        //行驶距离
        getKilometer(): number
    }
    //定义一个抽象的类 
    //abstract 抽象的类 没有实现 不可被实例化
    //定义动物类
    // abstract class Animal { 
    // abstract eat():void; //抽象类的子类必须实现抽象类的抽象方法
    // }
    // //var a = new Animal(); //error 用到了abstract修饰符，不能被实例化 
    // class Dog extends Animal{ 
    // constructor(){ 
    // super();
    // }
    // //抽象类的子类必须实现抽象类的抽象方法
    // eat(){ 
            
    // }
    // }
    
    abstract class Car implements Drivable {   //定义一个抽象类 来实现Drivable接口
        protected _isRunning: boolean;   //只能被子类访问的属性
        protected _distanceFromStart: number;  //只能被子类访问的属性
    
        constructor() { 
            this._isRunning = false;
            this._distanceFromStart = 0;
        }
    
        public start() {     //公共启动汽车
            this._isRunning = true;
        }
        //抽象类的子类必须实现抽象类的抽象方法
        abstract drive(time: number, speed: Gear): void;   
        public getKilometer(): number {     //公共行驶距离
            return this._distanceFromStart;
        }
    }
    //派生类 子类
    class BMW<T extends Color> extends Car { 
        private color: Color;  //私有属性
    
        constructor(T) { 
            super();
            this.color = T;
        }
    
        public drive(time: number, speed: Gear): void { 
            if (this._isRunning) { 
                this._distanceFromStart += time*speed;//行驶距离
            }
        }
    
        public getColor(): string { 
            return Color[this.color]
        }
    }
    
    let bmw = new BMW(Color.Red);
    bmw.start();
    bmw.drive(10, Gear.First);
    bmw.drive(60, Gear.Third);
    document.body.innerHTML = "distance:"+bmw.getKilometer()+',color:'+bmw.getColor()

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hoaG1vbmtleQ_size_16_color_FFFFFF_t_70]: /images/20221005/a74f322fc0a34b18997586ed6c486713.png