ts中接口

前言：ts定义接口的任意一个属性

interface IPerson {
  name: string
  age: number
  family?: any[] // Error，因为不是任意类型的子集
  [propName: string]: string | number // 一般设置 any，因为其他类型必需是任意类型的子集
  [propName: string]: any // 一个 interface 中任意属性只能有一个
}

ts中接口，接口是代码的一种规范、约束和规定，ts中接口可分为以下几类：

• 对象型接口 ：对对象的规范
• 函数型接口 ：对函数的规范
• 可索引(数组型)接口:对数组(or对象)的规范
• 类类型接口: 对类的规范
• 其他接口：泛型接口、继承接口的接口 等

1. 对象型接口

interface Fullname {
  firstName: string;
  secondName: string;
  flag?: boolean;
}
function printName({firstName, secondName, flag}: Fullname) {  //解构 objName: Fullname
  console.log(firstName);
  console.log(secondName);
  if(flag){}
}
printName({ firstName: "shun", secondName: "ershun" });

   案例：用对象型接口封装原生ajax请求

interface Config{
    type:string; //get post
    url:string;
    data?:string;//可选传入
    dataType:string;//json xml等
}
 
//原生js封装的ajax
function ajax(config:Config){
 
    var xhr=new XMLHttpRequest();
    xhr.open(config.type,config.url,true);
 
    if(config.data){
        xhr.send(config.data);
    }else{
        xhr.send();
    }
 
    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://www.example.com/api', // api接口url
    dataType:'json'
})

2. 可索引类型接口（数组，数组对象）

/*
* ts中接口
*   可索引(数组型)接口   数组  可索引对象(hash、堆栈)  不常用
* */
 
//可索引接口
 interface UserArr{
     //定义索引key为number类型，索引值为string类型
     [index:number]:string
 }
 
 var arr1:UserArr;
  arr1=["aa","bb","cc"];
 var arr2: UserArr
  arr2={1:"hello",2:"world"};
 console.log(arr1);
 console.log(arr2);


/*
* ts中接口
*   可索引(数组对象)
* */
interface hanleA {
  [index:number]:hanleB
}

interface hanleB {
  name: string,
  age: number,
  flag?: boolean
}
function handleReduce(arr: hanleA) {
  console.log(arr)
}

handleReduce([{name: 'shun', age: 12}, {name: 'enne', age: 12}])

3.类类型接口

/*
* ts中接口
*     类类型接口: 对类的规范  ,这种类型的接口在传统面向对象语言中最为常见，
*     比如java中接口就是这种类类型的接口 。这种接口与抽象类比较相似，但是接口只能含有为抽象方法、成员属性。
*     实现类中必须实现接口中所有的抽象方法和成员属性。
* */
 
interface  Animal{
    name:string;
    eat(s:string):string;
}
 
//实现接口使用implements关键字，继承 使用extends关键字
//狗类
class Dog implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    //实现接口中抽象方法
    eat(s){
       return  this.name+"吃肉:"+s;
    }
}
//猫类
class Cat implements Animal{
    name:string;
    constructor(name:string){
        this.name=name;
    }
    //实现接口中抽象方法
    eat(s){
        return  this.name+"吃鱼:"+s;
    }
}
 
var dog=new Dog("tom");
var cat=new Cat("kitty");
console.log(dog.eat("五花肉"));
console.log(cat.eat("乌鳢鱼"));

4.泛型函数、泛型类、泛型接口

/*
 * ts中泛型
 *    泛型就是在编译期间不确定方法的类型(广泛之意思)，在方法调用时，由程序员指定泛型具体指向什么类型
 */
 
//1 泛型函数
 
/**
 * 获取数组中最小值 （数字）
 * @param {number[]} arr
 * @returns {number}
 */
function  getMinNumber(arr:number[]):number{
    var min=arr[0];
    arr.forEach((value)=>{
        if(value<min){
            min=value;
        }
    });
    return min;
}
 
/**
 * 获取数组中最小值 （字符串）
 * @param {number[]} arr
 * @returns {number}
 */
function  getMinStr(arr:string[]):string{
    var min=arr[0];
    arr.forEach((value)=>{
        if(value<min){
            min=value;
        }
    });
    return min;
}
 
console.log(getMinNumber([1, 3, 5, 7, 8]));//1
console.log(getMinStr(["tom","jerry","jack","sunny"]));//jack
 
/**
 * 获取数组中最小值 (T泛型通用)
 * @param {T[]} arr
 * @returns {T}
 */
function getMin<T>(arr:T[]):T{
   var min=arr[0];
   arr.forEach((value)=>{
      if(value<min){
          min=value;
      }
   });
    return min;
}
 
console.log(getMin([1, 3, 5, 7, 8]));
console.log(getMin(["tom","jerry","jack","sunny"]));
 
 
//2 泛型类
class GetMin<T>{
     arr:T[]=[];
     add(ele:T){
         this.arr.push(ele);
     }
    min():T{
       var min=this.arr[0];
       this.arr.forEach(function (value) {
          if(value<min){
              min=value;
          }
       });
       return min;
    }
}
  var gm1= new  GetMin<number>();
   gm1.add(5);
   gm1.add(3);
   gm1.add(2);
   gm1.add(9);
console.log(gm1.min());
 
var gm2= new  GetMin<string>();
gm2.add("tom");
gm2.add("jerry");
gm2.add("jack");
gm2.add("sunny");
console.log(gm2.min());
 
 
 
/**
 * 3 泛型函数接口
 */
interface ConfigFn{
    <T>(value:T):T;
}
 
var getData:ConfigFn=function<T>(value:T):T{
    return value;
}
getData<string>('张三');
// getData<string>(1243);  //错误
 
 
// 类似  Map<String,Object> Param  接口
interface Param{
    [index:string]:any
}
 
 
 
//4 泛型类接口
 
/**
 * page分页对象
 */
class Page{
    private currentPage:number=1; //当前页码 默认1
    private pageSize:number=10;//每页条数 默认为10
    private sortName:string; //排序字段
    private sortOrder:string="asc"; // 排序规则 asc | desc 默认为asc正序
 
 
     constructor(param:Param){
         if(param["currentPage"]){
             this.currentPage=param["currentPage"];
         }
         if(param["pageSize"]){
             this.pageSize=param["pageSize"];
         }
         if(param["sortName"]){
             this.sortName=param["sortName"];
         }
         if(param["sortOrder"]){
             this.sortOrder=param["sortOrder"];
         }
     }
 
    public    getStartNum():number{
        return   (this.currentPage-1)*this.pageSize;
    }
}
 
 
class User{
     id:number;//id主键自增
     name:string;//姓名
     sex:number;//性别 1男 2女
     age:number;//年龄
     city:string;//城市
     describe:string;//描述
 
}
 
//泛型接口
interface  BaseDao<T> {
     findById(id:number):T;//根据主键id查询一个实体
     findPageList(param:Param,page:Page):T[];//查询分页列表
     findPageCount(param:Param):number;//查询分页count
     save(o:T):void;//保存一个实体
     update(o:T):void;//更新一个实体
     deleteById(id:number);//删除一个实体
}
 
/**
 * 接口实现类
 */
class UserDao<User> implements BaseDao<User>{
     findById(id:number):User{
 
        return null;
     }
    findPageList(param:Param,page:Page):User[]{
         return [];
    }
    findPageCount(param:Param):number{
         return   0;
    }
    save(o:User):void{
 
    }
    update(o:User):void{
 
    }
    deleteById(id:number){
 
    }
}

5.函数型接口

/*
* ts中接口
*  函数型接口 ,非常类似于java、c#中使用lambda表达式传入匿名函数
*
* */
//
// //对两个数进行运算得到另一个数  函数型接口
interface  CalcTwo{
    (a:number,b:number):number;
}
 
 
/**
 * 计算数组被某种算法运算的结果
 * @param {number[]} arr  数组
 * @param {CalcTwo} calc  用户指定的算法函数
 * @param {number} initVal  传入初始值
 * @returns {number}  得到最终运算结果
 */
 function calcArr(arr:number[],calc:CalcTwo,initVal:number):number{
       var result=initVal;
      arr.forEach((value)=>{
          result = calc(result,value);
      });
 
     return result;
 }
 
 var arr:number[]=[1,3,5,7,9];
 var  add=function(a:number,b:number):number{
      return a+b;
  };
 
 var  multiply=function(a:number,b:number):number{
     return a*b;
 };
console.log("相加",calcArr(arr, add, 0));//25
 console.log("相乘",calcArr(arr, multiply, 1));//945
//或者直接传入一个匿名函数亦可
var s1=calcArr(arr,function(a,b){
    return a*b;
},1);
console.log("s1",s1);//945
 
 var s2=calcArr(arr,function (a,b) {
     return (a+1)*(b+1);
 },1);
console.log("s2",s2);//10170