Зарегистрируйтесь, чтобы продолжить обучение

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 стал одним из самых популярных типизированных языков, потому что:

  • Его разработала компания Microsoft
  • Он почти полностью совместим с JavaScript с точки зрения возможностей и типов — другими словами, это «JavaScript с описанием типов» или «надмножество языка JavaScript»
  • Его компилятор поддерживает транспиляцию — умеет превращать 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

Сам 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, который выполняет одновременно компиляцию и запуск. Этот пакет предоставляет REPL для экспериментов с TypeScript.

В этом уроке мы познакомились с языком TypeScript. Мы узнали, что это тот же JavaScript, но с дополнительным синтаксисом для указания типов данных.

При этом нельзя сказать, какой из языков лучше. Всё зависит от конкретной задачи и особенности языка.

С особенностями TypeScript мы также познакомились в этом уроке, а еще научились его устанавливать и запускать.


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React
10 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript в браузере и на сервере (Node.js), разработка бекендов на Fastify и фронтенда на React
16 месяцев
с нуля
Старт 26 декабря
профессия
Программирование на JavaScript, разработка веб-приложений, bff и сервисов используя Fastify, проектирование REST API
10 месяцев
с нуля
Старт 26 декабря

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»