TypeScript Access Modifiers Tutorial

Access modifiers

Access modifiers determine if we can access properties or methods outside a class.

In TypeScript we have 3 access modifiers.

• public
• private
• protected

The public access modifier

Public variables and methods can be accessed outside their class.

To set a method or property to public, we use the public keyword in front of its declaration.

class ClassName {
  public property: type

  public method(): returnType {}
}

To demonstrate, we’ll make the name property public in the example from the previous lesson, then go outside the class and change it to something else.

class Employee {
  readonly id: number
  public name: string
  nickname?: string

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

  walk(): void {
    console.log('Walking...')
  }
}

let emp1 = new Employee(0, 'John')
emp1.name = 'Jack'

By default, the members of a class are all public, so we don’t need to explicitly set it.

If we remove the public keyword, we can still change the property without the compiler raising an error.

class Employee {
  readonly id: number
  name: string
  nickname?: string

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

  walk(): void {
    console.log('Walking...')
  }
}

let emp1 = new Employee(0, 'John')
emp1.name = 'Jack'

The private access modifier

If we set a member to private, it can only be accessed from within the class. The syntax looks the same except for that we use the private keyword.

class ClassName {
  private property: type

  private method(): returnType {}
}

As an example, if set our name property to private , we’ll get the following compilation error.

The name property is private and only accessible within the Employee class.

So we’ll delete the line that tries to change the name.

class Employee {
  readonly id: number
  private name: string
  nickname?: string

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

  walk(): void {
    console.log('Walking...')
  }
}

let emp1 = new Employee(0, 'John')

We can still access the name inside the class, so let’s add it to the walk() method.

And we’ll invoke the method to see it in the console log.

class Employee {
  readonly id: number
  private name: string
  nickname?: string

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

  walk(): void {
    console.log(this.name + 'is walking...')
  }
}

let emp1 = new Employee(0, 'John')
emp1.walk()

Now, as a convention, we add an _ (underscore) in front of private members so let’s add it to our example.

tip If you’re working in VSCode, you can click on the property name and press F2 to rename all instances of it in the current file.

class Employee {
  readonly id: number
  private _name: string
  nickname?: string

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

  walk(): void {
    console.log(this._name + 'is walking...')
  }
}

let emp1 = new Employee(0, 'John')
emp1.walk()

The protected access modifier

Our third modifier is the protected modifier.

It’s like private, so members can be accessed inside the class, but also any class that inherits from it.

We’ll cover the protected modifier when we discuss inheritance . For now, let’s move on to parameter properties.

Summary: Points to remember

• If we want our class members to be accessible outside of a class, we can use the public modifier.
  • By default, all class members are public so we don’t need to explicitly add the keyword.
• If we want our class memebers to only be accessible inside the class, we can use the private modifier.
• If we want our class memebers to only be accessible inside the class and any classes that inherit from it, we can use the protected modifier.