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

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'));