TypeScript с нуля - полный курс и паттерны проектирования

Введение

Добро пожаловать в курс «TypeScript с нуля — полный курс и паттерны проектирования». Мы начинаем путь, который превратит вас из простого пользователя JavaScript в инженера, способного проектировать надежные, масштабируемые и архитектурно правильные приложения.

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

Что такое TypeScript?

TypeScript (TS) — это язык программирования, разработанный и поддерживаемый компанией Microsoft. Если говорить техническим языком, TypeScript является строгим синтаксическим надмножеством JavaScript. Это означает, что любой валидный код на JavaScript также является валидным кодом на TypeScript (за редкими исключениями), но TypeScript добавляет поверх него новые возможности, главной из которых является статическая типизация.

!TypeScript включает в себя весь JavaScript, расширяя его новыми возможностями

Представьте, что JavaScript — это обычный автомобиль. Он едет, он популярен, но у него нет подушек безопасности, и на высокой скорости (в больших проектах) управление может стать непредсказуемым. TypeScript — это тот же автомобиль, но оснащенный современными системами безопасности, навигатором и автопилотом. Вы все еще едете по тем же дорогам (браузер или Node.js), но делаете это с гораздо большей уверенностью.

Ключевые отличия от JavaScript

Главная проблема JavaScript — это его динамическая типизация. В JS переменная может хранить число, затем строку, а потом объект. Это дает гибкость, но часто приводит к ошибкам, которые обнаруживаются только когда пользователь уже запустил программу.

Рассмотрим простой пример на JavaScript:

В этом примере JavaScript не предупредит вас об ошибке. Он просто склеит число 100 и строку "20", превратив результат в строку "10020" вместо ожидаемого числа 120. Такая ошибка может стоить бизнесу денег.

Тот же код на TypeScript:

TypeScript переносит обнаружение ошибок с этапа выполнения (Runtime) на этап написания кода или компиляции (Compile time).

Как работает TypeScript?

Важно понимать фундаментальный принцип: браузеры и Node.js не понимают TypeScript. Они умеют исполнять только JavaScript.

Поэтому TypeScript требует процесса, который называется компиляцией (или транспиляцией). Специальная программа — компилятор TypeScript (tsc) — берет ваш код с типами, проверяет его на наличие ошибок и, если все хорошо, удаляет все типы и выдает чистый JavaScript-файл.

!Компилятор преобразует TS в JS, удаляя типы и проверяя ошибки

Этот процесс гарантирует, что в продакшн попадает код, который уже прошел проверку на соответствие типов.

Зачем учить TypeScript?

Согласно современным опросам разработчиков и требованиям вакансий, TypeScript де-факто стал стандартом для разработки средних и крупных приложений. stepik.org

1. Безопасность и надежность

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

2. Улучшенный опыт разработки (DX)

Благодаря типам, редакторы кода (IDE), такие как VS Code, могут предоставлять невероятно точные подсказки. Вам не нужно помнить, какие поля есть у объекта user — редактор покажет их в выпадающем списке, как только вы поставите точку.

3. Упрощение рефакторинга

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

4. Типы как документация

Вам реже придется лезть в документацию функции или читать ее код, чтобы понять, что она принимает и что возвращает. Сигнатура функции в TS говорит сама за себя.

Структурная типизация

Одной из уникальных особенностей TypeScript является структурная типизация (в отличие от номинативной в C# или Java). Это часто называют «утиной типизацией» (Duck Typing): «Если это выглядит как утка, плавает как утка и крякает как утка, то это, вероятно, и есть утка».

В TypeScript, если два разных класса или объекта имеют одинаковую структуру (одинаковые поля и методы), они считаются совместимыми. Это делает работу с типами очень гибкой и удобной для веб-разработки.

Место паттернов проектирования в курсе

Наш курс называется «TypeScript с нуля - полный курс и паттерны проектирования». Почему мы объединили эти темы?

Знание синтаксиса языка — это только половина успеха. Чтобы писать приложения, которые легко поддерживать годами, нужно уметь правильно организовывать код. Паттерны проектирования (Design Patterns) — это проверенные временем решения типичных архитектурных проблем. purpleschool.ru

TypeScript идеально подходит для реализации паттернов ООП (объектно-ориентированного программирования) благодаря наличию: * Интерфейсов (interface) * Классов (class) с модификаторами доступа (private, protected, public) * Абстрактных классов * Дженериков (Generics)

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

План обучения

Впереди нас ждет насыщенная программа. Мы начнем с настройки окружения, затем глубоко погрузимся в систему типов — от базовых string и number до продвинутых Mapped Types и Conditional Types. Мы изучим работу компилятора, научимся писать декораторы и использовать сторонние библиотеки. Финалом станет создание собственной утилиты и разбор командного проекта.

TypeScript — это инвестиция времени, которая окупается сторицей за счет снижения количества багов и ускорения разработки в долгосрочной перспективе.

Итоги

* TypeScript — это надмножество JavaScript. Он добавляет статическую типизацию, но компилируется в обычный JavaScript для работы в браузере. * Отлов ошибок на этапе компиляции. TS позволяет находить баги до того, как код будет запущен, что экономит время и деньги. * Инструментарий. Главное преимущество TS — это мощная поддержка IDE (автодополнение, рефакторинг, навигация по коду). * Структурная типизация. TS использует гибкую систему типов, основанную на форме объектов, а не только на их именах. * Архитектура. Язык предоставляет все необходимые инструменты (интерфейсы, дженерики) для применения серьезных паттернов проектирования.

Настройка окружения

В предыдущей статье мы выяснили, что браузеры и Node.js не умеют исполнять TypeScript напрямую. Чтобы наш код заработал, его нужно превратить в JavaScript. Для этого нам потребуется подготовить рабочее место: установить компилятор, настроить конфигурацию и выбрать удобный редактор кода.

В этой статье мы создадим профессиональный шаблон проекта, который вы будете использовать на протяжении всего курса.

Фундамент: Node.js и NPM

Даже если вы не планируете писать серверный код, вам необходим Node.js. Компилятор TypeScript написан на JavaScript, и для его работы требуется среда исполнения.

Вместе с Node.js устанавливается npm (Node Package Manager) — инструмент, через который мы будем скачивать TypeScript и другие библиотеки.

Перейдите на официальный сайт nodejs.org и скачайте LTS-версию (Long Term Support). Она самая стабильная.

Установите её, следуя инструкциям установщика.

Проверьте установку, открыв терминал (командную строку) и введя команды:

Если вы увидели версии программ (например, v20.10.0), значит, фундамент заложен.

Установка TypeScript: Глобально или Локально?

Существует два способа установки TypeScript:

Глобально (на весь компьютер).

Локально (в конкретный проект).

Многие новички устанавливают TS глобально (npm install -g typescript), чтобы команда tsc была доступна везде. Мы не рекомендуем этот подход.

> Глобальная установка создает проблемы версионности. Если один ваш проект написан на TypeScript 4.5, а другой требует TypeScript 5.3, глобальный компилятор не сможет корректно обработать оба проекта одновременно.

Профессиональный стандарт — устанавливать TypeScript локально для каждого проекта. Это гарантирует, что проект всегда будет собираться с той версией компилятора, с которой он был создан, независимо от того, кто и когда его запустит.

Инициализация проекта

Создайте папку для нашего курса и откройте её в терминале:

Инициализируйте npm-проект. Флаг -y автоматически ответит «да» на все вопросы анкеты:

В папке появится файл package.json. Это паспорт вашего проекта.

Установка компилятора

Теперь установим TypeScript как зависимость для разработки (devDependencies). Это означает, что компилятор нужен нам только во время написания кода, а в финальную сборку (которая пойдет к пользователю) он не попадет.

Или сокращенная версия:

Теперь в вашем package.json появилась запись:

Конфигурация: tsconfig.json

Компилятор TypeScript (tsc) невероятно гибок. У него сотни настроек: в какую версию JS компилировать, насколько строго проверять типы, где искать файлы. Чтобы не передавать эти настройки каждый раз в командной строке, используется файл конфигурации tsconfig.json.

Чтобы создать его автоматически, выполните команду через npx (утилита для запуска локальных пакетов):

В корне проекта появится файл tsconfig.json. Давайте разберем и настроим ключевые параметры, которые нам понадобятся.

Откройте файл в редакторе кода. Вы увидите множество закомментированных опций. Найдите и приведите к следующему виду основные настройки:

Почему важен "strict": true?

Параметр "strict": true — это та самая «подушка безопасности», о которой мы говорили во введении. Он включает сразу несколько проверок, в том числе noImplicitAny (запрет на использование типа any по умолчанию) и strictNullChecks (защита от null и undefined).

!Процесс преобразования TS кода из папки src в JS код в папке dist с использованием настроек tsconfig.json

Без этой настройки TypeScript работает в «расслабленном» режиме и пропускает многие потенциальные ошибки. Обучаться стоит только в строгом режиме.

Выбор IDE: Visual Studio Code

TypeScript и Visual Studio Code (VS Code) разрабатываются одной компанией — Microsoft. Поэтому поддержка TS в этом редакторе эталонная.

Скачайте и установите code.visualstudio.com.

Откройте папку вашего проекта в VS Code.

VS Code автоматически считывает ваш tsconfig.json. Если вы допустите ошибку в коде, редактор подчеркнет её красным еще до того, как вы запустите компиляцию.

Первая программа

Давайте проверим, как работает наша система.

Создайте папку src в корне проекта (так как мы указали "rootDir": "./src").

Внутри создайте файл app.ts.

Напишем простой код:

Компиляция

Теперь нам нужно превратить этот код в JavaScript. В терминале выполните:

Если вы всё настроили правильно, ошибок не будет, а в проекте появится папка dist (согласно настройке "outDir": "./dist"). Внутри неё вы найдете файл app.js. Откройте его и посмотрите: типы исчезли, код стал чистым JavaScript.

Запуск

Запустите полученный JS-файл с помощью Node.js:

В консоли вы увидите: Hello, TypeScript!.

Ускорение разработки: ts-node

Цикл «Написал код -> Скомпилировал -> Запустил JS» утомляет при обучении. Хочется запускать TS-файл «напрямую».

Для этого существует утилита ts-node. Она компилирует код в оперативной памяти и сразу передает его в Node.js, не создавая лишних файлов на диске.

Установим её:

Теперь вы можете запускать свой код одной командой:

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

Полезные расширения для VS Code

Чтобы писать код было еще приятнее, рекомендуем установить следующие расширения (нажмите Ctrl+Shift+X в VS Code):

* ESLint — анализирует код на наличие проблем и несоответствий стилю. * Prettier - Code formatter — автоматически форматирует код при сохранении (расставляет отступы, точки с запятой). * JavaScript and TypeScript Nightly (опционально) — позволяет использовать новейшую версию TS, даже если она еще не вышла в официальный релиз (для продвинутых пользователей).

Итоги

* Локальная установка. Всегда устанавливайте TypeScript локально в проект (npm i -D typescript), чтобы избежать конфликтов версий. * tsconfig.json. Это пульт управления компилятором. Всегда используйте "strict": true для максимальной безопасности кода. * Структура проекта. Храните исходный код в src, а скомпилированный — в dist (или build). Это стандарт индустрии. * Инструменты. Используйте npx tsc для сборки проекта и npx ts-node для быстрого запуска кода в процессе разработки. * IDE. VS Code предоставляет лучшую поддержку TypeScript «из коробки».