TypeScript学习笔记系列三(接口)

思维导图

用处：函数、类、构造器

函数：interface

interface serarchFunction {
  (keyword: string, page?: number): string[];
}

// 返回值必须一致；参数可以不写，写了必须对应上
const search: serarchFunction = function (keyword: string, page: number) {
  return ['a', 'b', 'c'];
}

类：interface

interface serialization {
  toJSON(): object;
  fromJSON(json: object): void;

}

function isSize(json: any): json is { width: number, height: number } {
  if (typeof json !== 'object') {
    throw new Error('must be a object');
  } else {
    if (typeof json.width !== 'number' || typeof json.height !== 'number') {
      throw new Error('width and height must be number');
    }
  }

  return true;
}

class Box implements serialization {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    this.width = width;
    this.height = height;
  }

  toJSON() {
    return { width: this.width, height: this.height };
  }

  fromJSON(json: object): void {
    if (isSize(json)) {
      this.width = json.width;
      this.height = json.height;
    }
  }
}

function serialize(obj: serialization) {
  let json = obj.toJSON();
  let str = obj.fromJSON(json);

  console.log(str);
}

let box = new Box(66, 88);

serialize(box);

abstract class SerarchFunction {
  abstract toJSON(): object;
  abstract fromJSON(json: object): void;
}

function isSize(json: any): json is { width: number, height: number } {
  if (typeof json !== 'object') {
    throw new Error('must be a object');
  } else {
    if (typeof json.width !== 'number' || typeof json.height !== 'number') {
      throw new Error('width and height must be number');
    }
  }

  return true;
}

class Box extends SerarchFunction {
  width: number;
  height: number;

  constructor(width: number, height: number) {
    super();
    this.width = width;
    this.height = height;
  }

  toJSON() {
    return { width: this.width, height: this.height };
  }

  fromJSON(json: object): void {
    if (isSize(json)) {
      this.width = json.width;
      this.height = json.height;
    }
  }
}

function serialize(obj: SerarchFunction) {
  let json = obj.toJSON();
  let str = obj.fromJSON(json);

  console.log(str);
}

let box = new Box(66, 88);

serialize(box);

继承 VS interface

// class base1 {}

// class base2 {}

// class Child extends base1, base2 { }


interface inter1 { }

interface inter2 { }

class Child implements inter1, inter2 { }

继承：重用代码、完备的层级关系 接口：灵活

构造器：interface

// // 错误示例
// interface Boxinterface {
//   new(a: string);

//   show(a: number): void;
// }

// class Box implements Boxinterface {
//   constructor(a: string) { }

//   show(a: number) {

//   }
// }

// 正确示例
interface BoxConstructorInterface {
  new(a: string);
}

interface BoxInterface {
  show(a: number): void;
}

const Box: BoxConstructorInterface = class implements BoxInterface {
  private a: string;

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

  show(a: number) {
    alert(this.a + a);
  }
}

接口的继承

interface Box {
  area(): number;
  length(): number;
}

interface Box2 extends Box {
  volumn(): number;
}

class A implements Box2 {
  area() {
    return 11;
  }

  length() {
    return 22;
  }

  volumn() {
    return 33;
  }
}

class Box {
  private width: number;
}

interface BoxInter extends Box {
  user: string;
}

class A extends Box implements BoxInter {
  user: string;
}