七步学会TypeScript - 第四步-类和继承

最新推荐文章于 2024-05-26 00:30:00 发布

田雪Teresa

最新推荐文章于 2024-05-26 00:30:00 发布

阅读量166

点赞数 1

分类专栏： typescript学习文章标签： typescript html5

本文链接：https://blog.csdn.net/weixin_43805502/article/details/132185377

版权

typescript学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

在TypeScript中

类是一种面向对象编程的基本构建块，它允许你创建具有属性和方法的复杂数据结构。
继承是面向对象编程中的一个重要概念，它允许你基于现有类创建新的类，并在新类中重用和扩展现有类的功能。

下面让我们逐步深入了解这些内容。

1. 创建类和成员函数：

在 TypeScript 中，你可以使用以下方式来创建类，并定义其成员函数：

class Animal {
  name: string;

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

  makeSound() {
    console.log("Animal makes a sound");
  }
}

const cat = new Animal("Cat");
console.log(cat.name); // 输出："Cat"
cat.makeSound(); // 输出："Animal makes a sound"

在上述示例中，我们创建了一个 Animal 类，它有一个构造函数和一个名为 makeSound 的成员函数。通过 new 关键字，我们创建了一个 cat 实例，并调用了它的方法和属性。

2. 继承的概念：

继承允许你创建一个新的类，基于已存在的类（称为基类或父类），并继承它的属性和方法。你可以在新类中添加新的属性和方法，或者覆盖基类的方法。

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

  makeSound() {
    console.log("Dog barks");
  }
}

const dog = new Dog("Buddy");
console.log(dog.name); // 输出："Buddy"
dog.makeSound(); // 输出："Dog barks"

在这个示例中，我们创建了一个 Dog 类，它继承自 Animal 类。我们使用 super(name) 调用了父类的构造函数，以便设置 name 属性。我们还覆盖了基类的 makeSound 方法。

通过继承，你可以避免重复编写相似的代码，提高代码的重用性和可维护性。

3. 访问修饰符：

在 TypeScript 中，你可以使用访问修饰符来控制成员的可见性和访问权限。常用的访问修饰符有三种：public、private 和 protected。

public：默认的修饰符，成员在类内外都可以访问。
private：成员只能在类的内部访问。
protected：成员可以在类内部以及继承的子类中访问。

class Student {
  private id: number;
  protected name: string;

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

  displayInfo() {
    console.log(`Student ID: ${this.id}, Name: ${this.name}`);
  }
}

通过访问修饰符，你可以控制成员的访问权限，增强代码的封装性和安全性。

下面举几个例子详细说一下访问修饰符

当涉及到访问修饰符时，它们会影响成员（属性和方法）在类内部和类外部的可见性和访问权限。我将为你提供更详细的例子来解释 public、private 和 protected 修饰符的不同用法。

1. public 访问修饰符：
public 是默认的访问修饰符，表示成员可以在类内部和类外部都可以访问。

class Car {
  public make: string;

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

  start() {
    console.log(`Starting the ${this.make} car.`);
  }
}

const myCar = new Car("Toyota");
console.log(myCar.make); // 可以访问
myCar.start(); // 可以调用

在这个例子中，make 属性和 start 方法都使用了默认的 public 修饰符。它们可以在类内外被访问和调用。

2. private 访问修饰符：
private 修饰符表示成员只能在类的内部访问，外部无法访问。

class BankAccount {
  private balance: number;

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

  getBalance() {
    return this.balance; // 可以在类内部访问
  }

  withdraw(amount: number) {
    if (amount <= this.balance) {
      this.balance -= amount; // 可以在类内部修改
    } else {
      console.log("Insufficient balance.");
    }
  }
}

const myAccount = new BankAccount(1000);
console.log(myAccount.getBalance()); // 可以访问
myAccount.withdraw(200); // 可以调用
// console.log(myAccount.balance); // 无法访问，会报错

在这个例子中，balance 属性被声明为 private，所以只能在类的内部访问和修改。外部无法直接访问 balance 属性。

3. protected 访问修饰符：
protected 修饰符表示成员可以在类的内部和继承的子类中访问，但是外部无法访问。

class Person {
  protected name: string;

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

  displayInfo() {
    console.log(`Name: ${this.name}`);
  }
}

class Employee extends Person {
  private employeeId: number;

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

  showEmployeeInfo() {
    console.log(`Employee ID: ${this.employeeId}`);
    this.displayInfo(); // 可以访问基类的 protected 方法
  }
}

const employee = new Employee("Alice", 123);
employee.showEmployeeInfo(); // 可以调用
// console.log(employee.name); // 无法访问，会报错