ts -004- 接口

1.属性类接口

// 对批量方法传入参数进行约束
// 接口：行为和动作的规范，对批量方法进行约束
interface FullName {
  firstName: string; // 注意以分号结尾
  lastName: string;
}
function printName(name: FullName) {
  // 必须传入对象firstName lastName
  console.log(name.firstName + " " + name.lastName);
}
printName("小三"); //错误
printName({ firstName: "张", lastName: "三" });//正确，必须包含但不可以有其他对象属性
printName({ firstName: "张", lastName: "三", age: 30 });//报错
var obj = {//参数的顺序可以不一样
  //推荐写法
  firstName: "张",
  lastName: "三",
  age: 30,
};
printName(obj);
//有问题
interface FullName {
  firstName: string; // 注意以分号结尾
  lastName: string;
}
function printName(name: FullName) {
  // 必须传入对象firstName lastName
  console.log(name.firstName + " " + name.lastName+name.age);//接口中必须有age才行
}
var obj = {
  //推荐写法
  firstName: "张",
  lastName: "三",
  age: 30,
};
printName(obj);

接口：可选属性
interface FullName {
  firstName?: string;
  lastName?: string; //可选参数
}
function printName(name: FullName) {
  console.log(name.firstName + " " + name.lastName);
}
var obj = {
  // firstName: "张",
  // lastName: "三",
};
printName(obj);

2.AJAX的请求过程解析

// 举个例子：ajax的异步请求
/* $.ajax({
  type: "GET",
  url: "test.json",
  data: "我是一段数据...",
  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://www.migu.cn/",
  data: "name:张三",
  dataType: "json",
});

2.可索引接口：（不常用）

// ts中定义数组的方式
let arr2: number[] = [1, 2, 3, 4];
let arr3: Array<string> = ["aaa", "ddd", "fff"];
// 可索引接口  对数组的约束：
interface UserArr {
  [index: number]: string;
}
var arr: UserArr = [123, "bbb"]; //错误
var arr1: UserArr = ["aaa", "bbb"]; //正确
console.log(arr[1]);
// 可索引接口  对对象的约束
interface UserObj {
  [index: string]: string;
}
var obj: UserObj = { name: "张三" };
console.log(obj.name);

3.类类型接口：

// 类类型接口：对类的约束   和抽象类有点类似
interface Animal {
  name: string;
  eat(str: string): void;
}
class Dog implements Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  eat() {
    console.log(this.name + ",你蹲在厕所干嘛？");
  }
}
let 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);
  }
}
let c = new Cat("小花猫");
c.eat("狗粮");

4.接口扩展：接口可以继承接口

// 扩展接口
interface Animal {
  eat(): void;
}
interface Person extends Animal {
  work(): void;
}
class Web implements Person {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }
  eat() {
    console.log(this.name + ",你这么喜欢吃这个？我看错你了");
  }
  work() {
    console.log(this.name + ",你怎么又在写代码？");
  }
}
let w = new Web("小明");
w.work();
w.eat();
//不仅可以继承父类还可以实现接口
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 + ",你怎么又在写代码？");
  }
}
let w = new Web("老王");
w.work();
w.eat();
w.coding("写java");