TypeScript - Readonly Properties: A Beginner's Guide

Здравствуйте, будущая суперзвезда кодирования! Сегодня мы окунемся в奇妙ный мир TypeScript и исследуем одну из его мощных функций: неудаляемые свойства. Не волнуйтесь, если вы новички в программировании; я буду вашим доброжелательным проводником в этом увлекательном путешествии. Так что возьмите свой любимый напиток, устроитесь поудобнее, и давайте отправимся в это приключение с TypeScript вместе!

TypeScript - Readonly Properties

Что такое неудаляемые свойства?

Прежде чем мы углубимся в детали, давайте поймем, что такое неудаляемые свойства. Представьте, что у вас есть ценная семейная реликвия - может быть, красивые старинные часы. Вы можете смотреть на них, наслаждаться ими, но вы не можете их изменить. Вот exactly что такое неудаляемые свойства в TypeScript - значения, которые вы можете видеть и использовать, но не можете изменить после их установки.

Синтаксис

Давайте начнем с основ. Как мы объявляем неудаляемое свойство? Это так же просто, как добавить ключевое слово readonly перед названием свойства. Вот базовый пример:

class Heirloom {
readonly name: string;

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

const familyWatch = new Heirloom("Grandfather's Watch");
console.log(familyWatch.name); // Вывод: Grandfather's Watch
// familyWatch.name = "New Watch"; // Ошибка! Невозможно изменить неудаляемое свойство

В этом примере,_once мы установили name в конструкторе, мы не можем изменить его позже. Это как если бы мы запечатали имя нашей семейной реликвии во времени!

У properties с интерфейсами

Интерфейсы в TypeScript похожи на чертежи для объектов. Мы можем использовать неудаляемые свойства в интерфейсах тоже. Давайте посмотрим, как это делается:

interface ReadonlyPerson {
readonly name: string;
readonly age: number;
}

const person: ReadonlyPerson = {
name: "Alice",
age: 30
};

console.log(person.name); // Вывод: Alice
// person.age = 31; // Ошибка! Невозможно изменить неудаляемое свойство

Здесь мы создали интерфейс ReadonlyPerson, в котором и name, и age являются неудаляемыми. Once мы создаем объект на основе этого интерфейса, мы не можем изменить эти свойства. Это как если бы мы создали удостоверение личности - once оно напечатано, вы не можете просто стереть возраст и написать новый!

У properties с классами

Классы resemble чертежи для создания объектов с данными и поведением. Давайте посмотрим, как работают неудаляемые свойства в классах:

class Book {
readonly title: string;
readonly author: string;
private _pageCount: number;

constructor(title: string, author: string, pageCount: number) {
this.title = title;
this.author = author;
this._pageCount = pageCount;
}

get pageCount(): number {
return this._pageCount;
}

addPages(pages: number) {
this._pageCount += pages;
}
}

const myBook = new Book("TypeScript 101", "Jane Doe", 200);
console.log(myBook.title); // Вывод: TypeScript 101
myBook.addPages(50);
console.log(myBook.pageCount); // Вывод: 250
// myBook.title = "JavaScript 101"; // Ошибка! Невозможно изменить неудаляемое свойство

В этом примере title и author являются неудаляемыми, но мы все еще можем изменять pageCount через метод. Это как если бы книга - once напечатана, вы не можете изменить заголовок или автора, но вы можете добавить страницы (может быть, в revisited издании).

У properties с типовыми синонимами

Типовые синонимы resemble прозвищами для типов. Мы можем использовать неудаляемые свойства с ними тоже:

type ReadonlyPoint = {
readonly x: number;
readonly y: number;
};

const point: ReadonlyPoint = { x: 10, y: 20 };
console.log(point.x, point.y); // Вывод: 10 20
// point.x = 30; // Ошибка! Невозможно изменить неудаляемое свойство

Здесь мы создали тип ReadonlyPoint, в котором и x, и y являются неудаляемыми. Это как если бы мы установили координаты на карте - once они установлены, вы не можете переместить точку!

Const vs. неудаляемые properties

Теперь вы можете задаться вопросом: "Что区别 между const и readonly?" Отличный вопрос! Давайте разберем это:

const PI = 3.14159;
// PI = 3.14; // Ошибка! Невозможно перезаписать переменную const

class Circle {
readonly radius: number;

constructor(radius: number) {
this.radius = radius;
}
}

const circle = new Circle(5);
// circle.radius = 10; // Ошибка! Невозможно изменить неудаляемое свойство

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

Когда использовать неудаляемые свойства

Итак, когда вы должны использовать неудаляемые свойства? Вот несколько распространенных сценариев:

  1. Когда у вас есть значения, которые shouldn't изменяться после инициализации.
  2. Для конфигурационных объектов, которые должны оставаться постоянными.
  3. Чтобы предотвратить случайные изменения в больших кодбазах.
  4. При работе с неизменяемыми структурами данных.

Вот таблица, резюмирующая методы, которые мы обсуждали:

Метод Описание Пример
С interfaces Определите неудаляемые свойства в чертежах объектов interface ReadonlyPerson { readonly name: string; }
В классах Создайте свойства класса, которые нельзя изменить после инициализации class Book { readonly title: string; }
С типовыми синонимами Определите неудаляемые свойства в пользовательских типах type ReadonlyPoint = { readonly x: number; readonly y: number; }
Const vs Readonly Используйте const для переменных, readonly для свойств const PI = 3.14; class Circle { readonly radius: number; }

Помните, использование неудаляемых свойств resembles установление правил для вашего будущего себя и других разработчиков. Это помогает предотвратить ошибки и делает ваш код более предсказуемым и легко maintainable.

И вот мы и arrived, мои дорогие студенты! Мы совершили путешествие по земле неудаляемых свойств в TypeScript. Надеюсь, это руководство осветило ваш путь. Помните, практика makes perfect, так что не бойтесь экспериментировать с этими概念的 в ваших собственных проектах. Счастливого кодирования, и пусть ваши неудаляемые свойства всегда remain верны своим значениям!

Credits: Image by storyset