Typescript泛型，接口，索引的混合使用

typescript提供了丰富的类型检测方法，这些方法混合使用时不是太好理解，牢固的掌握基础的类型检测方法，才可以在混合使用时得心应手。

核心：从本质上区分 数据类型 和 变量类型           

数据类型 指的是把一个类型当做变量，可以是ts原有数据类型之一，也可以是自定义的类型，是多种之中的一种 
        数据类型

变量类型 指的是一个变量的类型，此时的变量是可以赋予值的，变量类型指的是当前值得类型，是已经制定好 
        的，只有一种

几个概念：

接口：多个变量类型的契约集合，也就是指定多个变量类型
           接口也可以理解为是一种自定义 数据类型，这种数据类型内部又包含了多个变量类型

            接口是一个类

延伸

自定义数据类型：

//函数类型
interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}
//可索引类型
interface StringArray {
  [index: number]: string;
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];

let myStr: string = myArray[0];
//类类型
interface ClockInterface {
    currentTime: Date;
}

class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}
//混合类型
interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

泛型：类型变量（类型不确定，可变参数），
          可以是 对象，null，undefined，never，void，any，枚举（enum），数组，元数组，字符串，布尔值，数字 ，自定义

索引签名：描述对象索引类型，以及该索引返回值类型的表达式或者叫键值对。

interface StringArray {
  [index: number]: string; //[index: number]: string;是StringArray的索引签名
}

索引类型：通过索引得到的类型

索引类型查询：keyof T   

let someProps: keyof Interface1; // 'name' | 'age'

索引访问：Map<T>['foo']   通过索引遍历接口取到类型返回值

interface Map<T> {
    [key: string]: T;
}
let keys: keyof Map<number>; // string
let value: Map<number>['foo']; // number

混合类型：接口能够描述JavaScript里丰富的类型
 

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

 

参考：https://blog.csdn.net/zhangda89/article/details/82825483