Введение
Язык программирования TypeScript имеет множество преимуществ перед JavaScript для разработчиков. TypeScript предоставляет дополнительные возможности, позволяющие создавать более сложные интерактивные приложения и веб-сайты с меньшим количеством ошибок.
TypeScript также обладает обширной экосистемой инструментов для разработчиков, которые предлагают встроенную документацию и проверку кода в реальном времени, что упрощает выявление ошибок в коде в процессе работы.
В этой статье объясняется, что такое TypeScript и как он связан с JavaScript, а также приводятся ресурсы, которые помогут вам начать разработку фронтенд- и бэкенд-приложений.
Что такое TypeScript?
TypeScript — это язык программирования, который добавляет дополнительные функции к JavaScript.
JavaScript изначально не предназначался для разработки сложных фронтенд- и бэкенд-приложений. Он был создан для добавления простой интерактивности на веб-сайты. Например, для создания кликабельных кнопок и анимации выпадающих меню.
Однако JavaScript стал популярен среди разработчиков, которые увидели возможности его использования за пределами этой области, что привело к некоторым проблемам: язык был слишком снисходителен. Было слишком легко допустить ошибки в программировании или неправильно использовать функции, которые впоследствии могли бы нарушить работу приложения, и JavaScript не обладал многими функциями других языков. TypeScript был разработан для решения этих проблем, оставаясь при этом совместимым с существующими средами JavaScript.
TypeScript — это статически типизированный язык и надмножество JavaScript, основанное на существующем синтаксисе и функциональности JavaScript. Это означает, что вы можете использовать JavaScript в своем коде на TypeScript, но вы не можете использовать TypeScript в своем коде на JavaScript, потому что код, написанный на TypeScript, использует возможности и синтаксис, недоступные в JavaScript.
Для работы в веб-браузерах и средах, подобных Node.js (термин «транслируется» используется потому, что код TypeScript не является низкоуровневым языком), его необходимо компилировать в JavaScript. При компиляции кода TypeScript в JavaScript полученный код JavaScript не предназначен для непосредственного редактирования.
Процесс создания приложений на TypeScript заключается в написании кода на TypeScript, компиляции его в JavaScript и последующем развертывании. Хотя этот дополнительный шаг может показаться излишней сложностью, он необходим по очень веской причине: если бы TypeScript был совершенно новым языком, его не стоило бы рассматривать, но поскольку он компилирует JavaScript, позволяя ему работать на существующих системах, он получил широкое распространение.
Расширение файла для TypeScript — .ts. Ниже приведён пример файла index.ts с базовым кодом TypeScript:
let message: string = "Hello, World!";
function greeting () {
console.log(message);
}
greeting();Обратите внимание, что хотя синтаксис очень похож на JavaScript, в этом примере заметно одно отличие: за переменной message следует двоеточие (:), а её тип — в данном случае TypeScript — позволяет указать, что сообщение должно быть строкой и не может принимать значение другого типа.
Основные особенности и преимущества TypeScript для разработчиков
TypeScript получил свое название потому, что его главная особенность — это внедрение типобезопасности в JavaScript. В приведенном выше примере к переменной message применяется строковый тип, поэтому числовое значение или любой другой тип там использовать нельзя. Это может показаться ограничением, но на самом деле это преимущество для разработчиков.
Типобезопасность и проверки на этапе компиляции снижают количество ошибок в программировании.
Рассмотрим следующий сценарий: вы берете значения из двух текстовых полей ввода HTML и хотите их сложить. JavaScript считывает эти значения как строки (это текстовое поле!). В результате вы получаете следующее:
let a = "2"; // Assuming the value has been read from a text input
let b = "5";
console.log(a + b); // Result is "25"Этот код выполняется без каких-либо предупреждений или ошибок, а значения в текстовых полях обрабатываются как строки, то есть вместо арифметических операций они объединяются, в результате чего получается нежелательный результат "25" вместо 7. Если вы создаёте бизнес-инструмент и хотите сложить с ним денежную сумму, это может быть очень плохо — вы завышаете цену для клиента!
Это демонстрирует важность типобезопасности. Ниже тип добавляемых переменных определяется путем присвоения им соответствующего типа:
let a: number = "2";
let b: number = "2";
console.log(a + b);Если вы попытаетесь скомпилировать и запустить этот код, он не сработает — вместо этого вы получите ошибку:
Типу 'string' не может быть присвоен тип 'number'.
Это указывает на то, что вы по ошибке попытались присвоить строковое значение числовой переменной, чтобы вы могли это исправить — например, явно преобразовав строку в число. TypeScript упрощает и делает более надежной отладку вашей программы для пользователей, предотвращая компиляцию и запуск кода даже при наличии опечаток.
При работе с TypeScript вам не нужно указывать тип переменной (хотя обычно это рекомендуется): вывод типов позволяет объявлять и использовать переменные без указания типа, и TypeScript определяет тип на основе значения и использования. Это полезно при импорте нетипизированного кода JavaScript для использования в проектах TypeScript.
Если вы хотите поэкспериментировать с этим самостоятельно, TypeScript Playground позволяет писать и тестировать код на TypeScript прямо в браузере без необходимости компиляции.
Пользовательские типы, классы и интерфейсы обеспечивают согласованность ваших данных.
TypeScript расширяет поддержку объектно-ориентированного программирования в JavaScript, добавляя поддержку собственных пользовательских типов, а также улучшения в классах, интерфейсах и наследовании.
Создание собственных типов объектов и интерфейсов позволяет моделировать данные в TypeScript, обеспечивая их корректную обработку и хранение.
Классы и наследование позволяют создавать чистый код и следовать принципам DRY (Don't Repeat Yourself — не повторяйте себя), что делает вашу кодовую базу гораздо более организованной, чем в традиционном JavaScript.
Перечисления и литеральные типы упрощают понимание кода.
Перечисления (enums) делают ваш код более читаемым и удобным, позволяя присваивать имена значениям, которые в противном случае могли бы быть неоднозначными.
Например, предположим, что вы храните статус заказа в базе данных в виде числового значения, чтобы сэкономить место и ускорить поиск. Вместо "ожидает", "оплачено" и "отправлено" вы можете хранить эти значения как числа 0, 1 и 2 соответственно.
Побочный эффект заключается в том, что ваш код становится запутанным, потому что сами числа мало что описывают. Вы можете забыть, какое число соответствует какому условию, и использовать неправильное. Перечисления предлагают удобное решение:
enum OrderStatus {
pending,
paid,
shipped,
}В приведенном выше списке "pending" имеет значение 0 (перечисления, как и другие индексы в программировании, начинают отсчет позиций элементов с нуля), "paid" имеет значение 1, а "sent" — значение 2. При использовании перечисления вы обращаетесь к его значениям по имени, а возвращается значение индекса:
console.log(OrderStatus.paid); // Выведет 1
Литеральные типы и объединения присваивают переменным конкретные значения. Например, у вас может быть функция, которая ожидает получить только значение “cat” или “dog”:
function myFunction(pet: "cat" | "dog") {
console.log(pet);
}Если ваш код передаёт в эту функцию значения, отличные от "cat" или "dog", будет выдана ошибка. Это помогает выявлять больше проблем на этапе разработки: вы можете писать функции, которые ожидают определённых входных данных, зная, что если будет обнаружена ошибка, из-за которой им будет передано неожиданное значение, ваша программа не скомпилируется.
Как установить TypeScript и использовать компилятор TypeScript
Для запуска в веб-браузерах и Node.js код TypeScript необходимо скомпилировать в JavaScript, а для этого нужно установить компилятор TypeScript.
Вы можете установить TypeScript глобально, используя следующую команду npm.
npm install -g typescript
После установки вы можете запустить команду компиляции TypeScript tsc из любого места в терминале, используя npx:
tsc index.ts
Приведённая выше команда компилирует файл TypeScript index.ts и создаёт скомпилированный файл JavaScript с именем index.js.
Как написать программу на TypeScript
TypeScript особенно хорош при создании сложных многостраничных приложений и веб-сайтов. Большинство разработчиков не используют его для таких простых вещей, как добавление интерактивности на отдельные веб-страницы, но они часто применяют его для создания больших приложений с использованием React или Angular.
Многие разработчики используют редакторы кода, поддерживающие интеграцию с TypeScript, чтобы воспользоваться преимуществами автозавершения кода, встроенной документации и подсветки ошибок для оптимизации процессов разработки и отладки.
Могу ли я использовать свой существующий JavaScript-код?
Да! TypeScript совместим с JavaScript. Вы можете импортировать свой старый код JavaScript и продолжать использовать его в своих проектах на TypeScript, а также изменять его со временем, чтобы воспользоваться преимуществами новых функций TypeScript.
Завершите сборку с использованием TypeScript для браузера.
React — это библиотека, которая помогает создавать пользовательские интерфейсы для ваших фронтенд-приложений. Она предоставляет основу для создания многократно используемых компонентов, делая разработку приложений модульной и простой. Она также позволяет создавать динамические страницы, с которыми пользователь может взаимодействовать, отображая, скрывая, перемещая и изменяя внешний вид контента на странице. Приложения React могут быть написаны на TypeScript: это сочетание является популярным и мощным набором инструментов для фронтенд-разработчиков.
Angular — это полноценный фреймворк, использующий TypeScript для создания своих компонентов. Он превосходит React: помимо инструментов для создания пользовательских интерфейсов, он также предоставляет фреймворк для полноценного приложения. Концептуальный подход Angular позволяет разработчикам создавать приложения быстрее, при условии, что концепция их приложения соответствует архитектуре Angular.
И React, и Angular можно использовать для создания приложений на TypeScript для Ionic и Electron. Ionic позволяет создавать мобильные приложения для iOS и Android с использованием TypeScript, а Electron позволяет встраивать веб-приложения в настольные приложения для Windows, Linux и MacOS.
Развертывание бэкендов на TypeScript на сервере
TypeScript не ограничивается разработкой фронтенд-приложений. Его также можно использовать с Node.js для разработки бэкенд-сервисов и приложений командной строки.
Вы также можете использовать TypeScript с веб-фреймворком Fastify или использовать специализированный фреймворк для TypeScript, например Nest, для создания типобезопасных API.
TypeScript и GraphQL
GraphQL — это язык запросов для поиска и извлечения данных из API. Как и TypeScript, он типизирован, поэтому обеспечивает структурированные и согласованные данные. Используя сервисы, поддерживающие GraphQL, для его реализации в бэкэнде и сопоставляя его типы с вашим кодом TypeScript, вы можете значительно повысить качество своих приложений, гарантируя, что все данные, смоделированные в ваших бэкэнд-сервисах, корректно отображаются во фронтенде, и что все данные, собранные во фронтенде, корректно сохраняются при загрузке.
Если вы используете Contentful для управления составным контентом, участники нашего сообщества создали приложения и инструменты, которые помогают генерировать объявления типов для ваших типов контента и синхронизировать TypeScript с вашей моделью контента.
