typescript —— interface接口（属性接口/函数类型接口/可索引接口/类型接口/接口继承）

1、接口

1.1、属性接口

关键字： interface

传入的参数必须包含接口内部字段，直接传只能有借口内字段，传入object类型的时候，除必须传入的字段，也可以包含其他字段；

interface FullName {
	firstNAme: string;
	secondName: string;
}

function printName (name: FullName) {
	// ... 
}


// 调用时
// 第一种调用
printName({
  age:20, // 这一行会报错
  firstName: 'zhang',
  secondName: 'san'
})

// 第二种调用
let obj = {
  age:20, // 此时不会报错
  firstName: 'zhang',
  secondName: 'san'
}
printName(obj)

可选属性

和可选参数一样，使用’?’：

interface FullName {
	firstNAme: string;
	secondName?: string; // 此时参数为可选参数
}

1.2、函数类型接口

对方法传入的参数，以及返回值进行约束；（可以批量约束）

interface encrypt {
	(key:  string, value: string): string;
}


var fun: encrypt = function (ket: string, value: string): string {
	//....
}

1.3、可索引接口（不常用）

数组约束

interface Arr {
  [index: number]: string
}

对象约束

interface obj = {
	[index: string]: string
}

1.4、类类型接口

对类进行约束，与抽象类相似

interface Animal {
  name: string;
  eat:(str:string):void;
}

class Dog implements Animal {
  name: string;
  constructor(name: string) {
		this.name = name
  }

	eat() { // 由于接口中有该参数，必须写这个方法，可以不传值
    .....
  }
}

1.5 接口的扩展

接口的继承：

Web类按照Person接口实现，但是Person接口继承了Animal接口，所以Web类应该含有Animal以及Person接口的对应方法；

interface Animal {
	eat():void;
}

interface Person extends Animal {
	work(): void;
}

class Web implements Person {
	public name: string;
	constructor(name: string) {
		this.name = name;
	}
	
	eat() {
		// ...
	}
	
	work () {
		// ...
	}
}

变形：

既有接口继承又有类的继承时：

  interface Animal {
	eat():void;
}

interface Person extends Animal {
	work(): void;
}

class Programmer {
  public name: string;
	constructor(name: string) {
		this.name = name;
	}
	
	coding(code:string) {
    // ....
  }
}

class Web extends Programmer implements Person {
	constructor(name: string) {
		super(name)
  }
	
	eat() {
		// ...
	}
	
	work () {
		// ...
	}
}

let w = new Web('老张');

w.coding() // ------ 此时是可以调用Programmer内的coding方法的；