TypeScript基础（四）扩展类型 - 类

? 专栏介绍

TypeScript是一种由微软开发的开源编程语言，它是JavaScript的超集，意味着任何有效的JavaScript代码都是有效的TypeScript代码。TypeScript通过添加静态类型和其他特性来增强JavaScript，使其更适合大型项目和团队开发。

在TypeScript专栏中，我们将深入探讨TypeScript的各个方面，包括语法、类型系统、模块化、面向对象编程等。我们将介绍如何使用TypeScript来构建可维护、可扩展和高效的应用程序。

TypeScript是一种开源的编程语言，它是JavaScript的超集，意味着所有的JavaScript代码都可以在TypeScript中运行。TypeScript添加了静态类型检查和其他一些新特性，以提高代码的可读性、可维护性和可扩展性。

---

引言

TypeScript是一种静态类型的编程语言，它是JavaScript的超集，可以编译成纯JavaScript代码。TypeScript引入了类的概念，使得开发者可以使用面向对象的方式来编写代码。本文将介绍TypeScript的类、继承、访问修饰符和访问器的用法。

类

类是一种模板或蓝图，用于创建具有相同属性和方法的对象。在TypeScript中，可以使用关键字class来定义一个类。类可以包含属性（成员变量）和方法（成员函数）。

下面是一个简单的示例，展示了如何定义一个名为Person的类，并在其中定义了一个属性name和一个方法sayHello()：

class Person {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  sayHello() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person = new Person("Alice");
person.sayHello(); // 输出：Hello, my name is Alice.

在上面的例子中，我们首先使用关键字class定义了一个名为Person的类。然后，在类中定义了一个属性name和一个方法sayHello()。属性和方法都可以通过访问修饰符（如public, private, protected）来控制其可见性。

构造函数是一种特殊类型的方法，在创建对象时被调用。在上面的例子中，我们使用关键字constructor定义了一个构造函数，并在其中接收一个参数并将其赋值给属性name。

继承

继承是一种面向对象编程的重要概念，它允许一个类继承另一个类的属性和方法。在TypeScript中，可以使用关键字extends来实现继承。

下面是一个示例，展示了如何定义一个名为Student的子类，并继承自父类Person：

class Student extends Person {
  grade: number;

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

  study() {
    console.log(`${this.name} is studying in grade ${this.grade}.`);
  }
}

const student = new Student("Bob", 5);
student.sayHello(); // 输出：Hello, my name is Bob.
student.study(); // 输出：Bob is studying in grade 5.

在上面的例子中，我们使用关键字extends将子类Student与父类Person进行了继承。子类可以访问父类中的属性和方法，并且还可以添加自己的属性和方法。

在子类的构造函数中，我们使用关键字super()调用父类的构造函数，并传递相应的参数。这样可以确保父类中定义的属性得到正确地初始化。

访问修饰符

在TypeScript中，类的访问修饰符用于控制类的属性和方法的可访问性。TypeScript提供了三种访问修饰符：public、private和protected。

1. public: 默认的访问修饰符，表示属性或方法可以在类的内部和外部被访问。

class Person {
  public name: string;
  constructor(name: string) {
    this.name = name;
  }
}
const person = new Person("John");
console.log(person.name); // 输出：John

2. private: 表示属性或方法只能在类的内部被访问，外部无法访问。

class Person {
  private name: string;
  constructor(name: string) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}
const person = new Person("John");
console.log(person.getName()); // 输出：John
console.log(person.name); // 错误：属性“name”为私有属性，只能在类“Person”中访问。

3. protected: 表示属性或方法可以在类的内部和子类中被访问，外部无法访问。

class Person {
  protected age: number;
  constructor(age: number) {
    this.age = age;
  }
  getAge() {
    return this.age;
  }
}
class Employee extends Person {
  private salary: number;
  constructor(age: number, salary: number) {
    super(age);
    this.salary = salary;
  }
  getSalary() {
    return this.salary;
  }
}
const employee = new Employee(25, 5000);
console.log(employee.getAge()); // 输出：25
console.log(employee.getSalary()); // 输出：5000
console.log(employee.age); // 错误：属性“age”受保护，只能在类“Person”及其子类中访问。

在上面的示例中，我们定义了一个名为Person的基类，并使用不同的访问修饰符来限制属性和方法的可访问性。然后我们定义了一个名为Employee的子类，并继承了基类。子类可以访问基类中被标记为protected或者public的属性和方法。

通过使用不同的访问修饰符，我们可以控制属性和方法的可见性，从而提高代码的安全性和可维护性。

访问器

TypeScript中的访问器（Accessors）是一种特殊的方法，用于控制对类的属性的访问。访问器由get和set关键字定义，分别用于获取和设置属性的值。通过使用访问器，可以在属性被读取或写入时执行特定的逻辑。

下面是一个示例，展示了如何使用访问器来控制对类的属性的访问：

class Person {
  private _name: string = 'A'

  get name(): string {
    return this._name;
  }

  set name(value: string) {
    if (value.length < 3) {
      throw new Error("Name must be at least 3 characters long.");
    }
    this._name = value;
  }
}

const person = new Person();
person.name = "Alice";
console.log(person.name); // 输出：Alice

person.name = "Bob";
console.log(person.name); // 输出：Bob

person.name = "Tom";
console.log(person.name); // 输出：Tom

person.name = "Li"; // 抛出错误：Name must be at least 3 characters long.

在上面的例子中，我们定义了一个名为Person的类，并在其中定义了一个私有属性_name。然后，我们使用访问器来控制对该属性的访问。

通过定义一个名为name的get方法，我们可以获取属性值。在这个例子中，get方法返回私有属性_name。

通过定义一个名为name的set方法，我们可以设置属性值。在这个例子中，set方法首先检查传入的值的长度是否小于3个字符，如果是，则抛出一个错误。否则，将传入的值赋给私有属性_name。

在使用访问器时，我们可以像访问普通属性一样使用它们。在上面的例子中，我们通过person.name = "Alice"来设置属性值，并通过console.log(person.name)来获取属性值。

通过使用访问器，我们可以在对属性进行读取和写入时执行特定的逻辑。这使得我们可以对属性进行更加精细的控制和验证。

总结

TypeScript的类、继承、访问修饰符和访问器在面向对象编程中起着重要的作用，可以帮助开发者更好地组织和管理代码。

• 类：类是一种模板或蓝图，用于创建具有相同属性和方法的对象。通过定义类，可以将相关的属性和方法封装在一起，提高代码的可读性和可维护性。

• 继承：继承是一种面向对象编程的重要概念，它允许一个类继承另一个类的属性和方法。通过继承，子类可以复用父类中已有的代码，并且还可以添加自己特定的属性和方法。这样可以减少代码重复，并提高代码的可复用性。

• 访问修饰符：访问修饰符用于控制类中成员（属性和方法）的可见性。TypeScript提供了三种访问修饰符：public、private和protected。

  • public：公共成员可以在任何地方被访问，默认情况下所有成员都是公共的。
  • private：私有成员只能在定义它们的类内部被访问。
  • protected：受保护成员可以在定义它们的类及其子类中被访问。

• 访问器：访问器是一种特殊的方法，用于控制对类的属性的访问。通过使用访问器，可以在属性被读取或写入时执行特定的逻辑。访问器由get和set关键字定义，分别用于获取和设置属性的值。通过使用访问器，可以对属性进行更加精细的控制和验证。

---

😶 写在结尾

前端设计模式专栏

设计模式是软件开发中不可或缺的一部分，它们帮助我们解决了许多常见问题，并提供了一种优雅而可靠的方式来构建应用程序。在本专栏中，我们介绍了所有的前端设计模式，包括观察者模式、单例模式、策略模式等等。通过学习这些设计模式，并将其应用于实际项目中，我们可以提高代码的可维护性、可扩展性和可重用性。希望这个专栏能够帮助你在前端开发中更好地应用设计模式，写出高质量的代码。点击订阅前端设计模式专栏

Vue专栏

Vue.js是一款流行的JavaScript框架，用于构建用户界面。它采用了MVVM（Model-View-ViewModel）的架构模式，通过数据驱动和组件化的方式，使开发者能够更轻松地构建交互性强、可复用的Web应用程序。在这个专栏中，我们将深入探讨Vue.js的核心概念、组件开发、状态管理、路由和性能优化等方面的知识。我们将学习如何使用Vue.js构建响应式的用户界面，并探索其强大的生态系统，如Vue Router和Vuex、Pinia。通过学习这些内容，你将能够成为一名熟练的Vue.js开发者，并能够应用这些知识来构建复杂而高效的Web应用程序。点击订阅Vue专栏

JavaScript（ES6）专栏
JavaScript是一种广泛应用于网页开发和后端开发的脚本语言。它具有动态性、灵活性和易学性的特点，是构建现代Web应用程序的重要工具之一。在这个专栏中，我们将深入探讨JavaScript语言的基本语法、DOM操作、事件处理、异步编程以及常见算法和数据结构等内容。此外，我们还将介绍ES6（ECMAScript 2015）及其后续版本中引入的新特性，如箭头函数、模块化、解构赋值等。通过学习这些内容，你将能够成为一名熟练的JavaScript开发者，并能够应用这些知识来构建出高质量和可维护的Web应用程序。点击订阅JavaScript（ES6）专栏