Одним из самых значительных нововведений в веб-разработке за последнее десятилетие стал переход на Typescript. Поскольку все больше и больше работодателей стремятся ограничить технический долг, изучение Typescript становится необходимым для получения работы веб-разработчиком.
Хотя языки с динамической типизацией облегчают жизнь разработчику в краткосрочной перспективе, они могут стать причиной нежелательных ошибок, которые не обнаруживаются до момента выполнения. Мы можем избежать этой проблемы с помощью TypeScript. Давайте посмотрим поближе
Что такое TypeScript?
Проще говоря, TypeScript — это надмножество JavaScript. Это означает, что хотя обычный код JavaScript будет работать в TypeScript так же, он также будет иметь дополнительный набор функций, делающих наш код чище и лучше. TypeScript использует компилятор, известный как tsc, для проверки ошибок в коде и генерирует (технически известный как излучение) эквивалент JavaScript для использования в веб-приложениях.
TypeScript также можно назвать статически типизированной версией Javascript, но мы упускаем из виду множество других функций, которые может предложить TypeScript. В следующем разделе мы рассмотрим некоторые преимущества использования TypeScript.
Преимущества использования TypeScript
TypeScript предлагает следующие возможности:
- Строгая типизация. TypeScript уделяет большое внимание типу переменных, используемых в коде. Если переменной присвоено значение, не соответствующее типу, компилятор TypeScript tsc выдает ошибку.
- Объектно-ориентированные функции. В TypeScript представлено множество объектно-ориентированных концепций, упрощающих управление кодом.
- Ошибки во время компиляции. Поскольку в процесс входит этап компиляции, большинство ошибок обнаруживаются во время компиляции, а не во время выполнения.
- Выдача с ошибками: TypeScript сообщит разработчику о потенциальных ошибках в коде, но обязательно сгенерирует эквивалентный код JavaScript, чтобы процесс разработки продолжался. Окончательное решение остается за разработчиком.
- Отличный инструментарий. TypeScript предоставляет доступ ко множеству отличных инструментов, которые помогают в редактировании, проверке ошибок и т. д. при вводе кода.
Давайте посмотрим, как мы можем это сделать с помощью этой простой демонстрации, которая также выделяет некоторые из вышеупомянутых функций.
Как использовать TypeScript
Прежде чем перейти к основной демонстрации и рассмотреть сценарий, похожий на реальные приложения, давайте сначала рассмотрим основные строительные блоки TypeScript.
Примитивы
Здесь также присутствуют обычные примитивы JavaScript число, строка и логическое значение. Кроме того, вы можете сделать аннотацию типа, чтобы зафиксировать тип переменной во время объявления. TypeScript также определяет тип, когда переменная уже определена. TypeScript также имеет специальный тип под названием any, который используется, чтобы избежать ошибок проверки типа для конкретной переменной.
Функции и объекты
Функции также следуют аналогичному шаблону для аннотации типа, где типы параметров упоминаются так же, как и для обычных переменных, а возвращаемый тип упоминается между круглыми и фигурными скобками. Анонимные функции используют функцию TypeScript, называемую контекстная типизация, где тип выводится из контекста использования функции.
Объекты почти такие же, как JavaScript, за исключением того факта, что типы выводятся для каждого свойства внутри него. Обращение к несуществующим свойствам приводит к ошибке компилятора. TypeScript дает нам возможность создавать объекты с использованием псевдонимов типа (нельзя расширить) или интерфейса (можно расширить).
Типы поверх JavaScript
TypeScript также добавляет несколько собственных типов.
- Кортежи — это массивы, типы элементов которых уже аннотированы, поэтому мы не можем сохранить какой-либо другой тип в этом месте.
- Enum включает в себя присвоение числам/строкам удобочитаемых идентификаторов. Это упрощает управление кодом и позволяет избежать хлопот с запоминанием фиксированных значений.
- Объединения позволяют использовать одну и ту же переменную с несколькими типами данных, не беспокоясь об ошибках типов. Это достигается путем аннотирования нескольких типов одной и той же переменной с помощью символа вертикальной черты (|).
Использование машинописного текста в проекте
Поскольку теперь мы знакомы с основными блоками TypeScript, давайте создадим небольшое приложение и посмотрим, как мы можем использовать его для написания лучшего кода. Это приложение примет два числа в качестве входных данных и запишет их сумму в консоль браузера.
- Прежде чем мы создадим демонстрацию, нам нужно настроить TypeScript на нашей машине. Следуйте приведенным ниже инструкциям, чтобы настроить TypeScript на вашем компьютере.
2. Создайте два файла index.html и app.ts. Обязательно вызовите app.js внутри HTML-файла. Мы будем использовать app.ts для создания файла app.js для использования в среде браузера.
3. Создайте index.html, как показано ниже. Этот файл будет содержать два ввода для чисел и одну кнопку добавления. Мы выведем сумму двух чисел на консоль.
4. Внутри файла app.ts добавьте следующий код. Этот код TypeScript создает файл JavaScript, который мы будем использовать для получения значений из DOM, добавления их и регистрации результата в консоли браузера.
5. Чтобы создать app.js, перейдите в свой терминал и выполните следующую команду, чтобы скомпилировать app.ts:
`tsc — целевой файл es2015 app.ts`
Обязательно запустите это в папке, где находится ваш app.ts. Как упоминалось ранее, tsc — это компилятор TypeScript. Это скомпилирует наш app.ts и выдаст app.js, а также создаст сообщения об ошибках в случае каких-либо ошибок.
Целевой флаг необходим, чтобы убедиться, что созданный JavaScript соответствует стандарту ES2015. По умолчанию tsc использует довольно старый стандарт ES3.
6. Если вы используете приведенный выше код, он должен работать сразу. Чтобы увидеть TypeScript в действии, вам нужно удалить аннотации типов. Каждый раз, когда вы вносите изменения, вам нужно снова скомпилировать app.ts. Изменения, не соответствующие TypeScript, приведут к ошибкам. Однако он по-прежнему будет генерировать JavaScript, и вы даже можете запустить его, но это может привести к неожиданным результатам.
Мы только что коснулись того, что может предложить TypeScript! Самое важное, что вы можете сделать, чтобы лучше познакомиться с машинописным текстом, — это начать использовать его в своих увлеченных проектах. Чем комфортнее вы работаете с Typescript, тем легче вам будет использовать его для написания чистого кода в вашей компании.
Ищете место для развертывания этого чистого кода? Обратите внимание на Codesphere, единственного облачного провайдера, который делает развертывание в облаке таким же простым, как и локальное тестирование.
Удачного кодирования!
