• 5、typeScript中的接口


    /*
    1、属性接口
    2、函数类型接口
    3、可索引接口
    4、类类型接口
    5、接口扩展
    */ 
    接口的作用:在面向对象变成过程当中,接口是一种规范的定义,它定义了行为和规范,在程序设计里面,接口起到了限制和规范的作用。接口定义了某一批类所需要遵守的规范,接口不关心这些类的内部状态数据,也不关心这些类里方法的实现,它规定这批类里面必须提供某些方法,提供这些方法的类就可以满足实际需要,typesript中的接口类是于java,同时还增加了更加灵活的接口类型,包含属性、函数、可索引、和类等。
    定义标准。
    1、属性接口   对json的约束  
    interface
    ts中定义方法
    function PrintLabel():void {
        console.log('PrintLabel');
    }
    PrintLabel();
    

    ts中定义方法传入参数

    function PrintLabel(label:string):void {
        console.log(label);
    }
    PrintLabel('hahah')
    
    ts中定义方法传入参数对json进行约束
    function PrintLabel(lableInfo:{label:string}):void {
        console.log(lableInfo.label);
    }
    PrintLabel('hahah');//错误写法
    PrintLabel({name:'hahah'});//错误写法
    PrintLabel({label:'hahah'});//正确写法
    
    // 对批量方法进行约束
    // 就是对传入属性的约束-属性接口
    interface Fullname{
        firstName:string;
        secondName:string;
    }
    function printName(name:Fullname) {
        console.log(name.firstName+'---'+name.secondName);
    }
    
    printName('123456');//错误写法
    printName({
        firstName:'张',
        secondName:"三",
        age:20
    });//报错
    
    // 只能有要传入的属性
    printName({
        firstName:'张',
        secondName:"三",
    });
    // 定义传入 传入参数必须包含firstName secondName
    let obj ={
        firstName:'张',
        secondName:"三",
        age:20
    }
    printName(obj); 
    // 对批量方法进行约束
    interface Fullname{
        firstName:string;
        secondName:string;
    }
    function printName(name:Fullname) {
        // 必须传入对象 firstName、secondName
        console.log(name.firstName+'---'+name.secondName);
    }
    
    function printInfo(info:Fullname) {
        // 必须传入对象 firstName、secondName
        console.log(info.firstName+'---'+info.secondName);
    }
    let obj ={
        firstName:'张',
        secondName:"三",
        age:20
    }
    printName(obj);
    
    let info ={
        firstName:'李',
        secondName:"四",
        age:22
    }
    printName(info); 
    可选参数
    interface Fullname{
        firstName:string;
        secondName?:string;//可选属性
    }
    
    function getName(name:Fullname) {
        console.log(name);
    }
    getName({
        firstName:"firstName"
    })
    ajax的例子
    /*
    $.ajax({
        type:"get",
        url:"test.json",
        data:{username:$("#userName").val(),content:$("#content").val()},
        dataType:"json"
    });
    */ 
    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'){
                    console.log(JSON.parse(xhr.responseText));
                }else{
                    console.log(xhr.responseText);
                }
            }
        }
    }
    ajax({
        type:'get',
        url:'http://a.itying.com/api/productlist',
        dataType:'json'
    })
    

    2、函数类型接口

    // 对方法传入的参数以及返回值进行约束 批量约束
    // 加密的函数类型接口
    interface encrypy{
        (key:string,value:string):string;
    }
    var md5:encrypy=function(key:string,value:string):string {
        return key+value;
    }
    console.log(md5('name','zhangsan'));//namezhangsan
    
    var sha1:encrypy=function(key:string,value:string):string {
        return key+'----'+value;
    }
    console.log(sha1('name','lisi'));//name----lisi
    

    3、可索引接口

    ts定义数组的方式

    var arr:number[]=[1,2,3];
    var arr1:Array<string>=['1','2','3'];
    

    对数组的约束

    interface UserArr{
      [index:number]:string      
    }
    var arr:UserArr=['aaa','bbb'];
    console.log(arr[0]);//'aaa'
    

    对对象的约束

    interface UserObj{
      [index:string]:string
    }
    var arr:UserObj = {name:'张三'};
    

    4、类类型接口 

    对类的约束和抽象方法类似

    interface Animal{
      names:string;
      eat(str:string):void;
    }
    class Dog implements Animal{
      name:string;
      constructor(name:string){
        this.name = name;
      }
      eat(){
        console.log(this.name+'吃粮食');
      }
    }
    var d=new Dog('小黑');
    d.eat();//小黑吃粮食
    
    class Cat implements Animal{
      name:string;
      constructor(name:string){
        this.name = name;
      }
      eat(food:string){
        console.log(this.name+'吃'+food);
      }
    }
    var c=new Cat('小花');
    c.eat('老鼠');//小花吃老鼠
    

    5、接口扩展

    interface Animal{
      eat():void;  
    }
    interface Person extends Animal{
      work():void;
    }
    class Programmer{
      public name:string;
      constructor(name:string){
        this.name=name;            
      }
      coding(code:string){
        console.log(this.name+code);
      }  
    }
    class Web extends Programmer implements Person{
      constructor(name:string){
        super(name);
      }
      eat(){
        console.log(this.name+'喜欢吃馒头');
      }  
      work(){
        console.log(this.name+'写代码');
      }  
    }
    var w=new Web('小李');
    w.eat();
    w.work();
    

      

  • 相关阅读:
    Flask学习笔记(3)-数据库迁移
    windows脚本批处理传输文件到linux脚本
    @TableLogic表逻辑处理注解(逻辑删除)
    使用thumbnailator给图片加水印
    Spring Cloud Stream 使用延迟消息实现定时任务(RabbitMQ)
    centos修改时区,同步时间
    定时清理缓存
    redis基本命令
    运行jar包shell脚本
    硬盘扩容后,建立新分区,将已有的目录挂载到新分区下
  • 原文地址:https://www.cnblogs.com/wenshaochang123/p/13418147.html
Copyright © 2020-2023  润新知