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();