Skip to content
Created: October 6, 2020

interface ​

  • On the one hand, the interface can be expressed as an abstraction of behavior in object-oriented programming, and on the other hand, it can be used to describe the shape of the object.
  • An interface abstracts the properties and methods common to some classes and can be used to constrain classes that implement this interface.
  • A class can inherit from another class and implement multiple interfaces
  • Interfaces, like plug-ins, are used to enhance classes, while abstract classes are the abstract concept of concrete classes.
  • A class can implement multiple interfaces, and an interface can also be implemented by multiple classes, but a class can have multiple subclasses, but can only have one parent class.

1. interface ​

  • In the interface, you can separate each item with a semicolon or comma, or you can add nothing at all.

1.1 Shape of object ​

ts
//接口可以用来描述`对象的形状`,少属性或者多属性都会报错
interface Speakable {
  speak(): void;
  name?: string; //?表示可选属性
}

let speakman: Speakable = {
  speak() {}, //少属性会报错
  name,
  age, //多属性也会报错
};

1.2 Behavioral abstraction ​

ts
//接口可以在面向对象编程中表示为行为的抽象
interface Speakable {
  speak(): void;
}
interface Eatable {
  eat(): void;
}
//一个类可以实现多个接口
class Person implements Speakable, Eatable {
  speak() {
    console.log("Person说话");
  }
  eat() {}
}
class TangDuck implements Speakable {
  speak() {
    console.log("TangDuck说话");
  }
  eat() {}
}

1.3 Arbitrary attributes ​

ts
//无法预先知道有哪些新的属性的时候,可以使用 `[propName:string]:any`,propName名字是任意的
interface Person {
  readonly id: number;
  name: string;
  [propName: string]: any;
}

let p1 = {
  id: 1,
  name: "hello ",
  age: 10,
};

2. Interface inheritance ​

  • An interface can inherit from another interface
ts
interface Speakable {
  speak(): void;
}
interface SpeakChinese extends Speakable {
  speakChinese(): void;
}
class Person implements SpeakChinese {
  speak() {
    console.log("Person");
  }
  speakChinese() {
    console.log("speakChinese");
  }
}

3. readonly ​

  • Using readonly to define read-only properties can prevent the object's value from being overwritten due to factors such as multi-person collaboration or complex projects.
ts
interface Person {
  readonly id: number;
  name: string;
}
let tom: Person = {
  id: 1,
  name: "hello ",
};
tom.id = 1;

4. Function type interface ​

  • Constrain the parameters and return values passed in by the method
ts
interface discount {
  (price: number): number;
}
let cost: discount = function (price: number): number {
  return price * 0.8;
};

5. Indexable interface ​

  • Apply constraints to arrays and objects
  • userInterface indicates that the type of index is number, then the type of value must be string
  • UserInterface2 means: the type of index is string, then the type of value must be string
ts
interface UserInterface {
  [index: number]: string;
}
let arr: UserInterface = ["hahaha 1", "hahaha 2"];
console.log(arr);

interface UserInterface2 {
  [index: string]: string;
}
let obj: UserInterface2 = { name: "hello " };

6. Class interface ​

  • Constraints on classes
ts
interface Speakable {
  name: string;
  speak(words: string): void;
}
class Dog implements Speakable {
  name!: string;
  speak(words: string) {
    console.log(words);
  }
}
let dog = new Dog();
dog.speak("汪汪汪");

7. Constructor type ​

  • In TypeScript, we can use interface to describe a class
  • At the same time, you can also use the special new() keyword in the interface to describe the constructor type of the class.
ts
class Animal {
  constructor(public name: string) {}
}
//不加new是修饰函数的,加new是修饰类的
interface WithNameClass {
  new (name: string): Animal;
}
function createAnimal(clazz: WithNameClass, name: string) {
  return new clazz(name);
}
let a = createAnimal(Animal, "hello ");
console.log(a.name);

8. Abstract class vs interface ​

  • Public attributes or methods between different classes can be abstracted into an interface (Interfaces)
  • Abstract classes are base classes for other classes to inherit from, and abstract classes are not allowed to be instantiated.Abstract methods in abstract classes must be implemented in subclasses
  • The essence of an abstract class is a class that cannot be instantiated, which can implement methods and initialize attributes, while the interface can only be used for description, neither providing method implementation nor initializing attributes.
  • A class can inherit a class or abstract class, but can implement multiple interfaces
  • Abstract classes can also implement interfaces
ts
abstract class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  abstract speak(): void;
}
interface Flying {
  fly(): void;
}
class Duck extends Animal implements Flying {
  speak() {
    console.log("汪汪汪");
  }
  fly() {
    console.log("我会飞");
  }
}
let duck = new Duck("hello ");
duck.speak();
duck.fly();