TypeScript技术系列5：类与面向对象编程在本篇文章中，我们将通过实例和详细讲解，带你全面掌握 TypeScrip

站长

2024年10月02日 21:39 · 阅读数 22

前言

TypeScript是JavaScript的超集，扩展了JavaScript的语法，尤其是加入了静态类型的支持。作为一个强类型语言，TypeScript极大地提升了开发效率和代码的可靠性。在TypeScript中，类是构建复杂应用的重要工具，它通过面向对象编程（OOP）理念，使代码结构更加清晰和模块化。

1. 面向对象编程简介

面向对象编程是一种编程范式，通过类和对象的方式对数据和行为进行封装。面向对象编程的主要特点包括以下几点：

封装：将数据和操作封装在对象中，隐藏内部细节，只暴露公共接口。
继承：允许一个类从另一个类继承属性和方法，减少代码重复。
多态：对象可以通过同一接口执行不同的行为。
抽象：隐藏实现细节，只保留接口，使类和接口设计更加简洁。

TypeScript作为JavaScript的扩展语言，不仅支持面向对象编程的所有特性，还通过类型系统和编译时检查进一步强化了这一编程范式。

2. 类的定义

在TypeScript中，类可以定义为对象的蓝图，描述对象的属性和行为。使用class关键字来定义类。每个类可以包含构造函数、属性和方法。下面是一个简单的类定义示例：

class Dog {
  name: string;
  age: number;

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

  bark() {
    console.log(`${this.name} barks!`);
  }

  getAge(): number {
    return this.age;
  }
}

const myDog = new Dog('Rex', 4);
myDog.bark(); // => "Rex barks!"
console.log(myDog.getAge()); // => 4

代码详解：

属性：name和age是类的属性，描述了狗的名字和年龄。它们在实例化时由构造函数赋值。
构造函数：构造函数constructor是创建类实例时执行的代码，用来初始化类的属性。
方法：类中的方法bark和getAge定义了狗的行为。

3. 构造函数详解

构造函数（constructor）是类中的特殊函数，用于在创建类实例时初始化对象的状态。在TypeScript中，构造函数与ES6中的构造函数类似，但TypeScript允许我们为构造函数参数指定类型，这样可以确保传入的参数符合预期的类型。

class Car {
  model: string;
  year: number;

  constructor(model: string, year: number) {
    this.model = model;
    this.year = year;
  }

  displayInfo() {
    console.log(`Model: ${this.model}, Year: ${this.year}`);
  }
}

const myCar = new Car('Toyota', 2020);
myCar.displayInfo(); // => "Model: Toyota, Year: 2020"

在上面的代码中，constructor方法接收两个参数：model和year，并将它们赋值给类的属性。在实例化类时，必须为这些参数提供值，否则TypeScript会抛出错误。

重要提示：

构造函数中的参数类型应该和类属性的类型一致。
如果类中未定义构造函数，TypeScript会自动创建一个默认的空构造函数。

4. 类的继承

继承是OOP的一个重要特性，它允许我们基于现有的类创建新的类，从而复用代码并扩展功能。TypeScript使用extends关键字来实现类的继承。

4.1 基本的继承结构

class Animal {
  name: string;

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

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

class Bird extends Animal {
  fly() {
    console.log(`${this.name} is flying.`);
  }
}

const pigeon = new Bird('Pigeon');
pigeon.move(5); // => "Pigeon moved 5 meters."
pigeon.fly(); // => "Pigeon is flying."

详解：

Animal是一个父类，它包含一个属性name和一个方法move，可以使对象移动。
Bird类继承自Animal，因此它也拥有name属性和move方法，并额外增加了fly方法。
在实例化Bird时，可以像使用Animal类一样，直接使用继承过来的方法。

4.2 super关键字：

在继承结构中，子类可以使用super关键字来调用父类的构造函数或父类的方法。例如：

class Dog extends Animal {
  constructor(name: string) {
    super(name); // 调用父类的构造函数
  }

  bark() {
    console.log(`${this.name} barks!`);
  }
}

const myDog = new Dog('Rex');
myDog.move(10); // => "Rex moved 10 meters."
myDog.bark(); // => "Rex barks!"

super(name)用于调用父类的构造函数，确保父类中的属性name能被正确初始化。
子类可以访问父类的公共属性和方法，扩展了父类的功能。

5. 访问修饰符

TypeScript提供了三种访问修饰符来控制类成员（属性和方法）的可见性：

public：类的成员是公有的，默认修饰符，可以在类的内部、外部以及子类中访问。
private：类的成员是私有的，只能在类的内部访问，外部和子类无法访问。
protected：类的成员是受保护的，可以在类的内部和子类中访问，但在类的外部无法访问。

5.1 public示例：

class Employee {
  public name: string;
  public position: string;

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

  public describe() {
    console.log(`${this.name} works as a ${this.position}.`);
  }
}

const emp = new Employee('Alice', 'Manager');
emp.describe(); // => "Alice works as a Manager."

5.2 private示例：

class BankAccount {
  private balance: number;

  constructor(initialBalance: number) {
    this.balance = initialBalance;
  }

  deposit(amount: number) {
    this.balance += amount;
  }

  getBalance(): number {
    return this.balance;
  }
}

const account = new BankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // => 1500
// console.log(account.balance); // Error: 'balance' is private

balance是私有属性，因此只能在类的内部访问，外部无法直接修改或读取它的值。
通过提供公共方法deposit和getBalance，我们可以安全地操作和读取余额。

5.3 protected示例：

class Person {
  protected name: string;

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

  protected greet() {
    console.log(`Hello, I am ${this.name}.`);
  }
}

class Teacher extends Person {
  constructor(name: string) {
    super(name);
  }

  introduce() {
    this.greet();
    console.log(`I am a teacher.`);
  }
}

const teacher = new Teacher('Mr. Smith');
teacher.introduce(); // => "Hello, I am Mr. Smith." "I am a teacher."
// teacher.greet(); // Error: 'greet' is protected

name和greet方法是受保护的，它们只能在Person类及其子类中访问，而无法在外部直接调用。

6. 静态属性和方法

在TypeScript中，静态属性和方法是直接定义在类本身，而不是类的实例上的。它们通常用于定义与实例无关的工具方法或常量。

静态属性示例：

class MathHelper {
  static PI: number = 3.14159;

  static circleArea(radius: number): number {
    return MathHelper.PI * radius * radius;
  }
}

console.log(MathHelper.PI); // => 3.14159
console.log(MathHelper.circleArea(5)); // => 78.53975

MathHelper.PI是一个静态属性，可以通过类名直接访问，无需创建类的实例。
静态方法circleArea计算圆的面积，也不需要实例化类。

7. 抽象类

抽象类是一种特殊的类，它不能直接实例化，只能被其他类继承。抽象类通常用于定义一组通用的行为，而这些行为的具体实现交由子类完成。

抽象类示例：

abstract class Shape {
  abstract area(): number;

  describe() {
    console.log('This is a shape.');
  }
}

class Square extends Shape {
  sideLength: number;

  constructor(sideLength: number) {
    super();
    this.sideLength = sideLength;
  }

  area(): number {
    return this.sideLength * this.sideLength;
  }
}

const mySquare = new Square(10);
console.log(mySquare.area()); // => 100
mySquare.describe(); // => "This is a shape."

Shape是一个抽象类，定义了抽象方法area，它必须在子类中实现。
Square类继承自Shape，并提供了area方法的具体实现。

8. 接口与类的结合

TypeScript提供了接口（interface）来定义对象的结构和行为。接口不仅可以用于描述对象，还可以用于强制类实现特定的行为。

使用接口来约束类

interface Describable {
  describe(): void;
}

class Book implements Describable {
  title: string;
  author: string;

  constructor(title: string, author: string) {
    this.title = title;
    this.author = author;
  }

  describe() {
    console.log(`"${this.title}" by ${this.author}`);
  }
}

const myBook = new Book('1984', 'George Orwell');
myBook.describe(); // => "1984 by George Orwell"

Describable接口定义了describe方法。
Book类实现了Describable接口，因此必须提供describe方法的实现。

接口与类的结合极大地增强了代码的灵活性和可维护性。通过接口，可以清晰地定义类应该实现的行为，同时保持代码的扩展性。

9. 存取器（Getter和Setter）

存取器是一种用于保护类中属性的机制。通过get和set关键字，可以控制对类属性的访问和赋值，确保数据的完整性和一致性。

存取器示例：

class Employee {
  private _salary: number;

  constructor(salary: number) {
    this._salary = salary;
  }

  get salary(): number {
    return this._salary;
  }

  set salary(newSalary: number) {
    if (newSalary >= 0) {
      this._salary = newSalary;
    } else {
      console.error('Salary must be a positive number.');
    }
  }
}

const emp = new Employee(50000);
console.log(emp.salary); // => 50000
emp.salary = 60000;
console.log(emp.salary); // => 60000
emp.salary = -1000; // => "Salary must be a positive number."

salary属性通过get和set方法进行访问和修改。
当尝试设置负值时，set方法中内置的逻辑会阻止无效赋值。

10. 只读属性

TypeScript提供了readonly关键字来定义只读属性。只读属性只能在初始化时被赋值，之后不能被修改。

readonly示例：

class User {
  readonly id: number;
  username: string;

  constructor(id: number, username: string) {
    this.id = id;
    this.username = username;
  }
}

const user = new User(1, 'Alice');
console.log(user.id); // => 1
// user.id = 2; // Error: Cannot assign to 'id' because it is a read-only property.

id是只读属性，不能在实例化后被修改。
readonly关键字保证了属性的不可变性，使得代码更安全可靠。

11. 类与泛型

TypeScript支持泛型，允许我们创建可以重用的组件。在类中，泛型的使用可以使代码更加灵活，适用于多种类型。

泛型类示例：

class Box<T> {
  content: T;

  constructor(content: T) {
    this.content = content;
  }

  getContent(): T {
    return this.content;
  }
}

const stringBox = new Box<string>('Hello');
console.log(stringBox.getContent()); // => "Hello"

const numberBox = new Box<number>(123);
console.log(numberBox.getContent()); // => 123

Box类是一个泛型类，使用泛型参数T表示内容的类型。
我们可以通过指定不同的类型参数来创建不同类型的Box实例。

总结

在TypeScript中，类是面向对象编程的核心工具。通过类，我们可以定义对象的属性、行为，并通过继承、抽象类和接口实现代码的模块化和可扩展性。TypeScript提供了类型系统、访问修饰符、静态属性、泛型等强大的特性，使得类的使用更加灵活、安全。

掌握这些特性有助于我们在开发过程中编写高质量的、可维护的代码。无论是小型项目还是大型应用，面向对象编程和TypeScript类的结合都能够极大地提升开发效率。

后语

小伙伴们，如果觉得本文对你有些许帮助，点个👍或者➕个关注再走吧^_^ 。另外如果本文章有问题或有不理解的部分，欢迎大家在评论区评论指出，我们一起讨论共勉。

转载自:https://juejin.cn/post/7413694742767255588