Как объявить readonly-свойства и readonly-массивы, чем они отличаются от const?

1️⃣ Как кратко ответить

Readonly-свойства в TypeScript объявляются с помощью ключевого слова readonly перед объявлением свойства в классе или интерфейсе. Readonly-массивы создаются с использованием типа ReadonlyArray<T>. Они отличаются от const тем, что readonly защищает от изменения содержимого объекта или массива, тогда как const предотвращает переназначение переменной.

2️⃣ Подробное объяснение темы

В TypeScript и JavaScript есть несколько способов защитить данные от изменения. Два из них — это использование readonly и const. Они служат разным целям и применяются в разных контекстах.

Readonly-свойства

Readonly-свойства используются в TypeScript для защиты свойств объектов от изменения после их инициализации. Это полезно, когда вы хотите, чтобы определенные свойства объекта оставались неизменными после создания объекта.

Пример использования readonly в классе:

class Car {
  readonly brand: string;
  readonly model: string;
​
  constructor(brand: string, model: string) {
    this.brand = brand; // Инициализация свойства brand
    this.model = model; // Инициализация свойства model
  }
}
​
const myCar = new Car('Toyota', 'Corolla');
console.log(myCar.brand); // Выводит: Toyota
​
// myCar.brand = 'Honda'; // Ошибка: Невозможно присвоить значение свойству "brand", так как оно только для чтения.

• readonly brand: string; — объявление свойства brand как только для чтения.
• this.brand = brand; — инициализация свойства в конструкторе.
• myCar.brand = 'Honda'; — попытка изменить значение свойства brand вызовет ошибку компиляции.

Readonly-массивы

Readonly-массивы в TypeScript создаются с использованием типа ReadonlyArray<T>. Они позволяют предотвратить изменение содержимого массива, но не его структуру.

Пример использования ReadonlyArray:

const numbers: ReadonlyArray<number> = [1, 2, 3, 4];
​
// numbers.push(5); // Ошибка: Метод "push" не существует в типе "readonly number[]".
console.log(numbers[0]); // Выводит: 1
​
// numbers[0] = 10; // Ошибка: Индексирование массива только для чтения.

• const numbers: ReadonlyArray<number> = [1, 2, 3, 4]; — объявление массива numbers как только для чтения.
• numbers.push(5); — попытка изменить массив вызовет ошибку, так как методы изменения массива недоступны.
• numbers[0] = 10; — попытка изменить элемент массива также вызовет ошибку.

Отличия от const

• const используется для объявления переменных, которые не могут быть переназначены. Это значит, что вы не можете изменить ссылку на объект или массив, но можете изменить их содержимое.
• readonly защищает содержимое объекта или массива от изменения, но не предотвращает переназначение переменной.

Пример с const:

const car = { brand: 'Toyota', model: 'Corolla' };
car.brand = 'Honda'; // Допустимо, так как изменяется содержимое объекта, а не ссылка на него.
​
// car = { brand: 'Ford', model: 'Focus' }; // Ошибка: Невозможно переназначить переменную "car".

• const car = { brand: 'Toyota', model: 'Corolla' }; — объявление переменной car как константы.
• car.brand = 'Honda'; — изменение содержимого объекта допустимо.
• car = { brand: 'Ford', model: 'Focus' }; — попытка переназначить переменную вызовет ошибку.

Таким образом, readonly и const служат для разных целей: readonly защищает содержимое, а const защищает ссылку на переменную.