typescript学习笔记1 —— 接口（interface）

typescript是微软出品的，javascript的超集。让javascript的写法很类似java，核心功能是让JavaScript这个弱类型的语言，增加类型检查，更适合编写企业级应用。之前的angular项目使用的是typescript，流行的框架vue和react也支持typescript的写法，甚至node的替代品deno也是用typescript开发的，这就让重新好好学习它成为必然。
第一篇笔记是接口。

1、接口介绍

在java中，接口是用来定义一些规范，使用这些接口，就必须实现接口中的方法，而且接口中的属性必须是常量。
JavaScript中没有接口的概念，而它的超集typescript核心之一就是对值所具有的的结构进行类型检查，在typescript中，接口的作用就是为这些类型命名和为你的代码定义契约并让代码更好理解。

2、接口的简单使用

2.1、接口初探

interface LabelledValue {
  label: string;
}

function printLabel(labelledObj: LabelledValue) {
  console.log(labelledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

我们先定义一个接口，再把符合接口定义的对象传进去，就能提高代码可读性。类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

2.2、可选属性

实际应用中，接口中的属性不全是必需的，这时就得用到可选属性，就是在属性名称后面加一个？符号。可选属性的好处之一是可以对可能存在的属性进行预定义，之二是可以捕获引用不存在属性时的错误。

interface SquareConfig {
  color?: string;
  width?: number;
}

2.3、只读属性

如果我们希望对象属性只能在对象刚创建的时候修改其值，可以在属性名前制定readonly来指定只读属性。

interface Point {
    readonly x: number;
    readonly y: number;
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

2.4、定义只读数组

typescript具有ReadonlyArray类型，与Array相似，只是把所有可变方法去掉了，因此可以确保数组创建后再也不能被修改。

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
a = ro; // error!

将ReadonlyArray赋值到普通数组也不可以，但可以用类型断言重写。

3、接口的高级使用

3.1、函数类型

接口可以描述JavaScript中对象拥有的各种各样的外形，除了描述带有属性的普通对象外，接口也可以描述函数类型。

interface SearchFunc {
  (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

3.2、数组类型

跟接口描述差不多，我们也可以描述那些能够通过索引得到的类型，比如通过下标获得数组中的值a[2]，需要注意的是，索引器的类型只能是number或者string。

interface StringArray {
  [index: number]: string;
}

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

let myStr: string = myArray[0];

3.3、类类型

与java中接口的基本作用一样，typescript也可以用它来明确的强制一个类去符合某种契约。所谓类类型，就是一个类去实现接口，而不是直接把接口拿来用，写法就是 class implements interface。接口可以定义属性和方法。

interface IClock{
    /*定义了一个接口  这个接口中有一个属性和一个方法*/
    currentTime:Date;
    getTime(d:Date);
}
/*Time类实现IClock接口*/
class Time implements IClock{
    currentTime:Date;
    getTime(d:Date){
        this.currentTime=d;
    }
}

3.4、继承接口

和类一样，接口也可以相互集成。这让我们能够从一个借口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里。

3.5、混合类型

所谓的混合类型就是在一个接口中定义多种类型，比如属性，函数，数组等。

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;