TypeScript(三)--接口

3.5 ts中的接口

作用：在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作规范，在程序设计里面接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内容状态数据，也不关心这些类里方法的实现细节，他只规定这批类里必须提供的某些方法，提供这些方法得嘞就可以满足实际需要。typescript中的接口类似java，同时还增加了更灵活的接口类型，包括属性，函数，可索引，类等

相当于定义标准

3.5.1 接口分类：

1.属性类接口：

1.1对json的约束、

function printLabel(labelInfo:{label:string}):void{
	console.log('printLabel');
}

printLabel({label:'seafwg'}); // 传入其他类型会报错

1.2可选属性：

interface FullName{
  firstName:string,
  secondName:string
}
function getName(name:FullName) {
  console.log(name);
}
//顺序可以不一样，但一定包含两个字段
getName({
  secondName:'secondName';
  firstName?:'firstName'; // 可选参数
})

demo:

interface Config{
  type: string;
  url: string;
  data?: string;
  dataType: string;
}

function ajax(Config:Config) {
  let xhr = new XMLHttpRequest();
  xhr.open(Config.type, Config.url, true);
  xhr.send(Config.data);
  xhr.onreadystatechange = function() {
   if(xhr.readyState == 4 && xhr.status == 200) {
     console.log('OK');
   }else{
     console.log('err');
   }
  }
}

2.函数类型接口：对批量方法传入参数进行约束

2.1 接口：行为和动作的规范，对于批量方法进行约束

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

function printName(name:FullName) {
  // 必须传入对象，firstName, secondName, 接口定义了firstName,secondName和类型。
  console.log(name.firstName+"--"+name.secondName);
}

printName({firstName:'seafwg',secondName:'123456'}); // 必须包含这两个字段，多余字段也会报错
let obj = {
  age: 23,
  firstName:'seafwg',
  secondName:'assassin'
}
printName(obj); // 不会报错，在外面定义了对象只要包含字段就可以

2.2 对方传入的参数以及返回值进行约束[可以进行批量约束]

interface encrypt{
	(key:string, value:string):string;
	// 参数约束，返回值约束
}
var md5:encrypt = function(key:string,value:string):string{
	return key+value;
}
console.log(md5('name','seafwg'));
//nameseafwg

3.可索引接口[数组，对象的约束]

// 数组接口
interface UserArr{
  [index:number]:string;
  // 索引为number类型，数组元素为string
  [index:number]:any;
}
let arr:UserArr = ['aaa', 'bbb'];
console.log(arr[0]);

// 对象的约束[不常用]
interface UserObj{
  [index:string]:string
}
var obj:UserObj = {
  name:'seafwg'
}

4.类类型接口【对类的约束，和抽象类有点相似】

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

class Dog implements Animal{
  name:string; // 接口中的name
  constructor(name:string) {
   this.name = name;
  }
  eat() { // 必须实现接口中的eat方法
   console.log(this.name+'吃骨头');
  }
}
let d = new Dog('小黑');
d.eat(); // 小黑吃骨头

class Cat implements Animal{
	//...
}

5.接口扩展【接口可以继承接口】

interface Animal{
	eat():void;
}
interface Person extends Animal{ // Person继承了Animal,这时Person接口也有了父接口中eat()方法
	work():void;
}

class Boy implements Person{
  public name:string;
  constructor(name:string) {
   this.name = name;
  }
  eat() { 
   console.log(this.name+'面条');
  }
  work() {
   console.log(this.name+'写代码');
  }
}

let b = new Boy();
b.eat();
b.work();

demo:

interface Inter1{
	play():void;
}
interface Inter2{
	work():void;
}
interface Inter3 extends Inter1, Inter2{
	sleep():void;
}

class Seafwg{
  public name:string;
  constructor(name:string) {
   this.name = name;
  }
  hobby() {
   console.log(this.name+'--'+'coding');
  }
}

class SeafwgSun extends Seafwg implements Inter3{
  play() {
   console.log(this.name+'篮球');
  }
  work() {
   console.log(this.name+'coder');
  }
  sleep() {
   console.log(this.name+'早睡早起');
  }
}
let seafwg = new Seafwg('seafwg');
seafwg.hobby();

let smallSeaf = new SeafwgSun('锦旗');
smallSeaf.play();
smallSeaf.work();
smallSeaf.sleep();
smallSeaf.hobby();