TypeScript的接口

什么是接口

接口类似于抽象类，只不过他更加彻底，只提供标准却完全不实现细节。具体表现在，成员字段不可以赋值初始化，方法不可以实现。接口用来约束对象、函数以及类的结构和类型。

接口类型无法表示原始类型，如boolean类型等。

接口声明只存在于编译阶段，在编译后生成的JavaScript代码中不包含任何接口代码。

定义接口

通过接口声明能够定义一个接口类型。接口声明使用 interface 定义接口

interface Person{
	name:string;
	age:number;
	run():string;
}

在该语法中，interface是关键字，InterfaceName表示接口名，它必须是合法的标识符，TypeMember表示接口的类型成员，所有类型成员都置于一对大括号“{}”之内。

按照惯例，接口名的首字母需要大写。因为接口定义了一种类型，而类型名的首字母通常需要大写。

接口成员的类

在接口名之后，由一对大括号“{}”包围起来的是接口类型中的类型成员。
接口的类型成员有以下五类：

• 属性签名
• 调用签名
• 构造签名
• 方法签名
• 索引签名

属性签名

属性签名声明了对象类型中属性成员的名称和类型。

interface Person {
	name:string
}

这表示Person类型中拥有 叫做name的属性成员，该成员的类型是string。

调用签名

调用签名定义了该对象类型表示的函数在调用时的类型参数、参数列表以及返回值类型。

interface Person {
	():void
}

这表示Person类型中拥有一个名为run的方法，没有参数，返回值是void

构造签名

构造签名定义了该对象类型表示的构造函数在使用new运算符调用时的参数列表以及返回值类型。

interface Person {
	new (name):Person
}
function test(fn:Person){
  return new fn('zhangsan');
}

方法签名

方法签名是声明函数类型的属性成员的简写

interface Person {
	eat():void
}

从语法的角度来看，方法签名是在调用签名之前添加一个属性名作为方法名。在方法签名中可以定义方法的参数类型和返回类型。
之所以说方法签名是声明函数类型的属性成员的简写，是因为方法签名可以改写为具有同等效果但语法稍显复杂的属性签名。
改写如下：

interface Person {
	eat:{():void}
}

索引签名

JavaScript支持使用索引去访问对象的属性，即通过方括号“[]”语法去访问对象属性。一个典型的例子是数组对象，我们既可以使用数字索引去访问数组元素，也可以使用字符串索引去访问数组对象上的属性和方法。

接口中的索引签名能够描述使用索引访问的对象属性的类型。
索引签名只有以下两种：

• 字符串索引签名。
• 数值索引签名。

字符串索引签名的语法如下所示：

[IndexName: string]: Type

在该语法中，IndexName表示索引名，它可以为任意合法的标识符。索引名只起到占位的作用，它不代表真实的对象属性名；在字符串索引签名中，索引名的类型必须为string类型；Type表示索引值的类型，它可以为任意类型。

数值索引签名与上面的语法一致，只需要将IndexName的类型改为number即可。

[IndexName:number]:Type

实现接口

class Man implements Person{
	name:string
	age:number
	constructor(name:string,age:number){
		this.name=name
		this.age=age	
	}
	run():string{
		return this.name+""+this.age
	}
}

继承接口

继承接口与继承类的写法类似，都是使用extends关键字。
接口的继承分为类继承接口和接口继承接口

类继承接口

interface Person {
	name:string
	age:number
	run():string
}
interface ABC extends Person{
	def():string
}
class Man implements ABC{
	name:string
	age:number
	constructor(name:string,age:number){
		this.name=name
		this.age=age	
	}
	run():string{
		return this.name+""+this.age
	}
	def():string{
		return "def"
	}
}

接口继承接口

interface shap {
    color:string;
}

interface square extends shap{
    sideLength: number;
}

let mySquare:square = {
    color:'red',
    sideLength:10,
};

接口类型

对象的接口类型

接口也可以作为一种类型，用接口定义对象。

interface Person{
	name:string
	age:number
	run():string
}
//对象字面量
let man:Person={
	name:"Mr.Lee",
	age:100,
	run(){
		return this.name+"的年龄为"+this.age
	}
}
console.log(man.run)

接口的字段也可以是任意属性

interface Person {
	[attrName:string]:any
}
let man:Person={
	name:"Mr.Lee",
	age:100,
	gender:"男"
}

中括号里面的attrName是指对象中的属性名，其后面的string是指属性名的类型，只支持两种类型string和number，如果是number类型，要写成下面这种形式

interface Person {
	[attrName:number]:any
}
let man:Person={
	1:"Mr.Lee",
	2:100,
	3:"男"
}

中括号外面的冒号后面的any是指值的类型

函数的接口类型

用接口规范函数的结构，用接口定义函数。

interface Add {
	(x: string, y: string): string
}
let add:Add=(a,b)=>a+b

联合类型的接口

接口中可以定义函数，也可以定义对象

interface Lib{
	():void;
	name:string;
	doSomething():void;
}
let lib:Lib=(()=>{}) as Lib;  //此处需要进行类型断言，否则会报错
lib.name="svb",
lib.doSomething=()=>{}

声明合并

编译器把程序中相同的声明合并成一个声明

接口的声明合并

interface A{
	x:number
}
interface A{
	y:number
}
//声明合并
let a:A={
	x:1,
	y:1
}