typescript-接口

接口？

北鼻，送你一组接口便于你的理解

接口的作用

在面向对象的编程中，接口是一种规范的定义，他定义了行为和动作的规范，在程序设计中，接口起到了一种限制和规范的作用，接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关系这些类方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需求。

属性类接口

1.TS定义方法传入参数， 对指定参数约束它的数据类型

function printLabel(val:string):void{
  console.log(val)
}
printLabel('哈哈')  //  正确写法
printLabel(123)     // 错误写法

2.TS自定义方法传入参数对JSON的约束

// 定义传入的JSON参数必须含有一个name为字符串的对象
function printLabel(userInfo:{name:string}):void{
  console.log(userInfo)
}
printLabel({name:'大盘鸡拌面'})  // 正确的写法
printLabel('哈哈')  //  错误写法

3.对批量方法传入参数进行约束

要求：必须传入对象，参数1：firstName；参数2： lastName;并且两个参数必须是string类型(必须传入的两个参数)

// 接口的定义（传入对象的约束）
interface FullName{
  firstName:string;  // 注意分号结束
  lastName:string;
  // lastName?:string;  //可选属性，可传可不传
}
function printName(name:FullName){
  console.log(name)  
}
function printInfo(name:FullName){
  console.log(name)  
}
let obj = {
  firstName: '杨',
  lastName: '过'
}
printName(obj)；
printInfo(obj);

函数类接口

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

//模拟加密的函数类型接口
interface encrypt{
  (key:string,value:string):string;
}
// 模拟操作
var md5:encrypt = function(key:string,value:string):string{
  return key+value;
}
var sha1:encrypt = function(key:string,value:string):string{
  return key+'----'+value;
}
md5('name', 'zhangsan')；
sha1('name', 'lisi')

可索引接口，数组，对象的约束

上篇文章介绍过就不过多介绍了
var arr:number[] = [12,12]

1.数组的约束

// 接口的定义
interface UserArr{
  [index:number]:string
}
var arr:UserArr = ['1','2']  //  正确写法
var arr:UserArr = [1,'2']    //  错误写法

2.对象的约束

interface UserObj{
  [index:string]:string
}
var obj:UserObj = {
  name: '张三'
}

类类型接口： 对类的约束（相似与抽象类）

关键字（implements）实现接口

interface Animal{
  name:string;
  eat(str:string):void;
}
class Dog implements Animal{
  name:string;
  constructor(name:string){
    this.name = name;
  }
  eat(){
    console.log(this.name+'在吃饭')
  }
}
var d = new Dog('小黑')；
d.eat()  // 小黑在吃饭

接口的拓展

接口的继承

interface Animal{
  eat():void;  // 参数可传可不传
}
// Person 接口继承 Animal接口
interface Person extends Animal{
  work():void;
}
// 实现Person接口
class Web implements Person {
  public name:string;
  constructor(name:string){
    this.name = name
  }
//定义了两个方法，所以都要写 （eat方法和work方法）
  eat(){    
    console.log(this.name+'在吃大盘鸡拌面')
  }
  work(){
    console.log(this.name+'在打代码')
  }
}
var p = new Web('李四')
p.work()    // 李四在打代码

类的继承结合接口继承

interface Animal{
  eat():void; 
}
interface Person extends Animal{
  work():void;
}
class Progrommer{
   public name:string
   constructor(name:string){
    this.name = name;  
  }
  coding(code:string){
    console.log(this.name + code)
  }
}
class Web extends  Progrommer implements Person {
  public name:string;
  constructor(name:string){
    this.name = name
  }
  eat(){    
    console.log(this.name+'在吃大盘鸡拌面')
  }
  work(){
    console.log(this.name+'在打代码')
  }
}
var p = new Web('小李')；
w.coding('在写ts代码')