TypeScript 101. Понимание базовых навыков за несколько минут
Итак, в течение некоторого времени вокруг TypeScript было много шума. Тем более, что Angular начал использовать TypeScript в качестве основного языка. Теперь вы можете подумать: Angular был разработан Google, компанией, у которой есть довольно умные программисты (некоторые могут сказать, что это первые 4%). Если они предпочитают TS, а не JS, должна быть веская причина!
Что ж, вы правы! и вот несколько причин выучить ТС как можно скорее!
1. TypeScript-это будущее JavaScript (некоторые могут не согласиться!)
2. TypeScript код подобен хорошо документированному коду, поэтому его легче понять.
3. Он имеет классы, интерфейсы, универсалии и т. д. как и любой другой объектно-ориентированный язык программирования.
Давайте посмотрим на базовую функцию машинописи и тогда вы сможете оценить сами:
function calculateGrade(course1: number, course2: number) : string {
return (course1 + course2) > 70 ? 'A' : 'B';
}Чему мы научились? Функция calculateGrade принимает два аргумента типа numberи возвращает оценку типа string в конце.
Это может показаться очевидным, но если это был JavaScript, то почти нет простого способа узнать “какие переменные вы должны использовать при вызове этой функции?”или” что он вернет-число или строку?- И, таким образом, приводит к потенциальным ошибкам в конечном счете.
Теперь, что делать, если после прочтения функции выше, вы все еще делаете ошибку и пытаетесь передать строку в качестве аргумента для указанной выше функции.
Что ж, в случае с JS вы узнаете об этом только тогда, когда будет уже слишком поздно.
Однако наш дружелюбный TS сразу же сообщит нам об этом.
Если вы мне не верите, смотрите ниже:
Ладно, хватит болтать. Давайте перейдем к изучению некоторых основ машинописи, которые помогут вам начать работу.
Типы
Как следует из названия, TypeScript имеет типы! Мы уже видели number и string. Что ещё…
Классы
Взгляните на приведенный ниже код, вам не кажется, что такой код легче понять и менее подвержен ошибкам?
Этот код представляет собой класс сотрудников, содержащий два свойства: имя и зарплата.
Объяснение кода: думайте о классе “сотрудник” как о проекте. Этот фрагмент кода, хотя и довольно простой, объясняет некоторые очень важные концепции машинописи. Кроме того, обратите внимание, что salary переменная заработной платы является частной. Это означает, что мы не можем напрямую получить доступ к этой переменной. Смотрите снимок ниже:
Для получения дополнительной информации о классах (typescriptlang.org): классы.
Интерфейсы: Cоздавайте свои собственные пользовательские типы
Мы уже знаем, что мы можем использовать такие типы, как string, number, boolean и т. д. Что делать, если мы хотим создать свои собственные пользовательские типы для принудительного выполнения проверок в нашем коде? К счастью, мы можем использовать интерфейсы для этого!
Интерфейсы могут быть действительно полезны и широко используются в таких фреймворках, как Angular/React. Мы также можем использовать классы “модели” или “типы” в зависимости от конкретного случая использования.
Для получения дополнительной информации об интерфейсах (typescriptlang.org): интерфейсы.
Дженерик (Generics)
Дженерики — очень простая, но мощная функция TypeScript. Использование дженериков широко ценится при работе с сервисами/API, которые могут использовать другие разработчики, особенно с открытым исходным кодом. Это помогает знать, какого рода данных ожидать, и, следовательно, приводит к уменьшению количества ошибок и путаницы.
Для получения дополнительной информации о дженериках (typescriptlang.org): Generics.
Я надеюсь, что для тех, кто новичок в TypeScript, эта статья помогла вам понять преимущества использования типов в вашем JS-коде.
Ресурсы
Вы можете найти код в этой статье здесь:Ссылка на GitHub gists.
Другие ресурсы:официальное руководство по TypeScript.
Используемые игровые площадки для TypeScript:
https://typescript-play.js.org/
https://www.typescriptlang.org/play/
Спасибо за чтение. Если у вас есть какие-либо вопросы, не стесняйтесь оставлять ответ.
