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

文章目录

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

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

在这里插入图片描述

泛型

//泛型（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()