04、TypeScript 中的接口

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

　　1.属性类型接口

// 1.属性类接口    对 json 的约束
// ts 中定义方法
function pr(): void {
  console.log('11');
}

pr();

// ts 中定义方法传入参数
function pr1(label: string): void {
  console.log(label);
}

pr1('zhangning');

// ts 中自定义方法传入参数对象 json 进行约束
function pr2(labelInfo: { label: string }): void {
  console.log(labelInfo.label);
}

pr2({ label: 'zhangning' });

// 对批量方法传入参数进行约束
// 接口：行为和动作的规范，对批量方法进行约束
// 定义 FullName 接口
interface FullName {
  firstName: string;
  secondName: string;
}

function prn(full: FullName) {// 实现 FullName 接口
  console.log(full.firstName + full.secondName);
}

// prn('zhangning');// 错误的写法
// prn({ firstName: 'zhang', secondName: 'ning', age: 24 });// 报错，有 age
// 定义一个对象,对象中只要包含 接口 中的属性就可以了，尽量单独定义对象
let objn = { age: 24, firstName: 'zhang', secondName: 'ning' };
prn(objn);

// 接口对批量方法进行约束
interface Info {
  firstName: string;
  secondName: string;
}

function prn1(full: Info) {// 实现 FullName 接口
  console.log(full.firstName + full.secondName);
}

function prn2(info: FullName) {
  console.log(info.firstName + info.secondName);
}

// prn('zhangning');// 错误的写法
// prn({ firstName: 'zhang', secondName: 'ning', age: 24 });// 报错，有 age
// 定义一个对象,对象中只要包含 接口 中的属性就可以了，尽量单独定义对象
let objinfo = { age: 24, firstName: 'zhang', secondName: 'ning' };
prn1(objinfo);
prn2({ firstName: 'zhang', secondName: 'ning187' });

// 接口可选属性
interface Fullname2 {
  firstName: string;
  secondName?: string;// ? 表示可传可不传
}

function getName(name: Fullname2) {
  console.log(name);
}

getName({ firstName: 'zhang' });// 不传递 secondName 也不会报错

// 通过接口模拟一个 ajax

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

// 原生 js 封装 ajax
function testajax(config: Configajax) {
  let 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('111');
      if (config.dataType == 'JSON') {
        JSON.parse(xhr.responseText);
      } else {
        console.log(xhr.responseText);
      }
    }
  };
}

testajax({
  type: 'get',
  url: 'http://',
  dataType: 'JSON',
  data: 'data'
});

 

　　2.函数类型接口

// 2.函数类型接口：对方法传入的参数，以及返回值进行约束
// 实现一个加密的函数类型接口
interface encrypt {
  (key: string, val: string): string;
}

// 实现这个方法的时候，要符合接口参数的规范
var md5: encrypt = function(key: string, val: string): string {
  return key + val;
};
console.log(md5('zhang', 'ning'));// zhangning

var sha11: encrypt = function(key: string, val: string): string {
  return key + '----' + val;
};

 

　　3.可索引接口

// 3.可索引接口：数组的约束（不常用）
// 定义数组的方式
let arr1: Array<string> = ['aaa', 'ddd'];
let arr2: number[] = [111, 222];

// 定义对数组约束的接口
interface UserArr {
  [index: number]: string
}

var arr3: UserArr = ['123', '32232'];

// 对对象的约束
interface UserObj {
  [index: string]: string | number
}

var arr6: UserObj = { name: 'zhangning', age: 24 };

4.类类型接口

// 4.类类型接口：对类的约束 和 抽象类有点相似
interface Animal {
  name: string;

  eat(str: string): void;
}

// 这里的实现方式有点不同，通过 implements 实现接口
class Dog implements Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  eat(foot: string) {
    console.log(foot);
  }
}

// 用法和之前相同
var d = new Dog('小黑');
d.eat('吃骨头');

5.接口的扩展，接口继承接口

// 5.接口的扩展，接口可以继承接口
interface People {
  eat(): void;
}

interface Man extends People {
  work(): void;
}

class Web implements Man {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  eat() {// 因为 Man 继承了 People 接口，所以 eat() 方法也要实现
    console.log('吃馒头');
  }

  work() {
    console.log('程序猿');
  }
}

var w = new Web('zhangning');
w.eat();
w.work();

// 定义一个程序猿类
class Programmer {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  coding(code: string) {
    console.log(this.name + code);
  }
}

class youngster extends Programmer implements People {
  constructor(name: string) {
    super(name);
  }

  eat() {
    console.log('吃饭');
  }

  work() {
    console.log('写代码');
  }
}