超越ES6的惊艳：TypeScript Class（上）

前端

2024-01-08 08:19:35

TypeScript 类：前端开发的基石

在前端开发领域，TypeScript 是一款炙手可热的工具，而类则是其一大特色。类是面向对象编程的基石，让我们能够定义一个蓝图，并以此创建对象。掌握了 TypeScript 中的类，你将解锁构建更强大、更灵活的应用程序的能力。

TypeScript 中的类与 JavaScript 中的类

TypeScript 中的类与 JavaScript 中的类在几个方面有所不同：

构造函数： TypeScript 中的类必须拥有构造函数，而 JavaScript 中的类则不是必须的。
属性和方法： TypeScript 中的类可以拥有属性（成员变量）和方法（成员函数），而 JavaScript 中的类则没有属性和方法的概念。
继承： TypeScript 中的类可以继承其他类，而 JavaScript 中的类不能直接继承其他类。

创建类

用 TypeScript 创建类十分简单，语法如下：

class MyClass {
  // 属性
  public myProperty: string;

  // 方法
  public myMethod(): void {
    console.log("Hello, world!");
  }
}

这个示例定义了一个名为 MyClass 的类，它拥有一个字符串属性 myProperty 和一个输出 "Hello, world!" 到控制台的方法 myMethod。

创建对象实例

要创建类的新实例，可以使用 new

const myObject = new MyClass();

这将创建一个名为 myObject 的 MyClass 类的对象实例。

类继承

TypeScript 中的类支持继承，允许子类从父类继承属性和方法：

class ChildClass extends ParentClass {
  // 子类属性
  public childProperty: string;

  // 子类方法
  public childMethod(): void {
    console.log("Hello, child!");
  }
}

这个示例定义了一个名为 ChildClass 的类，它继承了 ParentClass 类。ChildClass 拥有一个额外的属性 childProperty 和一个方法 childMethod。

类的访问控制

TypeScript 中的类支持访问控制，控制着属性和方法可以被哪些对象访问。有三种访问控制修饰符：

public： 表示属性或方法可以被任何对象访问。
protected： 表示属性或方法只能被类本身及其子类访问。
private： 表示属性或方法只能被类本身访问。

类的静态成员

TypeScript 中的类支持静态成员，即不属于特定对象而是属于整个类的属性或方法：

class MyClass {
  // 静态属性
  public static myStaticProperty: string;

  // 静态方法
  public static myStaticMethod(): void {
    console.log("Hello, static!");
  }
}