Typescript的接口

typescript文档

https://www.tslang.cn/docs/handbook/jsx.html

接口的作用：

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

• 接口约束json结构，首先创建一个空目录，终端输入：tsc --init，修改json文件， 创建一个index.html文件，最后创建一个index.ts文件，修改vscode配置，自动生成js

  // ts中定义方法，其实通过参数的传递及格式要求，就是一种接口约束
  function printLabel(name:string):void{ // 参数的约束
      console.log(name)
  }
  printLabel("Ok")
  
  // ts 中自定义方法传入参数对 json进行约束
  function printLabel_1(labelInfo:{label:string}):void{ // 参数的约束
      console.log(labelInfo.label)
  }
  printLabel_1({label:"Nice"}) // 传入带有label的对象
  
  //1、 ts 实现批量方法的传入参数的约束，可以使用接口
  
  interface fullName {   // 定义接口
      // 对象必须要携带以下参数
      firstName:string;
      secondName:string;
  }
  
  function printLabel_2(name:fullName):void{ // 参数的约束
      console.log(name.firstName + "--" + name.secondName)
  }
  
  var obj = {  // 推荐这样写，外部写对象，再传入，这样可以添加额外的age，不会报错
      age:20,
      firstName:"wu",
      secondName:"yu",
  }
  printLabel_2({firstName:"wang",secondName:"li"}) // 传入带有label的对象
  printLabel_2(obj)
  
  function printLabel_3(name:fullName):void{ // 也可以实现这个接口
      console.log(name.firstName + "--" + name.secondName)
  }
  
  
  //2、可选接口属性
  interface fullName1 {   // 定义接口
      // 对象必须要携带以下参数
      firstName:string;
      secondName?:string;  // 通过？使其成为可选参数，不是必须要这个参数
  }
  
  function printLabel_4(name:fullName1):void{ // 也可以实现这个接口
      if (name.secondName){
          console.log(name.firstName + "--" + name.secondName)
      }else{
          console.log(name.firstName+"没有secondName")
      }    
  }
  
  printLabel_4({firstName:"xi",secondName:"he"})
  printLabel_4({firstName:"lisi"})　

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

  // 函数类型接口, 实现加密函数
  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+"加密"
  }
  
  // 接口约束函数
  alert(md5("name","张三"))　　

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

  //1、 中数组约束
  interface UserArr {
      [index:number]:string  // 通过接口越是数组的类型，索引是数值类型，值为value
      // [index:number]:any  // 通过接口越是数组的类型，索引是数值类型，值为any
  }
  
  var arr:UserArr=['1212','1233','aaa']
  alert(arr[1])  // 1233
  alert(arr[2])  // aaa
  
  //2、 对对象的约束
  interface userObj {
      [index:string]:string
  }
  
  var obj:userObj = {
      name:"wang",
      xing:"li",
      // age:20,  // 错误
  }　　

• 类类型接口和抽象类有点相似

  interface Animal {
      name:string     // 类属性接口约束
      eat(str:string):void  // 类方法接口约束
  }
  
  class Dog implements Animal {
      name:string;
      constructor(name:string){
          this.name = name
      }
      eat(){   // 必须实现eat方法否则报错,可不传name
          console.log(this.name+'吃粮食')
      }
  }
  var d = new Dog("小黑")
  d.eat()

• 接口的扩展，也就是说接口可以继承接口

  interface Animal1 {
      eat():void;
  }
  
  interface Person extends Animal1 {  // 继承Animal1接口
      work():void;
  }
  
  class Web implements Person {  // 类继承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();
  w.work();
  
  class Programmer {
      public name:string;
      constructor(name:string){
          this.name = name;
      }
  
      coding(code:string) {
          console.log(this.name+code)
      }
  }
  
  
  // 复杂结构的类的继承+接口扩展
  class Web_1 extends Programmer implements Person {  // 类继承Person,就需要实现各自的接口
      constructor(name:string){
          super(name)
      }
  
      eat(){
          console.log(this.name+"馒头喜欢")
      }
  
      work(){
          console.log(this.name+"正在工作")
      }
  }
  
  var w1  = new Web_1("小王")
  w1.coding('ts代码')
  w1.eat();

案例

1、书写一个ajax的方法实现接口约束

// 约束ajax的传入参数配置
interface Config{
    type:string;
    url:string;
    data?:string;
    dataType:string;
}

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("success")

            if (config.dataType=='json'){
                console.log(JSON.parse(xhr.responseText))
            }else{
                console.log(xhr.responseText)
            }
        }
    }
}

ajax({
    type:'get',
    url:'http://a.itying.com/api/productlist',
    dataType:'json'
})