TypeScript小白入门篇之接口

TypeScript中接口起到的作用是明确规定一个对象应该具有哪些属性以及属性的类型是什么，保证对象的规范和一致性、使开发者在编写代码时获得清晰的结构定义和类型提示、又或是不同组件或模块之间进行通信的数据结构。

接口如何工作

当我们使用对象作为函数参数时，如果参数类型直接在参数列表中声明，那么当我们在其他地方调用该函数并传入一个对象时，TS自带的类型检查器只会检查被传入的对象是否含有必要的属性；如果参数类型以接口的方法声明，类型检查器就会严格检查传入对象的每个属性的类型是否一致。不过类型检查器并不会检查属性的顺序。

//参数类型直接在参数列表中声明
function square(config: {color:string, width:number}): void {
}

//参数类型用接口进行声明
interface squareconfig {
	color: string;
	width: number;
}

function square(config: squareconfig):void {

}

可选属性

可选属性只需要在接口的属性名后加一个？就可以声明。一方面，可选属性可以进行预定义，在调用函数传入对象时，可以直接使用{}创建对象并且对一部分属性赋值再传入函数中；另一方面，可选属性使得开发者在代码编写时如果引用了不存在的属性，TS将会直接捕获该错误。

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

只读属性

只读属性使用readonly进行声明，它使得这个属性只能在对象刚刚创建时进行赋值。

interface square {
	readonly color: string;
	readonly width: number;
}

typescript中也有ReadonlyArray属性，它和Array属性类型，只是去掉了所有可变方法。

let array: ReadonlyArray<number> = [1,2,3,4];

如果你需要一个变量拥有只读属性，那么就使用const关键字；如果你需要一个属性拥有只读属性，那么就使用readonly关键字。
需要注意的是，typescript对于对象字面量（也就是用花括号{}创建的对象）会进行额外的属性检查，当你将它赋值给一个变量或者传入一个函数时，如果这个对象字面量含有目标类型不含有的属性，你会仅仅得到一个报错。虽然可以使用类型断言和
索引签名的方式绕开额外的属性检查，但这通常是不明智的。

函数类型

如果你想要使用接口声明函数类型，那当你在声明接口时，需要为它写上调用签名，这让接口看起来像是一段参数列表和返回值，比如这样：

interface functype {
	(width: number, height: number): boolean;
}

怎样使一个函数将这个接口作为它的函数类型呢，你只需要像这样：

let myFunc: functype;
myFunc = function(wid: number, hei: number): boolean {

}

你不必令参数列表中的参数名完全一致，因为函数会逐个检查，只需对应位置上的参数类型是兼容的；你甚至也不必写上参数类型，类型系统自然会进行类型推断。

可索引类型

你也可以使用接口来描述那些本来可以通过索引访问得到的变量，例如a[10]或者ageMap['Dehaan']。这听起来和函数类型有些异曲同工之妙，不是吗。就像我们在函数类型那里为接口写上调用签名一样，这里我们也要为可索引类型写上索引签名了，索引签名描述索引的类型和按索引访问后返回值的数据类型。

interface strArray {
	[index: number]: string;
}
let myArray:strArray;
myArray = ['Dene', 'Army'];

typescript仅支持数字和字符串这两种索引签名。
你也可以给索引签名加上关键字readonly，这样索引就会是只读的，有效避免索引被赋值。

类类型

实现接口

你可以用接口明确地强制一个类符合某种规定。比如在接口中声明一个方法，然后在类中实现它。
使用implements关键字。

继承接口

接口之间可以相互继承，一个接口可以继承多个接口。
使用extends关键字。

混合类型

一个接口可以声明为既是函数类型又是普通接口。

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;