Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

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
Рекомендуемые программы
профессия
Осваивайте разработку веб-страниц, оживляйте дизайн макетов, публикуйте сайты и приложения. Отслеживайте ошибки в интерфейсе и устраняйте их
10 месяцев
с нуля
Старт 21 ноября
профессия
Обучитесь разработке визуальной части сайта — фронтенда, а также реализации серверной — бэкенда. Освойте HTML, CSS, JavaScript
16 месяцев
с нуля
Старт 21 ноября
профессия
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 21 ноября

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

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

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

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