typescript 学习第四天

一 接口

接口的作用，在面向对象的编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制规范的作用，接口定义了某一批类所需要遵循的规范，接口不关心这些类的内部状态数据，也不关心这些类里面方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要。typescript中的接口类似于java，同时还增加了更灵活的接口类型，包括属性，函数，可索引和类等

定义标准

1.属性类接口
2.函数类接口
3.可索引接口
4.类类型接口
5.接口扩展

1.属性接口 对json 的约束

ts中定义方法传入参数

function printLabel(labelInfo:{label:string}):void {
  console.log('printLabel')  
}
printLabel('哈哈') // 报错
printLabel({name:'张三'}) // 报错
printLabel({label:'张三'}) //正确

对批量方法传入参数进行约束
关键词： interface

interface FullName{
  firstName:string;
  secondName:string;  // 注意 分号结束
}

function printName(name:FullName;){
  // 必须传入对象firstName secondName
  console.log(name.firstName + ' --- ' + name.secondName)
}
printName('123') // 报错
printName({
  firstName: '涨',
  secondName: '三',
  age: 20,   // 报错，这种写法必须包含并只包含firstName和secondName
 })
var obj = {
  age:20,
  firstName: '涨',
  secondNmae: '三',
 }
printName(obj )   //正确，这种写法必须包含firstName和secondName，也可以包含其他属性

    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)

    }

    var obj = {
        age:20,
        firstName: '张',
        secondName: '三'
    }
    printName(obj) 

    var info = {
        age:20,
        firstName: '李',
        secondName: '四'
    }
    printInfo(info) 

接口可选属性

interface FullName {
  firstName:string;
  secondName?:string; // 问号 表示该参数可传可不传
}
function getName(name:FullName) {
  console.log(this.name)
}
var obj = {
  firstName: '张',
}
getName(obj)  // 正确 secondName 可传可不传

原生js 封装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;
}

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.itring.com/api/productlist',
  data: 'name=zhangsan',
  dataType: 'json'
})

2. 函数类型接口： 对方法传入的参数 以及返回值进行约束 可以批量约束

interface encrypt{
  (key:string;value:string;):string;
}
function md5:encrypt = function(key:string,value:string):string{
  return key + ' : ' + value
}
console.log(md5('name', '张三'))

3. 可索引接口：数组，对象的约束（不常用）

interface userArr{
    [index:number]:string;
}
var arr:userArr = [123, '123']; //报错
var arr1:userArr = ['123', '123']; //正确

可索引接口 对象约束

interface userObj{
  [index:string]:string;
}
var obj:userObj = {name: '123', age: '123'}; //正确

4.类类型接口： 对类的约束 和 抽象对象类似

implements

interface Animal{
    name:string;
    eat(str:string):void;
}

class Dog implements Animal{
  name:string;
  constructor(name:string){
    this.name =  name;
  }
  eat():string{
    // console.log(`${this.name}吃狗粮`)  //报错
     return `${this.name}吃狗粮`
  }
}
var d = new Dog('小黑')
console.log(d.eat())

class Cat implements Animal{
  name:string;
  constructor(name:string){
    this.name =  name;
  }
  eat(food:string):string{
    // console.log(this.name + '吃' + food) 
  }
}
var c = new Cat('小花')
c.eat('老鼠')