Sign in

TypeScript 101. Понимание базовых навыков за несколько минут

Image for post
Image for post

Итак, в течение некоторого времени вокруг TypeScript было много шума. Тем более, что Angular начал использовать TypeScript в качестве основного языка. Теперь вы можете подумать: Angular был разработан Google, компанией, у которой есть довольно умные программисты (некоторые могут сказать, что это первые 4%). Если они предпочитают TS, а не JS, должна быть веская причина!

Что ж, вы правы! и вот несколько причин выучить ТС как можно скорее!

1. TypeScript-это будущее JavaScript (некоторые могут не согласиться!)

2. TypeScript код подобен хорошо документированному коду, поэтому его легче понять.

3. Он имеет классы, интерфейсы, универсалии и т. д. как и любой другой объектно-ориентированный язык программирования.

Давайте посмотрим на базовую функцию машинописи и тогда вы сможете оценить сами:

Чему мы научились? Функция calculateGrade принимает два аргумента типа numberи возвращает оценку типа string в конце.

Это может показаться очевидным, но если это был JavaScript, то почти нет простого способа узнать “какие переменные вы должны использовать при вызове этой функции?”или” что он вернет-число или строку?- И, таким образом, приводит к потенциальным ошибкам в конечном счете.

Теперь, что делать, если после прочтения функции выше, вы все еще делаете ошибку и пытаетесь передать строку в качестве аргумента для указанной выше функции.
Что ж, в случае с JS вы узнаете об этом только тогда, когда будет уже слишком поздно.
Однако наш дружелюбный TS сразу же сообщит нам об этом.
Если вы мне не верите, смотрите ниже:

Image for post
Image for post
следовательно, меньше ошибок!

Ладно, хватит болтать. Давайте перейдем к изучению некоторых основ машинописи, которые помогут вам начать работу.

Типы

Как следует из названия, TypeScript имеет типы! Мы уже видели number и string. Что ещё…

Классы

Взгляните на приведенный ниже код, вам не кажется, что такой код легче понять и менее подвержен ошибкам?

Image for post
Image for post

Этот код представляет собой класс сотрудников, содержащий два свойства: имя и зарплата.

Объяснение кода: думайте о классе “сотрудник” как о проекте. Этот фрагмент кода, хотя и довольно простой, объясняет некоторые очень важные концепции машинописи. Кроме того, обратите внимание, что salary переменная заработной платы является частной. Это означает, что мы не можем напрямую получить доступ к этой переменной. Смотрите снимок ниже:

Image for post
Image for post

Для получения дополнительной информации о классах (typescriptlang.org): классы.

Интерфейсы: Cоздавайте свои собственные пользовательские типы

Мы уже знаем, что мы можем использовать такие типы, как string, number, boolean и т. д. Что делать, если мы хотим создать свои собственные пользовательские типы для принудительного выполнения проверок в нашем коде? К счастью, мы можем использовать интерфейсы для этого!

Image for post
Image for post

Интерфейсы могут быть действительно полезны и широко используются в таких фреймворках, как Angular/React. Мы также можем использовать классы “модели” или “типы” в зависимости от конкретного случая использования.

Для получения дополнительной информации об интерфейсах (typescriptlang.org): интерфейсы.

Дженерик (Generics)

Дженерики — очень простая, но мощная функция TypeScript. Использование дженериков широко ценится при работе с сервисами/API, которые могут использовать другие разработчики, особенно с открытым исходным кодом. Это помогает знать, какого рода данных ожидать, и, следовательно, приводит к уменьшению количества ошибок и путаницы.

Image for post
Image for post
Очень простой пример важности / использования дженериков в TS.

Для получения дополнительной информации о дженериках (typescriptlang.org): Generics.

Я надеюсь, что для тех, кто новичок в TypeScript, эта статья помогла вам понять преимущества использования типов в вашем JS-коде.

Ресурсы

Вы можете найти код в этой статье здесь:Ссылка на GitHub gists.

Другие ресурсы:официальное руководство по TypeScript.

Используемые игровые площадки для TypeScript:
https://typescript-play.js.org/
https://www.typescriptlang.org/play/

Спасибо за чтение. Если у вас есть какие-либо вопросы, не стесняйтесь оставлять ответ.

Written by

Graph Curator as a Girl!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store