接口 - 7

目录

• 接口
  • 1. 接口
  • 2 接口的继承
  • 3 接口的 readonly
  • 4 接口还可以用来约束函数
  • 5 可索引接口
  • 6 类的接口
  • 7 约束构造函数使用 new 来约束

---

学TS核心，要学会两个重点：1. 接口 2. 泛型

回到顶部

接口

• 接口一方面可以在面向对象编程中表现为行为的抽象，另外可以用来描述对象的形状
• 接口就是把一些类中共有得属性和方法抽象出来，可以用来约束实现此接口的类
• 一个类可以继承另一个类并实现多个接口
• 接口就像插件一样是用来增强类的，而抽象类是具体类的抽象概念
• 一个类可以实现多个接口，一个接口也可以被多个类实现，但一个类可以有多个子类，但只能有一个父类。

1. 接口

• interface中可以用分号或者逗号分割每一项，也可以什么都不加

  interface Point {
    x: number; // 这里用 ; , 或者什么都不加，都是可以的
    y: number
    z: number,
  }

1.1 接口描述了对象的形状

1.2 接口表述了行为的抽象

1.3 任意属性

用 [xxx: string]来表示任意属性

namespace a {
  interface PlainObject {
    [propName: string]: number;
  }
  let obj: PlainObject = {
    x: 1,
    y: 2,
    z: 3
  }
}

2 接口的继承

//  接口的继承
namespace b {
  interface Speakable {
    speak(): void;
  }
  interface SpeakeChinese extends Speakable {
    SpeakeChinese(): void
  }
  class Person implements SpeakeChinese {
    speak(){};
    SpeakeChinese(){};
  }
}

3 接口的 readonly

interface Circle {
  readonly PI: number;
  radius: number
}

let circle: Circle = {
  PI: 3.1415926,
  radius: 10
}
// circle.PI = 3.15; // 会报错，提示 PI 是一个只读属性

4 接口还可以用来约束函数

interface Discount {
  (price: number): number // 描述一个函数的参数和返回值都必须是数值类型的
}

let cost: Discount = (price: number): number => {
  return price * 0.8
}

5 可索引接口

是用来对数组和对象进行约束的

interface UserInterface {
  [index: number]: string // 这个对象的 key 是数字，value 是字符串
}
let arr: UserInterface = ["1", "2", "3"];
let obj: UserInterface = {1: "1", 2: "2"};

6 类的接口

可以用接口来约束类

  interface Speakable {
    name: string
    speak(words: string): void
  }
  interface Speakable2 {
    age: number
  }
  class Dog implements Speakable, Speakable2  {
    name: string = "";
    age: number = 0
    speak() { }
  }

7 约束构造函数使用 new 来约束

class Animal {
  constructor(public name: string) {

  }
}
interface WithNameClass {
  new(name: string): Animal
}
function createAnimal(clazz: WithNameClass, name: string) {
  return new clazz(name)
}
let cat = createAnimal(Animal, "ruhua");