TS 接口

定义

TS的核心原则之一就是对值所具有的结构进行类型检查，并且只要两个对象的机构一直，属性和方法的类型一致，则它们的类型就是一致的。

接口的特点：

• 定义对象、数组、函数、类等
• 接口可以相互继承
• 接口可以继承类
• 可选属性与额外检查

(function(){
  /*
  * - 接口用来定义一个类结构,用来定义一个类中应该包括的属性和方法
  * - 接口中的所有的属性都不能有实际的值
  * - 同时接口也可以当成类型声明去使用 
  * - 接口只定义对象的结构，而不考虑实际值
  * - 在接口中所有的方法都是抽象方法
  *
  */
  //*******************定义对象*********************//
  interface Test{
      name:string;
  }
  let one:Test = {
       name:'tom';
  }
  //*******************定义数组*********************//
  interface Test{
      [index:number]:string;
  }
  let one:Test = ['one','two'];
  //*******************定义函数*********************//
  interface Test{
      (name:string):void;
  }
  let one:Test = function(){
     console.log('hello')
  } 
  //*******************定义类*********************//
  interface constructor{
      (n:string,a:number):Person;
  }
  interface Person {
    name:string;
    age:number;
  }
  class People implements Person {
     name:string;
     age:number;
     
     constructor(name:string,age:number){
        this.name = name;
        this.age = age;
     }
  }
    //*******************接口相互继承*********************//
    interface Shape {
      color:string;
    }
    interface Sqaure extends Shape {
       sideLength:number;
    }
    let square:Sqaure = {
       color:'red',
       sideLength:11
    };
    //*******************接口相互类*********************//
    class Control {
      private color:string;
    }
    interface SelectControl extends Control {
       select():void;
    }
    class Mix extends Control implements  SelectControl{
       select(){
       }
    }
})();

接口合并

定义：接口合并就是将双方的成员放在一个同名的接口里

• 非函数成员

interface Box {
   height:number
}
interface Box {
   width:number
}
let box:Box = {height:2,width:12}

注意点：如果两个接口中同时声明了同名的非函数成员且它们的类型不同，则编译器会报错

• 函数成员

interface Cloner {
    clone(animal:Animal):Animal
}
interface Cloner {
    clone(animal:Sheep):Sheep
}
// 最终合并成一个声明
interface Cloner {
   clone(animal:Sheep):Sheep;
   clone(animal:Animal):Animal;
}

注意点： 1：每组接口里的声明顺序不变 2：各组接口之间的顺序是后来的接口重载出现在靠前位置

接口使用

• 定义函数类型

interface AddFunc {
  (num1:number,num2:number):number
}
const add:AddFunc = (n1,n2) =>n1 + n2
add(1,2)
console.log(add(1.2))  // 3

注意：很少使用接口类型定义函数类型，一般使用[内联类型或类型别名]配合箭头函数语法定义函数类型

type AddFunc = (num1:number,num2:number) => number

• 定义索引类型 需要使用索引签名来定义对象映射结构，通过"[索引名：类型]"的格式约束索引的类型。索引名称的类型分为string 和number两种。

const role1 = {
    0:'admin',
    1:'test'
}
interface RoleDic {
   [id:number]:string
}
const role1:RoleDic = {
   0:'admin',
   1:'test'
}
const role2:RoleDic = ['admin','test']

高级用法

• 继承接口 多个接口或许有同一个属性，可以使用extends继承

interface Vegetables {
   color:string
}
interface Tomato {
   color:string;
   length:number
}
interface Tomato extends  Vegetables {
   length:number
}
// 一个接口也可以继承多个接口，多个接口用逗号隔开。
interface Food {
  type:string
}
interface Tomato extends Food,Vegetables{
   length:number
}

• 混合类型接口 函数是对象属性，对象可以有属性，有时一个对象既有一个函数，也包含一些属性

// 定义一个Counter接口，这个结构必须包含一个函数，函数的要求是无参数，返回值是void,即无返回值。
interface Counter {
   ():void;
   count:number; // 名为count、值得类型为number类型的属性
}
const getCounter = ():Counter => {
    const c= () =>{
       c.count++
    }
    c.count = 0;
    return c
}

接口使用场景

• 查询参数校验
• 返回固定数据