TypeScript: TypeScript
TypeScript на нашем проекте дается как второй язык. Поэтому чтобы лучше понимать материал курса, стоит владеть JavaScript.
Также нужно иметь представление о типах данных, переменных, условных конструкциях, циклах, функциях, свойствах и методах объектов и анонимных либо лямбда-функциях.
Изучать второй язык проще первого, поэтому и структура материала сильно меняется. Здесь мы обзорно касаемся базовых конструкций, чтобы быстро познакомиться с синтаксисом. Далее переходим к задачам, ради которых и изучается TypeScript.
В этом уроке мы узнаем, что такое TypeScript, а также разберем его особенности, установку и запуск.
Что такое TypeScript
TypeScript — это JavaScript с дополнительным синтаксисом для указания типов данных. Первый относится к статически типизированным языкам, второй — к динамически типизированным.
Чтобы подробнее познакомиться с TypeScript, сравним его с JavaScript.
У динамически типизированных языков по типу JavaScript есть интерпретатор — программа, которая выполняет код построчно без предварительного анализа:
# node (Node.js) — интерпретатор JavaScript
# Код сразу запускается на исполнение
node index.js
Если в таком коде есть ошибки типов, например, в функцию вместо обычного числа пришло число типа BigInt, то об ошибке мы узнаем только во время запуска кода:
function sum(a, b) {
return a + b;
}
sum(10n, 5); // упс
// 10n — число типа BigInt, при сложении с обычным числом возникнет ошибка в рантайме
// Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
Статически типизированные языки по типу TypeScript работают по-другому. У них есть ряд преимуществ:
- Нахождение некоторых видов ошибок еще до запуска кода
- Более простой рефакторинг кода
- Полная поддержка возможностей редактора: автодополнения, навигации по коду и прочее
Перед запуском кода в TypeScript на выполнение его нужно скомпилировать.
Во время компиляции проверяется, что программа типобезопасна — не содержит ошибок, подобных примеру выше. Если компилятор нашел несоответствие типов, то он останавливает компиляцию и выводит предупреждения о том, где типы не сходятся.
Тот же пример на TypeScript:
function sum(a: number, b: number) {
return a + b;
}
sum(10n, 5);
// Возникнет ошибка на этапе компиляции
// Argument of type 'bigint' is not assignable to parameter of type 'number'.
Код выше не только не запустится на исполнение, но и не пройдет компиляцию. Компилятор TypeScript остановит выполнение и укажет на ошибку несоответствия типов.
Если посмотреть на определение функции, то можно увидеть, что перед нами практически тот же JavaScript, за исключением описания типов входных переменных функции. Там указано, что у параметров a и b тип number. Примерно так же аннотируется типами и остальной код на TypeScript. Местами описания типов могут быть очень сложными, но сама идея остается прежней.
Нельзя сказать однозначно, какой подход лучше — статическая или динамическая типизация. Всё зависит от конкретной ситуации, а успешные проекты могут быть на разных языках. Так как на этом курсе мы изучаем TypeScript, разберем особенности работы с ним.
Какие особенности у TypeScript
TypeScript стал одним из самых популярных типизированных языков благодаря следующим особенностям:
- TypeScript практически полностью совместим с JavaScript с точки зрения возможностей и типов. Всё, что есть в TypeScript, есть и в JavaScript, и наоборот. TypeScript называют надмножеством языка JavaScript. То есть это тот же JavaScript + описание типов
- Компилятор TypeScript превращает его код в код на JavaScript. То есть он удаляет определения типов из кода на TypeScript. Этот процесс еще принято называть транспиляцией
- Разработчик TypeScript — Microsoft
- Строгая типизация
Последнюю особенность разберем подробнее.
Строгая типизация
Строгая типизация не связана со статической. Она говорит о том, насколько язык допускает автоматические преобразования типов. То есть статический язык может быть нестрогим, и наоборот.
Например, в JavaScript мы можем сложить число со строкой. Когда язык встречает такую конструкцию, он автоматически выполнит преобразование типов: 10 + 'one'. В TypeScript так не получится. Он выдаст ошибку: The right-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
Многие динамические языки строго типизированы. Например, к ним относятся Ruby и Python. Строгая типизация делает язык только лучше и не усложняет процесс программирования.
Мы разобрали преимущества и особенности TypeScript. Теперь можно научиться его устанавливать.
Как устанавливать и запускать TypeScript
Сам TypeScript написан на TypeScript, который затем транспилируется в JavaScript и распространяется как обычный npm-пакет. Поэтому установка TypeScript предельно простая:
# Должна быть установлена Node.js
# Внутри проекта, где будет использоваться TypeScript
npm install typescript
Затем нужно создать файлы с кодом на TypeScript. Они имеют расширение ts. Компилятор TypeScript доступен через утилиту tsc:
npx tsc index.ts
На выходе получается файл с JavaScript кодом, который уже можно запускать с помощью Node.js:
node index.js
Также можно поставить пакет ts-node, который выполняет одновременно компиляцию и запуск. Этот пакет предоставляет репл для экспериментов с TypeScript.
Выводы
В этом уроке мы познакомились с языком TypeScript. Мы узнали, что это тот же JavaScript, но с дополнительным синтаксисом для указания типов данных. По сравнению с JavaScript у TypeScript есть ряд преимуществ:
- Нахождение некоторых видов ошибок еще до запуска кода
- Более простой рефакторинг кода
- Полная поддержка возможностей редактора: автодополнения, навигации по коду и прочее
При этом нельзя сказать, какой из языков лучше. Всё зависит от конкретной задачи и особенности языка.
С особенностями TypeScript мы также познакомились в этом уроке, а еще научились его устанавливать и запускать.
Задание
По образцу примера с суммой из урока напишите функцию, которая находит произведение переданных чисел:
multiply(3, 8); // 24
multiply(1, 2); // 2
Упражнение не проходит проверку — что делать? 😶
Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:
- Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨
Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.
Мой код отличается от решения учителя 🤔
Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.
В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.
Прочитал урок — ничего не понятно 🙄
Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.
Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.