Що робить модифікатор доступу protected?

TypeScriptJunior~1 хв читання

Модифікатор protected у TypeScript - це "проміжний" рівень доступу між private і public. Він робить властивість або метод доступними всередині класу і в усіх його нащадках, але недоступними ззовні (через екземпляр класу).

1. Синтаксис і суть

javascript

class Animal {
  protected type: string;

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

  protected move() {
    console.log(`${this.type} is moving`);
  }
}

class Dog extends Animal {
  bark() {
    console.log(`${this.type} says: Woof!`);
    this.move(); // можна викликати protected метод
  }
}

const dog = new Dog("Dog");
dog.bark();  // ok
dog.type;    // Помилка - protected
dog.move();  // Помилка - protected

Тут:

type та move() видимі всередині Animal та Dog,
але недоступні ззовні через екземпляр.

2. Правила видимості

Де звертаємось	Доступ до `protected`
Всередині самого класу	так
У класі-нащадку	так
Ззовні (через об'єкт)	ні

3. Приклад: "protected" використовується для базової логіки

javascript

class Vehicle {
  protected speed: number = 0;

  protected accelerate(amount: number) {
    this.speed += amount;
  }

  public showSpeed() {
    console.log(`Speed: ${this.speed}`);
  }
}

class Car extends Vehicle {
  drive() {
    this.accelerate(50); // доступно
    this.showSpeed();
  }
}

const car = new Car();
car.drive();       // Speed: 50
car.accelerate(50); // Помилка - protected

accelerate() можна використовувати лише в класах, що успадковують Vehicle.

4. Відмінність від `private`

Модифікатор	Доступ у класі	Доступ у нащадку	Доступ ззовні
`public`	так	так	так
`protected`	так	так	ні
`private`	так	ні	ні

5. Комбінація `protected` + `readonly`

javascript

class User {
  protected readonly role: string;

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

class Admin extends User {
  printRole() {
    console.log(this.role); // можна читати
    // this.role = "user";  // не можна змінити - readonly
  }
}

Можна використовувати protected readonly - доступно в нащадках, але не можна змінювати.

6. Protected-конструктор (приклад з Singleton / Factory)

Іноді сам конструктор роблять protected, щоб заборонити створювати екземпляри напряму, але дозволити це нащадкам:

javascript

abstract class BaseService {
  protected constructor(public name: string) {}
}

class UserService extends BaseService {
  constructor() {
    super("UserService");
  }
}

new UserService(); // ok
new BaseService("Base"); // Помилка - конструктор protected

Використовується, коли клас не призначений для прямого створення (часто в патернах).

7. Приклад застосування в реальному коді

javascript

abstract class Component {
  protected renderHTML(html: string) {
    console.log("Render:", html);
  }
}

class Button extends Component {
  render() {
    this.renderHTML("<button>Click me</button>"); // можна
  }
}

const btn = new Button();
btn.render();        // ok
btn.renderHTML("");  // Помилка - protected

Чудовий приклад для UI-компонентів або сервісів: базовий клас надає захищені утиліти, а конкретні нащадки використовують їх, не розкриваючи назовні.

Підсумок

Властивість	Значення
Доступний у самому класі	так
Доступний у нащадках	так
Доступний ззовні (через екземпляр)	ні
Часте застосування	Базові класи, шаблони, успадкування
Можна використовувати з `readonly`	так
Можна застосовувати до методів і конструкторів	так

Простіше кажучи:

protected - це як private, але "доступний дітям".

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.