TypeScript的接口的用途以及属性类型接口

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

TypeScript属性类型接口

• 1 属性类接口
• 2 函数类型接口
• 3 可索引接口
• 4 类类型接口
• 5 接口扩展
• interface: 定义接口
• implements 实现这个接口

  1、属性类接口

  属性接口 对json的约束

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

• ts中定义方法传入参数

  function printLabel_(label:string):void {
      console.log( label);
  }
  printLabel_('hahah');//hahah

• ts中自定义方法传入参数,对json进行约束,传入的对象**必须有label**

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

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

• 接口：行为和动作的规范，对批量方法进行约束
• interface:定义接口

  //interface:定义FullName_接口
  interface FullName_{
      firstName:string;
      secondName:string;
  }
  function printName_(name:FullName){
      /*必须传入对象  firstName  secondName*/
      console.log(name.firstName+'--'+name.secondName);
  }
  function printInfo(info:FullName){
      /*必须传入对象  firstName  secondName*/
      console.log(info.firstName+info.secondName);
  }
   var obj_={   /*传入的参数必须包含 firstName  secondName*/
      age:20,
      firstName:'张',
      secondName:'三'
  };
  printName(obj_);
  /*printInfo({})就只能符合FullName的格式不能有其他的*/
  printInfo({
      firstName:'李',
      secondName:'四'
  })

  接口 ：可选属性

  interface FullName_a{
      firstName:string;
      secondName:string;
  }
  function getName(name:FullName_a){
      console.log(name)
  }
  //参数的顺序可以不一样
  getName({
      secondName:'secondName',
      firstName:'firstName'
  })

• ** 接口的可选属性 加个？ 可选参数 可传可不传 **

  interface FullName_no{
      firstName:string;
      secondName?:string;
  }
  
  function getName_(name:FullName_no){
      console.log(name)
  }
  getName_({
      firstName:'firstName'
  })

  案例

• 接口模拟ajax

  /*
     $.ajax({
           type: "GET",
           url: "test.json",
           data: {username:$("#username").val(), content:$("#content").val()},
           dataType: "json"
       });
  */

  //参数必须满足参数的要求
  interface Config{
      type:string;
      url:string;
      data?:string;
      dataType:string;
  }
  //原生js封装的ajax
  function ajax(config:Config){
      var 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('成功');
               if(config.dataType=='json'){
                   console.log(JSON.parse(xhr.responseText));
               }else{
                   console.log(xhr.responseText)
               }
           }
      }
   }
   ajax({
      type:'get',
      data:'name=zhangsan',
      url:'http://a.itying.com/api/productlist', //api
      dataType:'json'
  })

  2 函数类型接口

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

  interface encrypt{//不用写function直接写参数
      (key:string,value:string):string;
  }
  var md5:encrypt=function(key:string,value:string):string{
      //模拟操作
      return key+value;
  }
  console.log(md5('name','zhangsan'));/*namezhangsan*/
  var sha1:encrypt=function(key:string,value:string):string{
      //模拟操作
      return key+'----'+value;
  }
  console.log(sha1('name','lisi'));/*name----lisi*/

  3 可索引接口

• ts定义数组的方式
• 可索引接口 对数组以及对象的约束（不常用）

  var arr:number[] = [1,2,3,4,5]
  var arr1:Array<string> = ["1","2"]

  可索引接口 对数组以及对象的约束（不常用）

  interface UserArr{
      //index 索引是number  val是string
      [index:number]:string
  }
  var arr2:UserArr=['aaa','bbb'];
  console.log(arr2[0]);/*aaa*/

  可索引接口 对对象的约束

  interface UserObj{
      [index:string]:string
  }
  var arr3:UserObj={name:'张三'};
  console.log(arr3.name);/*张三*/

  4 类类型接口:对类的约束 和抽象类抽象有点相似

  interface Animal{
      name:string;
      eat(str:string):void;
  }
  //implements 实现这个接口
  class dog_ implements Animal{
      name:string;
      constructor(name:string){
          this.name=name;
      }
      eat(){
          console.log(this.name+'吃粮食')
      }
  }
  var d_d=new dog_('小黑');
  d_d.eat();/*小黑吃粮食*/

  5 接口扩展：接口可以继承接口

  interface Animal{
      eat():void;
  }
  //Person接口继承Animal接口
  interface Person extends Animal{
      work():void;
  }

• Web类实现Person接口 因为Person接口继承Animal接口 所以必须要有eat()和work()方法

  class web implements Person{
      public name:string;
      constructor(name:string){
          this.name = name
      }
      eat(){
          console.log(this.name+'喜欢吃馒头')
      }
      work(){
          console.log(this.name+'在工作')
      }
  }
  var web_ = new web('小李')
  web_.work()
  web_.eat()

  继承类和接口方法

  interface  Jka{
      eat():void;
  }
  //content接口继承Jka接口
  interface content extends Jka{
      work():void;
  }
  class Programmer{
      public name:string;
      constructor(name:string){
          this.name = name
      }
      coding(code:string){
          console.log(this.name+code)
      }
  }
  //Nwe继承Programmer类并且实现content接口
  class Nwe extends Programmer implements content{
      constructor(name:string){
          super(name)
      }
      eat(){
          console.log(this.name+'喜欢吃馒头')
      }
      work(){
          console.log(this.name+'在工作')
      }
  }
  var aa_ = new Nwe('夏利')
  aa_.eat()//接口方法 夏利喜欢吃馒头
  aa_.work()//接口方法 夏利在工作
  aa_.coding('写代码') //基层父类的方法 夏利写代码

赏

谢谢你请我吃糖果

支付宝

微信