【TypeScript】 抽象和接口示例

抽象类

abstract class Animal {
  
    public name:string;
  
    constructor(name:string){
      this.name = name;
    }
  
    abstract eat():void;// 抽象方法,要在子类中实现
  
    // 抽象类中也可以存在非抽象方法
    getName():string{
      return this.name;
    }
  }
  
  class Dg extends Animal {
  
    constructor(name:string){
      super(name);
    }
  
    eat():void{
      console.log('Dog:'+ this.name +' 在吃东西');
    }
  }
  
  // const dog = new Dg("Sunny");
  
  // dog.eat();
  // console.log(dog.getName());

接口

属性约束接口
//封装ajax,通过接口限制传参类型

interface ajaxConfig{
  type:string;
  url:string;
  data?:string;
  dataType:string;
}

// 原生js封装的ajax
function ajax(config:ajaxConfig){
  var xhr=new XMLHttpRequest();
  xhr.open(config.type,config.url,true);
  xhr.onreadystatechange=function(){
    if(xhr.readyState==4 && xhr.status==200){
      console.log('chengong');
      if(config.dataType=='json'){
        console.log(JSON.parse(xhr.responseText));
      }else{
        console.log(xhr.responseText)
      }
    }
  }
  xhr.send(config.data);
}

ajax({
  type:'get',
  data:'name=zhangsan',
  url:'http://a.itying.com/api/productlist', //api
  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','lisi'));
类约束接口
interface IAnimal {
  name:string;
  eat():void;
}

//接口可以继承接口,不需要实现
interface IDog extends IAnimal{
  age:number;
  work():void;
}

//实现类必须实现所有的继承
class Dog implements IDog{

  name:string;

  age:number;

  constructor(name:string,age:number){
    this.name = name;
    this.age = age;
  }
  
  eat(){
    console.log("Dog:"+this.name+' 在吃东西');
  }

  work(){
    console.log("Dog:"+this.name+" 是一直警犬");
  }

  getName(){
    return this.name;
  }
}

// let d = new Dog("Sunny",6);

// console.log(d.getName());
// d.eat();
// d.work();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值