TypeScript 中的属性修饰符

在TypeScript中，我们可以使用属性修饰符来描述一个类的属性的访问级别。属性修饰符有三种类型：public、private和protected。这三种访问级别有不同的访问范围和使用限制。

public属性修饰符

public属性修饰符是默认的修饰符，如果没有指定修饰符，那么该属性就会被默认设置为public。public修饰符表示该属性可以在任何地方被访问，包括类的内部和外部。

// javascriptcn.com 代码示例
class MyClass {
  public property: string;

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

const myClassInstance = new MyClass("value");
console.log(myClassInstance.property); // "value"

上面的代码中，property属性被设置为public修饰符，因此可以在类外使用。我们创建了一个MyClass实例，并打印了它的property属性的值，结果输出了"value"。

private属性修饰符

private属性修饰符表示该属性只能在类的内部被访问。外部无法访问该属性，包括该类的实例和继承该类的子类。

// javascriptcn.com 代码示例
class MyClass {
  private property: string;

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

  public getProperty() {
    return this.property;
  }
}

const myClassInstance = new MyClass("value");
console.log(myClassInstance.property); // Error
console.log(myClassInstance.getProperty()); // "value"

上面的代码中，property属性被设置为private修饰符，因此无法在类外使用。我们在MyClass类中添加了一个public方法getProperty()来获取属性值。我们创建了一个MyClass实例，并尝试打印它的property属性，结果会抛出错误。我们调用实例的getProperty()方法，输出了"value"。

protected属性修饰符

protected属性修饰符表示该属性可以在基类或者继承自基类的类的内部被访问，但是不能在其他类中被访问。

// javascriptcn.com 代码示例
class MyBaseClass {
  protected property: string;

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

class MyDerivedClass extends MyBaseClass {
  public getProperty() {
    return this.property;
  }
}

const myDerivedClassInstance = new MyDerivedClass("value");
console.log(myDerivedClassInstance.property); // Error
console.log(myDerivedClassInstance.getProperty()); // "value"

上面的代码中，我们创建了一个基类MyBaseClass，属性property被设置为protected修饰符。我们创建了一个继承自基类的子类MyDerivedClass，并添加了一个public方法getProperty()来获取属性值。我们创建了一个MyDerivedClass实例，并尝试打印它的property属性，结果会抛出错误。我们调用实例的getProperty()方法，输出了"value"。

总结

属性修饰符是TypeScript中的一个重要特性，可以帮助开发者更好地管理类的属性访问级别。使用public、private和protected修饰符，可以让属性的访问范围更加清晰明确，避免访问权限的误用和泄漏。在使用属性修饰符时，应该根据实际需求选择适合的修饰符，并尽量遵循访问级别的限制，以保证应用的稳定和安全。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c69407d4982a6eb5efb85