Что такое Angular (часть 6.5) / Что такое TypeScript?
Как это работает… | Как начать…
Если вы не рассмотрели Часть 6.4 этой серии, я рекомендую вам проверить эту ссылку → Конструкторы и модификаторы доступа в TypeScript
Основы TypeScript👇
- Аннотации типов
- Стрелочные функции
- Интерфейсы
- Классы
- Конструкторы
- Модификаторы доступа
- Свойства
- Модули
6.5 Свойства
Согласно нашему предыдущему обучению и пониманию, мы не можем получить доступ к private
и protected
членам вне класса, используя объект класса - см. Ниже 👇 недопустимый код в строке №. 16 и 17
Тогда как получить доступ к private
и protected
членам вне класса?
Properties allow us to access private members outside of the class using get keyword and set keyword OR getter() and setter() methods. To understand how — look down the code below...👇
⭐️ Используя методы getColor()
и getD()
, мы можем получить доступ к private
и protected
членам класса - смотрите ниже 👇 в строке № 23 и 25
⭐️ Аналогичным образом, используя метод setColor()
, мы можем изменить значение private
членов в классе (также работает для protected
членов) - смотрите ниже 👇 в строке № 22
Примечание: try this code yourself to see the output!
- Мы инициализировали значение
color
в'Orange'
из конструктора - смотрите ниже 👇 в строке №. 19 - Затем обновите значение
color
, используя методdraw.setColor("Red")
- посмотрите ниже 👇 в строке № 22 - Теперь
draw.getColor()
вернет обновленное значение цвета"Red"
- смотрите ниже 👇 в строке №. 24
Running the code... look down in terminal below👇 — the initial value of color (before change) and value after change.
До сих пор мы создавали методы
get
иset
для доступа и изменения частных и защищенных членов класса. А теперь давайте сделаем то же самое с помощью свойств…
⭐️ Использование свойств
Изменение кода для использования Properties by using get keyword and set keyword
путем замены методов getter()
и setter()
.
Свойство выглядит как поле вне класса, но внутри является методом в классе. - посмотрите вниз 👇 измененный код.
(Примечание: мы не можем использовать одно и то же имя для поля класса и имени свойства, поэтому мы объявили color_
как поле класса и color
как свойство класса.)
Running the code... Note
👇
- Мы получаем значение поля
color_
, используя свойствоcolor
- смотрите ниже строку №. 20 и 24. Также посмотрите строку № 11, который возвращает значениеcolor_
. - Мы обновляем значение в поле
color_
, используя свойствоcolor
- см. Ниже строку №. 22. Также посмотрите строку № 14, который фактически устанавливает значениеcolor_
.
Речь идет о Properties
- теперь следующее Modules
👇
6.5 Модули
Поймите сценарий большой программы с тысячами строк кода и сотнями классов, и в этом случае становится очень сложно управлять всем в одном файле main.ts
So, we must need to divide our large program into multiple files — thus we use Modules to divide our code for better readability, understandability and maintainability.
- В TypeScript каждый
.ts
файл является модулем, в классе которого есть ключевое словоexport
. - Чтобы создать модуль, мы удалили
code of class Draw
из файлаmain.ts
и переместили в файлpoint.ts
. Смотрите ниже👇 код (на прикрепленном изображении) - Нам нужно указать ключевое слово
export
, чтобы разрешить этому классуDraw
доступ за пределамиpoint.ts
файла. - Затем нам сначала нужно импортировать класс модуля
Draw
в нашmain.ts
файл, чтобы использовать его. - Для импорта модуля мы используем ключевые слова
import
иfrom
.
Как импортировать модуль?
import { Draw } from "./point";
👉 После import
в фигурных скобках мы можем указать несколько классов, разделенных запятой, а после ключевого слова from
мы поместим ./
плюс имя модуля в кавычки. ./
означает текущий рабочий каталог, потому что оба файла main.ts
и point.ts
находятся в одном каталоге.
Не забудьте использовать --target es5
в своей команде, чтобы избавиться от error: Accessors are only available when targeting ECMAScript 5 and higher
. Команда для запуска этого кода:
tsc --target es5 main.ts && node main.js
Посмотрите вниз фактический код и вывод в терминале ниже. Никакого эффекта на вывод кода - мы просто использовали модули, чтобы упростить нашу программу.
Что нужно помнить перед 👋👋
⭐️
Declare properties by using get keyword and set keyword.
Property выглядит как поле вне класса, но внутри это метод класса.
⭐️
We use Modules to divide large program into multiple files.
Это все об основах TypeScript - увидимся в следующей части 👋👋
Если вы не рассмотрели Часть 6.4 этой серии, я рекомендую вам проверить эту ссылку → Конструкторы и модификаторы доступа в TypeScript
Следите за обновлениями, часть 7
https://medium.com/@AnkitMaheshwariIn
Если вы не против похлопать в ладоши 👏 👏, так как это помогло, я буду очень признателен :) Помогите другим найти статью, чтобы она могла им помочь!
Всегда хлопайте в ладоши…