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