ts中接口的作用

对批量方法传入参数进行约束
接口:行为和动作的规范,对批量方法进行约束
//传入对象的约束  属性接口
interface FullName{
    firstName:string;//注意;结束
    secondName:string;
    
}
function printName(name:FullName){
    //必须传入对象firstName secondName
    console.log(name.firstName+'--'+name.secondName)
}
printName('1212');//错误
printName({
    age:20,
    firstName:'张',
    secondName:'三'
})
//这样age会报错,因为没有定义,可以这样实现:
var obj = { //传入的参数必须包含firstName和secondName
     age:20,
     firstName:'张',
     secondName:'三'
}
printName(obj)//不会报错 

---------------接口可选属性
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'){
                   JSON.parse(xhr..responseText)
             }else{
                   console.log(xhr.responseText)
              }
         }
     }
}
ajax({
    type:'get',
    url:'http://www.baidu.com',

    dataType:'json'
})
---------------加密函数的类型接口
interface encrypt{
    (key:string,value:string):string;
}
var md5:encrypt=function(key:string,value:string):string{
    //模拟操作
    return key+value;
}
console.log(md5('name','zhangsan'));
var sha1:encrypt=function(key:string,value:string):string{
//模拟操作
    return key+'-------'+value;
}
console.log(sha1('name','lisa'))

---------------可索引接口:数组、对象的约束(不常用)
ts定义数组的方式:
var arr:number[]=[1,2,3,4]
var arr1:Array<string>=['1','2','3']
//可索引接口,对数组的约束
interface userArr{
    [index:number]:string
}
var arr:userArr=['1','2','3'];
console.log(arr[0])
//可索引接口,对对象的约束
interface UserObj{
    [index:string]:string
}
var arr:UserObj={name:'20'}//多一个参数都不行
---------------类类型接口:对类的约束 和 抽象类有点相似
多态:父类定义一个方法不去实现,子类去继承它并实现,每个子类有不同的表现
interface Animal{
    name:string;
    eat(str:string):viod;
}
class Dog implements Animal{
    name:string;
    constructor(name:string){
          this.name=name
     }
    eat(){
          console.log(this.name+'吃粮食')
     }
}
vara d = new Dog() 

  

posted @ 2022-06-23 18:13  韩Jeor  阅读(159)  评论(0编辑  收藏  举报