Бесплатный курс по TypeScript. Зарегистрируйтесь для отслеживания прогресса →

TypeScript: TypeScript

TypeScript на нашем проекте дается как «второй язык» — это значит, что мы подразумеваем определенный багаж знаний у тех, кто учится ему здесь. В первую очередь это владение JavaScript или другим языком программирования. Для понимания материала курса нужно иметь представление о типах данных, переменных, условных конструкциях, циклах, функциях, объектах (свойствах и методах) и лямбда-функциях (анонимных функциях).

Изучение второго языка значительно проще первого, поэтому и структура материала сильно меняется. Здесь мы обзорно касаемся базовых конструкций для быстрого знакомства с синтаксисом, и переходим к интересным задачкам, ради которых, собственно, и изучается TypeScript.

В чём соль?

TypeScript это JavaScript с дополнительным синтаксисом для указания типов данных. Он дает три основных преимущества:

  1. Нахождение некоторых видов ошибок еще до запуска кода
  2. Более простой рефакторинг кода
  3. Полную поддержку возможностей редактора: автодополнения, навигации по коду и т.п.

За счет чего появляются эти возможности? В программировании языки делятся на две большие группы: динамически типизированные и статически типизированные. JavaScript относится к первой группе. У таких языков есть интерпретатор, программа, которая выполняет код построчно без предварительного анализа:

# node (Node.js) - интерпретатор JavaScript
# Код сразу запускается на исполнение
node index.js

Если в таком коде есть ошибки типов, например в функцию вместо числа пришел null, то об ошибке мы узнаем только во время запуска кода, например:

function sum(a, b) {
  return a + b;
}

sum(null, 5); // упс

Статически типизированные, к которым относится TypeScript, языки работают по другому. Перед тем как запустить код этих языков на выполнение, его нужно скомпилировать. Во время компиляции проверяется, что программа типобезопасна, то есть она не содержит ошибок подобных примеру выше. Если компилятор нашел не соответствие типов, то он останавливает компиляцию и выводит предупреждения о том, где типы не сходятся. Тот же пример на TypeScript:

function sum(a: number, b: number) {
  return a + b;
}

sum(null, 5);
// Возникнет ошибка на этапе компиляции
// Argument of type 'null' is not assignable to parameter of type 'number'.

Код выше не только не запустится на исполнение, он даже не пройдет компиляцию. Компилятор TypeScript остановит выполнение и укажет на ошибку не соответствия типов.

Посмотрите на определение функции. Перед нами практически то же JavaScript, за исключением описания типов входных переменных функции. Там указано, что параметры a и b имеют тип number. Примерно таким же образом аннотируется типами и весь остальной код на TypeScript. Местами описания типов могут быть очень сложными, но сама идея остается прежней.

Какие языки лучше?

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

Особенности TypeScript

Фронтенд-приложения достаточно давно стали достигать огромных размеров с командами в десятки, а то и сотни разработчиков. В таких условиях был необходим статически типизированный язык. И таких языков было много, но только TypeScript смог набрать огромную популярность. За счет чего?

TypeScript практически полностью совместим с JavaScript с точки зрения возможностей и типов. Все что есть в TypeScript есть и в JavaScript и наоборот. TypeScript называют надмножеством* языка JavaScript, то есть это тот же JavaScript + описание типов.

Более того, компилятор TypeScript превращает его код в код на JavaScript. Грубо говоря он удаляет определения типов из кода на TypeScript. Этот процесс еще принято называть транспиляцией.

Ну и последнее, разработчик TypeScript это Microsoft :)

Строгая типизация

Еще одна особенность TypeScript это строгая типизация. Строгая типизация не связана со статической, она лишь говорит о том, насколько язык допускает автоматические преобразования типов. То есть статический язык может быть нестрогим и наоборот. Как это проявляется?

В JavaScript мы можем сложить число со строкой. 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, который затем транспилируется в 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.

Задание

По образу и подобию примера с суммой из урока, напишите функцию, которая находит произведение переданных чисел

multi(3, 8); // 24
multi(1, 2); // 2
Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.
В моей среде код работает, а здесь нет 🤨

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе