TypeScript入门笔记（二）

接上篇。

TypeSrcipt 泛型

/*---------------------------------0.引子-----------------------------------*/
/*现在很多语言里也有泛型的概念，也没啥好说的，简单的例子一个，主要就是看泛型在ts中的写法*/
function getInfo<T>(params: T): T {
    return params;
}
//调用泛型方法
let output_str = getInfo<string>("str");
//简单的写法：而且ts的编译器能够自动帮我们推断类型
let output_num = getInfo(100);
/*--------------------------------------------------------------------------*/

/*--------------------------------1.泛型参数---------------------------------*/
//方法参数使用泛型，类型是指定类型的数组
function getMax<T>(arr: Array<T>): T {
    let max = arr[0];
    arr.forEach(item => {
        if (item > max) {
            max = item;
        }
    });
    return max;
}
let numArr: Array<number> = [2, 3, 44, 1, 9, 10];
let numStr: Array<string> = ['c', 'd', 'a', 'A'];

console.log(getMax(numArr));    //44
console.log(getMax(numStr));    //d
/*--------------------------------------------------------------------------*/

/*--------------------------------2.泛型接口----------------------------------*/
//在ts中就不要使用I做为接口名前缀了，这不是人家的规范
interface GetMinFn {
    <T>(arg: Array<T>): T
}
/* 其实我更喜欢这么写
interface GetMin<T> {
    (arg: Array<T>): T
}
*/

//写一个方法
function getMin<T>(arr: Array<T>): T {
    let min = arr[0];
    arr.forEach(item => {
        if (item < min) {
            min = item;
        }
    });
    return min;
}
//用接口来接方法
let myGetMinFunction: GetMinFn = getMin;
console.log(myGetMinFunction(numArr));    //1
/*--------------------------------------------------------------------------*/

/*--------------------------------3.泛型类-----------------------------------*/
//跟泛型接口大差不差
class MySort<T>{
    private dataCollection: Array<T> = new Array<T>();

    constructor(arr?: Array<T>) {
        if (arr) {
            this.dataCollection = arr;
        }
    }

    add(data: T): void {
        this.dataCollection.push(data);
    }

    min(): T {
        return getMin<T>(this.dataCollection);
    }

    max(): T {
        return getMax<T>(this.dataCollection);
    }
}
//实例化泛型类，需要传入类型参数
let numberSortObj = new MySort<number>(numArr);
let stringSortObj = new MySort<string>(numStr);

console.log(numberSortObj.min());   //1
console.log(numberSortObj.max());   //44
console.log(stringSortObj.min());   //A
console.log(stringSortObj.max());   //d
/*--------------------------------------------------------------------------*/

/*--------------------------------4.泛型约束---------------------------------*/
//就是T代表的类型不是所有类型都可以的，需要满足一定的条件，这个条件就称为“泛型约束”
//比如下面的函数，想获取传入的变量的长度，但是不是所有的类型都有“长度”这个属性的
// function getLength<T>(arg: T): T {
//     console.log(arg.length);  // Error: T一定就有".length"这个属性
//     return arg;
// }

interface Lengthwise {
    length: number;
}
//传入的参数必须满足接口 Lengthwise 的约束，约束就是必须有一个名为length的属性，并且返回
//值是number类型
function getLength<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // OK
    return arg;
}

//现在这个泛型方法传入的参数类型就得到了约束
//getLength(3);   //Error：Argument of type '3' is not assignable to parameter
                //of type 'Lengthwise'.
getLength([1, 2, 3, 4, 5]);             //5
getLength({ length: 10, value: 3 });    //10

/*--------------------------------------------------------------------------*/

TypeSrcipt 类型兼容性

//类型兼容性的话我们在其他语言（C#或者Java）中也都接触过，举几个典型例子

/********************************1. “接口”接收“类”*******************************/
interface Named {
    name: string;
}

class People {
    name: string;
    constructor(n: string) {
        this.name = n;
    }
}

let p: Named = new People("sherlock");

//****2. "接口"接收对象，只要包含name属性即可，编译器检查的过程是递归进行的，检查每个成员及子成员。****
//****所以说TypeScript是结构性的类型系统，咱对比两个类型是否相同就看你的内部结构是否一样*************
let alice: Named;
let aliceProfile = { name: 'Alice', location: 'Seattle' };
//变量aliceProfile中包含name属性
alice = aliceProfile;

//********************************3. 同上，方法参数也可以是接口********************************
function sayHello(n: Named) {
    console.log('Hello, i am ', n.name);
}
sayHello(aliceProfile);

//********4. 比较两个函数，强类型语言中很少有这样的写法，但是在js中函数也是一种特殊对象，****************
//********这样就好理解了，你可以对比到子类型和父类型
let a = (a: number) => 0;
let b = (b: number, s: string) => 0;

a = b; // 报错
b = a; // OK

let c = () => ({ name: 'Alice' });
let d = () => ({ name: 'Alice', location: 'Seattle' });

c = d; // OK
d = c; // 报错, 系统强制源函数的返回值类型必须是目标函数返回值类型的子类型


//********************************5. 不同的枚举类型之间是不兼容的********************************
enum Status { Ready, Waiting };
enum Color { Red, Blue, Green };

let s = Status.Ready;
s = Color.Green;  // Error

//********6. 比较两个类类型的对象时，只有实例的成员会被比较。 静态成员和构造函数不在比较的范围内***********
//********并且变量的可访问等级也要是相同的
class Beauty {
    eyes: number = 2;
    constructor(name: string, height: number) { }
}

class Ugly {
    eyes: number = 2;
    constructor(height: number) { }
}

let jack: Beauty = new Beauty("jack", 190);
let jordan: Ugly = new Ugly(140);

jack = jordan;  // OK
jordan = jack;  // OK

//********************************7. 再看一下泛型*********************************************
interface Empty<T> {
}

let eNum: Empty<number>;
let eStr: Empty<string>;

eNum = eStr;  // OK, 因为Empty<T>这个接口中的“结构”都是空的，所以这两个就是兼容的

interface NotEmpty<T> {
    data: T;
}
let neNum: NotEmpty<number>;
let neStr: NotEmpty<string>;

neNum = neStr;  // Error, 这种情况下两个对象中的“结构”一个是number型一个是string，就不同了