Что такое Angular (часть 6.5) / Что такое TypeScript?

Как это работает… | Как начать…

Если вы не рассмотрели Часть 6.4 этой серии, я рекомендую вам проверить эту ссылку → Конструкторы и модификаторы доступа в TypeScript

Основы TypeScript👇

  1. Аннотации типов
  2. Стрелочные функции
  3. Интерфейсы
  4. Классы
  5. Конструкторы
  6. Модификаторы доступа
  7. Свойства
  8. Модули

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

Если вы не против похлопать в ладоши 👏 👏, так как это помогло, я буду очень признателен :) Помогите другим найти статью, чтобы она могла им помочь!

Всегда хлопайте в ладоши…