Typescript接口、类、extends、implements用法区别和介绍

前端

2023-09-15 02:25:38

接口和类：TypeScript 中对象类型详解

在 TypeScript 中，接口和类都是用于对象类型的强大工具。它们虽然有着相似的目的，但存在着一些关键差异，了解这些差异对于编写清晰、可维护的代码至关重要。

接口

定义：

接口定义了对象应该具有的属性和方法，但没有提供其具体实现。它就像一个合同，指定了对象必须遵循的规则。接口可以被多个类实现，这意味着多个类可以具有相同属性和方法的集合。

用途：

提高代码的可读性： 接口了对象应具备的特征，使代码更易于理解和维护。
强制一致性： 通过接口，可以确保实现该接口的所有类都具有相同的基本属性和行为。
促进代码重用： 多个类可以实现同一个接口，从而减少了代码重复和提高了代码重用性。

示例：

interface Person {
  name: string;
  age: number;
  greet(): void;
}

实现：

类可以通过 implements 实现接口。

class Employee implements Person {
  name: string;
  age: number;

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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

类

定义：

类是 TypeScript 中创建对象的蓝图。它包含属性和方法的声明，以及其具体实现。类可以继承自其他类，这允许子类继承父类的属性和方法，并提供自己的实现。

用途：

创建对象： 类可用于创建具有特定属性和行为的对象。
组织代码： 类可以将相关代码组织在一起，使代码更易于管理。
促进代码重用： 通过继承，子类可以重用父类的代码，减少重复并提高代码重用性。

示例：

class Animal {
  name: string;
  age: number;

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

  eat() {
    console.log('The animal is eating.');
  }
}

继承和多态

继承：

继承允许子类从父类继承属性和方法。子类可以覆盖父类的方法，以提供自己的实现。

多态：

多态允许使用父类引用其子类对象，从而可以调用子类覆盖的方法。这允许在运行时根据具体类型执行不同的操作。

示例：

// 定义父类
class Shape {
  area() {
    console.log('Shape area');
  }
}

// 定义子类
class Rectangle extends Shape {
  width: number;
  height: number;

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

  area() {
    console.log(`Rectangle area: ${this.width * this.height}`);
  }
}

// 使用父类引用子类对象
const shape: Shape = new Rectangle(4, 5);
shape.area(); // 输出：Rectangle area: 20