1. Основы TypeScript: установка, настройка окружения и базовые типы данных
Основы TypeScript: установка, настройка окружения и базовые типы данных
Добро пожаловать в курс «Полное руководство по TypeScript». В этой первой статье мы заложим фундамент вашего понимания этого мощного языка. Мы разберем, как подготовить рабочее место, напишем первую программу и погрузимся в систему типов, которая делает TypeScript таким популярным инструментом в современной веб-разработке.
Что такое TypeScript и зачем он нужен?
TypeScript — это язык программирования, разработанный Microsoft. Часто его называют «надмножеством» (superset) JavaScript. Это означает, что любой валидный код на JavaScript также является валидным кодом на TypeScript. Однако TypeScript добавляет то, чего так не хватает в чистом JS — статическую типизацию.
Главное преимущество TypeScript заключается в том, что он позволяет находить ошибки еще на этапе написания кода, а не во время его выполнения в браузере пользователя. Это значительно повышает надежность приложений и упрощает поддержку больших проектов.
Установка и настройка окружения
Прежде чем писать код, нам необходимо установить инструменты. TypeScript не выполняется браузером напрямую; он должен быть скомпилирован (транслирован) в обычный JavaScript. Для этого нам понадобится компилятор.
Шаг 1: Установка Node.js
Для работы с инструментами TypeScript вам потребуется Node.js. Если он у вас еще не установлен, скачайте LTS-версию с официального сайта.
Шаг 2: Установка компилятора TypeScript
После установки Node.js откройте терминал (командную строку) и выполните следующую команду для глобальной установки TypeScript:
Эта команда использует пакетный менеджер npm для скачивания и установки компилятора tsc (TypeScript Compiler) в вашу систему.
Чтобы проверить, что установка прошла успешно, введите:
Вы должны увидеть номер установленной версии, например, Version 5.3.3.
Шаг 3: Настройка проекта
Создайте новую папку для вашего проекта и откройте её в терминале. Хорошей практикой является создание файла конфигурации tsconfig.json. Этот файл сообщает компилятору, как именно нужно обрабатывать ваш код.
Выполните команду:
В вашей папке появится файл tsconfig.json. Давайте рассмотрим несколько ключевых настроек, которые вы можете там найти или изменить:
* target: Определяет версию JavaScript, в которую будет скомпилирован ваш код (например, es6 или es2016).
* module: Указывает систему модулей (например, commonjs для Node.js).
* strict: Включает строгий режим проверки типов. Рекомендуется всегда держать эту опцию включенной (true), чтобы извлечь максимум пользы из TypeScript.
* outDir: Папка, куда будут складываться скомпилированные .js файлы.
Ваша первая программа
Создайте файл с названием index.ts. Обратите внимание на расширение .ts — оно используется для файлов TypeScript.
Напишем простой код:
Здесь мы явно указали, что переменная message должна быть строкой (: string).
Чтобы запустить этот код, нам нужно сначала скомпилировать его. Введите в терминале:
После выполнения команды в папке появится файл index.js. Это обычный JavaScript, который можно запустить с помощью Node.js:
В консоли вы увидите: Привет, мир TypeScript!.
Базовые типы данных
Система типов — это сердце TypeScript. Она позволяет описывать форму данных и гарантировать, что вы не попытаетесь, например, умножить строку на объект. Рассмотрим основные примитивы.
Boolean (Логический тип)
Самый простой тип данных, который имеет всего два значения: true (истина) или false (ложь).
Number (Числовой тип)
В TypeScript, как и в JavaScript, все числа являются числами с плавающей точкой. Тип number используется как для целых, так и для дробных чисел. Также поддерживаются шестнадцатеричные, двоичные и восьмеричные литералы.
String (Строковый тип)
Тип string используется для работы с текстовыми данными. Вы можете использовать двойные кавычки ", одинарные ' или обратные кавычки ` ` для шаблонных строк.
Array (Массив)
Массивы можно типизировать двумя способами. Первый — использование типа элементов, за которым следуют квадратные скобки [].
Второй способ — использование обобщенного типа (Generics) Array<type>:
Оба способа идентичны по функциональности, выбор зависит от стиля кода вашей команды.
Tuple (Кортеж)
Кортеж позволяет выразить массив с фиксированным количеством элементов, типы которых известны, но не обязательно одинаковы. Это полезно, когда вам нужно вернуть несколько значений из функции или описать структуру данных строгого формата.
Enum (Перечисление)
Enum — это способ дать более дружелюбные имена наборам числовых значений. По умолчанию перечисления начинают нумерацию с 0.
Вы также можете вручную задать значения:
Any (Любой тип)
Иногда нам неизвестен тип переменной, особенно если данные приходят от пользователя или сторонних библиотек. В таких случаях можно использовать тип any.
Важно: Используйте any только в крайних случаях. Чрезмерное использование any лишает вас преимуществ TypeScript, превращая код обратно в нетипизированный JavaScript.
Void, Null и Undefined
* void: Обычно используется как возвращаемый тип функций, которые ничего не возвращают.
* null и undefined: В TypeScript это отдельные типы, которые имеют одноименные значения. По умолчанию они являются подтипами всех других типов (если не включена опция strictNullChecks), но лучше использовать их явно.
Вывод типов (Type Inference)
TypeScript достаточно умен. Вам не всегда нужно явно указывать тип переменной. Если вы объявляете переменную и сразу присваиваете ей значение, TypeScript автоматически определит её тип.
Это называется выводом типов. Хорошей практикой считается позволять компилятору выводить типы там, где это очевидно, чтобы код оставался чистым и читаемым.
Заключение
Мы успешно установили окружение, настроили tsconfig.json и разобрали фундаментальные строительные блоки TypeScript — базовые типы данных. Понимание разницы между Array и Tuple, умение работать с Enum и знание того, когда избегать any`, — это первый шаг к написанию надежного кода.
В следующей статье мы углубимся в более сложные концепции, такие как интерфейсы и типизация функций, которые позволят вам описывать сложные структуры данных вашего приложения.