Typescript 学习3 类的定义、继承、修饰符、静态属性和方法、接口用途

我就是我 2023-03-04 06:40 10阅读 0赞

### 1.ts中类的定义 继承 类里面的修饰符，静态属性，静态方法 ###

//ts 中 类的定义 继承 类里面的修饰符
    /* class Persion { name: string; //属性前面省去了public关键词 constructor(name: string) { //构造函数 实例化类的时候触发的方法 this.name = name; } getName():string{ return this.name; } setName(name:string):void{ this.name=name } } var b=new Persion('張三'); b.setName('lisi') alert(b.getName()) */
    
    // ts实现继承 extends、super
    class Persion { 
      name: string;
      constructor(name: string) { 
        this.name = name;
      }
      run(): string { 
        return `${ this.name}在运动`   //模板字符串 `${}`
      }
    }
     var b=new Persion('王五')
    alert(b.run()) 
      class Web extends Persion{ 
       static sex:string='男'
       constructor(name:string){ 
         super(name) //初始化父类的构造函数
       }
       run():string{ 
        return`${ this.name}在运动 --子类`   //模板字符串 `${}`
      }
       work():void{ 
         alert(`${ this.name}在工作`)
       }
       static print(){ 
        alert(`print方法`+this.sex)  //静态方法只能调用静态属性
       }
    
     } 
    /* var b=new Web('王五') alert(b.run()) b.work() */
    //Web.print();
    //console.log(Web.sex)
    
    //3类里面的修饰符 typescript里面定义属性的时候给我们提供了三种修饰符
    /* public private protected */
    
    // 抽象类和抽象方法用来定义标准，标准: Animal 这个类要求它的子类必须包含eat方法
    /* abstract class Animal { name: string; constructor(name: string) { this.name = name } abstract eat(): any; } class Dog extends Animal { constructor(name:any) { super(name) } eat() { console.log(this.name+"吃肉") } } var dog=new Dog('小狗'); dog.eat() */

### 2.typescript 中的接口用途以及属性类型接口，ts封装ajax ###

/* 接口的作用:在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起 到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这 些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。 typescrip中的接口类似于java,同时还增加了更灵活的接口类型，包括属性、函数、可索引和类等。 定义标准。 */
    
    //接口:行为和动作的规范，对批量方法进行约束
    /* interface FullName { firstname: string; endname: string; } function PrintName(name: FullName) { console.log(name.firstname + '-----' + name.endname); } var obj = { age: 20, firstname: '张', endname: '三' } PrintName(obj) */
    
    //接口 可选属性
    /* interface FullName { firstname: string; endname?: string; } function getName(name: FullName) { console.log(name); } var obj = { firstname: '张', } getName(obj) */
    
    
    //原生js封装的ajax
     interface Config { 
      type: string;
      url: string;
      data?: string;
      dataType: string
    }
    
    function ajax(config: Config) { 
      var xhr = new XMLHttpRequest();
      xhr.open(config.type, config.url);
      xhr.send(config.data);
      xhr.onreadystatechange = function () { 
        if (xhr.readyState == 4 && xhr.status == 200) { 
          console.log('chengong');
          if (config.dataType == 'json') { 
            console.log(JSON.parse(xhr.responseText));
          }
          console.log(xhr.responseText);
    
        }
      }
    
    }
    ajax({  type: 'get', url: 'http://a.itying.com/api/productlist', dataType: 'json', data: 'name==zhangsan' }) 
    
    
    //md5 加密 函数类型接口
    interface encrypt { 
      (key: string, value: string): string;
    }
    //匿名函数
    var md5: encrypt = function (key: string, value: string): string { 
      //模拟操作
      return key + value;
    }
    console.log(md5(' name ', ' zhangsan'));