揭秘 Typescript 与 JavaScript 的并肩作战：类成员变量可见性和静态成员变量

TypeScript 的类成员变量可见性控制

TypeScript 允许开发人员通过添加不同的修饰符来控制类成员变量在类内部和类外部的访问权限。这些修饰符包括 public、protected 和 private。

• public ：public修饰符表示类成员变量在类内部和类外部都可以访问。这是最常用的修饰符。

• protected ：protected修饰符表示类成员变量在类内部和子类中都可以访问，但在类外部不可以访问。

• private ：private修饰符表示类成员变量只能在类内部访问，在类外部和子类中都无法访问。

静态成员变量

静态成员变量是属于类的变量，而不是属于类的实例的变量。静态成员变量在类定义中声明，并在类实例创建之前就存在。静态成员变量可以使用 static修饰符来声明。

静态成员变量通常用于存储与类本身相关的数据，例如类的名称、版本号等。静态成员变量也可以用于存储与类相关的函数，例如一个计算类实例数量的函数。

示例

以下是一个 TypeScript 代码示例，展示了如何使用 public、protected 和 private 修饰符来控制类成员变量的可见性，以及如何使用 static 来定义静态成员变量：

class MyClass {
  public name: string; // public 类成员变量
  protected age: number; // protected 类成员变量
  private salary: number; // private 类成员变量

  static className: string = "MyClass"; // 静态成员变量

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

  public getName(): string {
    return this.name;
  }

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

  private getSalary(): number {
    return this.salary;
  }

  static getClassName(): string {
    return MyClass.className;
  }
}

const myClassInstance = new MyClass("John Doe", 30, 10000);

console.log(myClassInstance.name); // 输出: John Doe
console.log(myClassInstance.age); // 错误: 'age' 是受保护的属性
console.log(myClassInstance.salary); // 错误: 'salary' 是私有属性

console.log(MyClass.className); // 输出: MyClass
console.log(MyClass.getClassName()); // 输出: MyClass

在上面的示例中，MyClass 类定义了三个类成员变量：name、age 和 salary。name 是一个 public 变量，因此可以在类内部和类外部访问。age 是一个 protected 变量，因此只能在类内部和子类中访问。salary 是一个 private 变量，因此只能在类内部访问。

MyClass 类还定义了一个静态成员变量 className，该变量存储类的名称。静态成员变量可以使用 static 关键字来声明。

在示例的最后，我们创建了一个 MyClass 类的实例 myClassInstance。然后，我们使用点运算符来访问类的成员变量。我们可以访问 public 变量 name，但无法访问 protected 变量 age 和 private 变量 salary。我们也可以使用类名 MyClass 来访问静态成员变量 className。