深入理解 TypeScript 中的类、构造函数和接口

2023-12-09 04:17:08

在现代软件开发中，TypeScript 已成为构建健壮、可维护应用程序的首选语言之一。其中，类、构造函数和接口是 TypeScript 中至关重要的概念，它们共同构成了面向对象编程的基础。本文旨在深入探讨这些概念，阐明它们之间的关系并提供实际示例，帮助您充分利用 TypeScript 的面向对象特性。

理解类

类是 TypeScript 中创建对象蓝图的机制。它定义了对象的数据结构和行为。类由属性和方法组成，分别表示对象的状态和操作。

类声明

class MyClass {
  name: string; // 属性
  age: number; // 属性
  greet(): void { // 方法
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

在这个示例中，我们定义了一个名为 MyClass 的类，其中包含两个属性 name 和 age 以及一个方法 greet()。

创建对象实例

要创建 MyClass 的实例，我们使用 new 运算符。

let person1 = new MyClass();
person1.name = "John";
person1.age = 30;
person1.greet(); // 输出: "Hello, my name is John and I'm 30 years old."

构造函数

构造函数是一种特殊方法，它在创建对象时被调用，用来初始化对象的状态。它总是在 new 运算符之后立即被调用。

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

let person2 = new MyClass("Jane", 25);
console.log(person2.name); // 输出: "Jane"

在这个示例中，MyClass 的构造函数接受两个参数 name 和 age，并使用 this 将它们分配给对象属性。

接口

接口是一种定义对象形状的约定，即它指定了对象必须拥有的属性和方法，但不提供其实现。接口用于强制类型检查，确保对象符合预期的结构。

interface Person {
  name: string;
  age: number;
}

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

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

在这个示例中，我们定义了一个 Person 接口，它强制要求具有 name 和 age 属性的对象。MyClass 通过实现 Person 接口来确保它具有这些属性。

类、构造函数和接口之间的关系

类提供对象蓝图，定义其数据和行为。
构造函数在对象创建时初始化对象状态。
接口定义对象形状，确保对象符合特定的结构。

何时使用

类：当您需要创建具有相似结构和行为的对象时，请使用类。
构造函数： 当您需要在创建对象时对其进行初始化时，请使用构造函数。
接口： 当您需要强制执行对象形状或定义契约时，请使用接口。

实际示例

购物车类

class ShoppingCart {
  items: Array<string>;
  total: number;

  constructor() {
    this.items = [];
    this.total = 0;
  }

  addItem(item: string, price: number) {
    this.items.push(item);
    this.total += price;
  }
}

这个示例类表示一个购物车对象，它跟踪项目列表和总价。

接口与测试

我们可以使用接口来确保测试代码中的对象具有正确的形状。

interface ShoppingCartTester {
  testAddItem(): void;
}

class ShoppingCartTesterImpl implements ShoppingCartTester {
  private cart: ShoppingCart;

  testAddItem() {
    this.cart.addItem("Apple", 1.5);
    assert.strictEqual(this.cart.items.length, 1);
    assert.strictEqual(this.cart.total, 1.5);
  }
}