Typescript:接口

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

1、属性类型接口

(1)属性接口

 function printLabel(labelInfo:{label:string}):void {//属性约束
            console.log('printLabel');
        }
        printLabel('hahah'); //错误写法
        printLabel({name:'张三'});  //错误的写法
        printLabel({label:'张三'});  //正确的写法

interface FullName{//属性接口，传入对象的约束
         firstName:string;   
         secondName:string;
     }
 function printName(name:FullName){
          // 传入的name必须具有firstName  secondName两个字段
           console.log(name.firstName+'--'+name.secondName);
       }
  printName('1213');  //错误
  printName({ age:20,firstName:'张',secondName:'三'});//错误，传入的参数必须只包含firstName，secondName和属性接口对应.顺序可以不一致，类型必须一致
  var obj={  
             age:20,
             firstName:'张',
             secondName:'三'
         };
  printName(obj);//传入的参数必须包含 firstName,secondName可以和属性接口不对应，但是在方法中不能访问多余的属性

(2)属性接口：可选属性，可传可不传

 interface FullName{
      firstName:string;
      secondName?:string;
  }
function getName(name:FullName){
        console.log(name)
    }  
getName({firstName:20})//secondName可以不传入

2、函数类型接口

函数类型接口:对方法传入的参数以及返回值进行约束

interface encrypt{
    (key:string,value:string):string;//（参数类型约束）：返回值类型约束
}

var a:encrypt=function(key:string,value:string):string{
        return key+value;
}

3.可索引接口

数组、对象的约束（不常用）

         //ts定义数组的方式  
            var arr:number[]=[2342,235325]
            var arr1:Array<string>=['111','222']
     
        //可索引接口 对数组的约束
                 interface UserArr{
                    [index:number]:string//索引值必须是number，元素类型是string
                }
              var arr:UserArr=['aaa','bbb'];
              var arr:UserArr=[123,'bbb'];  /*错误*/

        //可索引接口 对对象的约束
             interface UserObj{
                     [index:string]:string//属性名是string类型，属性值是string类型
               }
             var arr:UserObj={name:'张三'};

4.类类型接口

对类的约束和抽象类抽象有点相似

    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();

5.接口扩展

接口可以继承接口

  interface Animal{
      eat():void;
     }
  interface Person extends Animal{
        work():void;
    }
   class Web implements Person{
        public name:string;
        constructor(name:string){
           this.name=name;
        }
       eat(){
           console.log(this.name+'喜欢吃馒头')
         }
       work(){
           console.log(this.name+'写代码');
         }      
     }
     var w=new Web('小李');
     w.eat();

猜你喜欢