9.1 Ключевое слово const
TypeScript предоставляет дополнительные возможности для типизации, улучшая контроль над изменяемостью данных с помощью ключевых слов readonly и const. Эти ключевые слова позволяют объявлять переменные и свойства, которые нельзя изменить после их инициализации, обеспечивая дополнительную безопасность кода.
let и
const. Тогда там был только
var.
В JavaScript и TypeScript ключевое слово const используется для объявления переменных, значение которых не может быть переназначено после инициализации. Это помогает предотвратить случайные изменения значений и улучшает предсказуемость кода.
Синтаксис
Объявление переменной с использованием const осуществляется следующим образом:
const name: type = value;
Рассмотрим примеры использования const.
Пример 1: Объявление примитивных значений
"use strict";
const name = 'Alice';
const age = 30;
const isAdmin = true;
console.log(name, age, isAdmin);
const name: string = 'Alice';
const age: number = 30;
const isAdmin: boolean = true;
console.log(name, age, isAdmin);
В этом примере переменные name, age и isAdmin объявлены с использованием const, что означает, что их значения не могут быть изменены после инициализации.
Пример 2: Объявление объектов и массивов
Важно отметить, что const предотвращает переприсваивание переменной, но не делает объект или массив неизменяемым. Вы можете изменять внутренние свойства объектов и элементы массивов, объявленных с помощью const.
"use strict";
const user = {
name: 'Bob',
age: 25
};
user.age = 26; // Допустимо
const numbers = [1, 2, 3];
numbers.push(4); // Допустимо
console.log(user, numbers);
const user = {
name: 'Bob',
age: 25
};
user.age = 26; // Допустимо
const numbers = [1, 2, 3];
numbers.push(4); // Допустимо
console.log(user, numbers);
В этом примере объект user и массив numbers объявлены с использованием const. Хотя вы не можете переприсвоить user или numbers, вы можете изменять их внутренние свойства и элементы.
Ошибки при попытке переприсваивания
Попытка переназначения переменной, объявленной с const, приведет к ошибке компиляции.
const pi: number = 3.14;
pi = 3.14159; // Ошибка компиляции: Cannot assign to 'pi' because it is a constant.
9.2 Ключевое слово readonly
Ключевое слово readonly используется в TypeScript для обозначения неизменяемых свойств объектов и классов. В отличие от const, которое применяется к переменным, readonly применяется к свойствам объектов и классов, обеспечивая неизменяемость только этих свойств.
Синтаксис
Объявление свойства с использованием readonly осуществляется следующим образом:
class ClassName {
readonly name: type;
}
Давайте посмотрим на примеры использования readonly.
Пример 1: Использование readonly в интерфейсах
"use strict";
const user = {
id: 1,
name: 'Alice'
};
user.name = 'Bob'; // Допустимо
user.id = 2; // Ошибка компиляции: Cannot assign to 'id' because it is a read-only property.
interface User {
readonly id: number;
name: string;
}
const user: User = {
id: 1,
name: 'Alice'
};
user.name = 'Bob'; // Допустимо
user.id = 2; // Ошибка компиляции: Cannot assign to 'id' because it is a read-only property.
В этом примере интерфейс User содержит свойство id, которое объявлено с использованием readonly. Попытка изменить значение свойства id приведет к ошибке компиляции.
Пример 2: Использование readonly в классах
"use strict";
class Car {
constructor(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
}
}
const myCar = new Car('Toyota', 'Camry', 2020);
myCar.year = 2021; // Допустимо
myCar.make = 'Honda'; // Ошибка компиляции: Cannot assign to 'make' because it is a read-only property.
class Car {
readonly make: string;
readonly model: string;
year: number;
constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}
}
const myCar = new Car('Toyota', 'Camry', 2020);
myCar.year = 2021; // Допустимо
myCar.make = 'Honda'; // Ошибка компиляции: Cannot assign to 'make' because it is a read-only property.
В этом примере класс Car содержит свойства make и model, которые объявлены с использованием readonly. Эти свойства можно установить только в конструкторе и нельзя изменить после создания экземпляра класса.
Преимущества использования readonly:
- Безопасность: использование
readonlyпредотвращает случайные изменения свойств объектов и классов, улучшая предсказуемость и надежность кода. - Документирование намерений: объявление свойства как
readonlyясно указывает на намерение сделать это свойство неизменяемым, что улучшает читаемость и понимание кода.
9.3 Сравнение const и readonly
Давайте сравним два этих ключевых слова:
| Ключевое слово | Область применения | Изменяемость | Применение |
|---|---|---|---|
| const | Переменные | Неизменяемо (переназначение) | Для объявления примитивных значений, объектов и массивов, которые не должны быть переприсвоены |
| readonly | Свойства объектов и классов | Неизменяемо (свойства) | Для объявления свойств объектов и классов, которые не должны быть изменены после инициализации |
Пример использования const и readonly вместе:
"use strict";
class Employee {
constructor(id, name) {
this.id = id;
this.name = name;
}
}
const employee = new Employee(1, 'Alice');
employee.name = 'Bob'; // Допустимо
employee.id = 2; // Ошибка компиляции: Cannot assign to 'id' because it is a read-only property.
class Employee {
readonly id: number;
name: string;
constructor(id: number, name: string) {
this.id = id;
this.name = name;
}
}
const employee = new Employee(1, 'Alice');
employee.name = 'Bob'; // Допустимо
employee.id = 2; // Ошибка компиляции: Cannot assign to 'id' because it is a read-only property.
В этом примере мы используем const для объявления переменной employee, чтобы предотвратить ее переприсваивание, и readonly для свойства id класса Employee, чтобы предотвратить его изменение после инициализации.
9.4 Примеры
Давайте посмотрим на примеры использования этих ключевых слов в реальных задачах.
Пример 1: Конфигурация приложения
Использование readonly для конфигурационных объектов, чтобы предотвратить их изменение после инициализации:
"use strict";
const config = Object.freeze({
apiUrl: 'https://api.example.com',
timeout: 5000
});
config.apiUrl = 'https://api.newexample.com';
interface AppConfig {
readonly apiUrl: string;
readonly timeout: number;
}
const config: AppConfig = {
apiUrl: 'https://api.example.com',
timeout: 5000
};
config.apiUrl = 'https://api.newexample.com'; // Ошибка компиляции
Пример 2: Модели данных
Использование readonly в моделях данных для обозначения неизменяемых свойств, таких как идентификаторы:
"use strict";
const user = {
id: 1,
name: 'Alice'
};
Object.defineProperty(user, 'id', {
writable: false
});
user.name = 'Bob'; // Допустимо
user.id = 2;
interface User {
readonly id: number;
name: string;
}
const user: User = {
id: 1,
name: 'Alice'
};
user.name = 'Bob'; // Допустимо
user.id = 2; // Ошибка компиляции
Пример 3: Константы
Использование const для объявления констант, которые не должны изменяться:
"use strict";
const MAX_USERS = 100;
const API_ENDPOINT = 'https://api.example.com';
// Ошибка компиляции: Cannot assign to 'MAX_USERS' because it is a constant.
MAX_USERS = 200;
// Ошибка компиляции: Cannot assign to 'API_ENDPOINT' because it is a constant.
API_ENDPOINT = 'https://api.newexample.com';
console.log(MAX_USERS, API_ENDPOINT);
const MAX_USERS = 100;
const API_ENDPOINT = 'https://api.example.com';
// Ошибка компиляции: Cannot assign to 'MAX_USERS' because it is a constant.
MAX_USERS = 200;
// Ошибка компиляции: Cannot assign to 'API_ENDPOINT' because it is a constant.
API_ENDPOINT = 'https://api.newexample.com';
console.log(MAX_USERS, API_ENDPOINT);
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ