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()