Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що робить модифікатор доступу protected?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

Модифікатор `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`,
> але "доступний дітям".

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати536 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.