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

Введение, Настройка окружения и Основные типы

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

Главная проблема JavaScript — динамическая типизация. Ошибки, связанные с типами (например, попытка вызвать метод у undefined), обнаруживаются только во время выполнения программы, когда пользователь уже взаимодействует с интерфейсом. TypeScript решает эту проблему, проверяя код на этапе компиляции.

!TypeScript является надмножеством JavaScript

Ключевые преимущества

* Статическая типизация: Ошибки выявляются при написании кода, а не в браузере. * Улучшенный инструментарий: Автодополнение (IntelliSense), навигация по коду и безопасный рефакторинг. * Читаемость: Типы служат документацией, которая никогда не устаревает. * Транспиляция: Браузеры не понимают TypeScript. Код должен быть скомпилирован (транспилирован) в обычный JavaScript. Это позволяет использовать самые новые фичи языка, компилируя их в старые версии стандарта (например, ES5) для поддержки старых браузеров.

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

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

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

Создайте папку для проекта и откройте терминал. Инициализируйте package.json:

2. Установка TypeScript

Рекомендуется устанавливать TypeScript локально для каждого проекта, чтобы избежать конфликтов версий. Используйте флаг --save-dev (или -D), так как компилятор нужен только на этапе разработки.

3. Конфигурация компилятора

Поведение компилятора управляется файлом tsconfig.json. Для его автоматического создания выполните:

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

4. Запуск первого скрипта

Создайте папку src и файл src/index.ts:

Для компиляции выполните команду:

После этого в папке dist появится файл index.js, который можно запустить через Node.js:

!Браузеры исполняют только JavaScript, поэтому TypeScript требует этапа компиляции

Основные типы данных

В TypeScript тип указывается после названия переменной через двоеточие. Это называется аннотацией типа.

Примитивные типы

TypeScript поддерживает все примитивы JavaScript:

* number: Для любых чисел (целых и с плавающей точкой). * string: Для строк (одинарные, двойные кавычки и шаблоны). * boolean: Значения true или false.

Массивы (Arrays)

Существует два способа типизации массивов:

Использование квадратных скобок [].

Использование обобщенного типа Array<type>.

Кортежи (Tuples)

Кортеж — это массив фиксированной длины, где известен тип каждого элемента на конкретной позиции. Это полезно, например, для хранения пары "ключ-значение".

Enum (Перечисления)

enum позволяет определить набор именованных констант. Это упрощает чтение кода. По умолчанию элементы нумеруются с нуля.

Вы можете задать значения вручную (в том числе строковые):

Any

Тип any отключает проверку типов для переменной. Это "путь отступления" при миграции JS-кода на TS. Использовать его в новом коде не рекомендуется, так как он убивает смысл использования TypeScript.

Unknown

unknown — это безопасный аналог any. Вы можете присвоить переменной unknown любое значение, но не можете использовать её методы или присваивать её другим переменным без предварительной проверки типа (сужения типа).

Void

Используется обычно как возвращаемый тип функций, которые не возвращают значения.

Null и Undefined

В TypeScript null и undefined имеют свои собственные типы. Если включена опция strictNullChecks (внутри strict: true), вы не можете присвоить null переменной с типом number или string.

Never

Тип never представляет значения, которые никогда не могут произойти. Например, функция, которая всегда выбрасывает ошибку или имеет бесконечный цикл.

Вывод типов (Type Inference)

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

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

Итоги

* TypeScript — это надмножество JavaScript, добавляющее статическую типизацию и требующее компиляции. * Настройка проекта выполняется через tsconfig.json, где задаются параметры строгости и пути к файлам. * Основные типы включают примитивы (number, string, boolean), коллекции (Array, Tuple) и специальные типы (Enum, any, unknown, void, never). * Избегайте any, предпочитая ему unknown или конкретные типы для сохранения безопасности кода.

Продвинутые типы, Классы и Компилятор TypeScript

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

1. Продвинутые типы (Advanced Types)

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

Объединение типов (Union Types)

Объединение позволяет переменной хранить значение одного из нескольких типов. Это аналог логического «ИЛИ».

Математически это можно выразить как объединение множеств:

где — результирующий тип, — множество значений первого типа, — множество значений второго типа, — оператор объединения.

В коде используется символ вертикальной черты |:

Пересечение типов (Intersection Types)

Пересечение позволяет объединить несколько типов в один. Объект такого типа должен содержать все поля объединяемых типов. Это аналог логического «И».

где — результирующий тип, и — исходные типы, — оператор пересечения (значение должно удовлетворять обоим контрактам).

В коде используется амперсанд &:

Псевдонимы типов (Type Aliases)

Ключевое слово type позволяет создавать собственные имена для любых типов, включая примитивы, объединения и пересечения. Это улучшает читаемость кода.

Сужение типов (Type Narrowing)

Когда переменная имеет тип string | number, TypeScript не позволит использовать методы строк (например, toLowerCase), так как там может оказаться число. Необходимо «сузить» тип с помощью проверок.

Type Guards (Защитники типа):

typeof: Для примитивов.

instanceof: Для классов.

Array.isArray: Для массивов.

2. Классы в TypeScript

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

!Наследование и инкапсуляция: класс Car расширяет возможности Vehicle

Поля и конструктор

В отличие от чистого JS, в TS необходимо объявлять поля класса заранее или в конструкторе.

Модификаторы доступа

TypeScript предоставляет три уровня доступа к свойствам и методам, что позволяет реализовать принцип инкапсуляции:

public (по умолчанию): Доступно везде.

private: Доступно только внутри самого класса. Попытка обратиться снаружи вызовет ошибку компиляции.

protected: Доступно внутри класса и в классах-наследниках.

Модификатор readonly

Позволяет создавать свойства, которые можно записать только в момент объявления или в конструкторе. После этого их значение изменить нельзя.

Абстрактные классы

Абстрактный класс служит базой для других классов. Создать экземпляр такого класса нельзя (new AbstractClass() вызовет ошибку). Он может содержать абстрактные методы — методы без реализации, которые обязаны реализовать наследники.

Формула площади круга:

где — площадь, — математическая константа Пи, — радиус круга.

3. Компилятор TypeScript (tsc)

Браузеры и Node.js не умеют исполнять TypeScript напрямую. Код должен быть скомпилирован в JavaScript. Этим управляет файл tsconfig.json.

Основные настройки

Файл конфигурации создается командой npx tsc --init. Рассмотрим критически важные опции:

* target: Версия стандарта ECMAScript, в которую будет скомпилирован код (например, ES5, ES2016, ESNext). Если выбрать ES5, то стрелочные функции превратятся в function, а классы — в функции-конструкторы для совместимости со старыми браузерами. * module: Система модулей (например, CommonJS для Node.js или ESNext для современных сборщиков). * outDir: Папка, куда будут помещены скомпилированные .js файлы (обычно ./dist или ./build). * rootDir: Папка, где лежат исходные .ts файлы (обычно ./src).

Строгий режим (Strict Mode)

Опция "strict": true включает набор проверок, которые делают код максимально безопасным. Рекомендуется всегда держать её включенной.

Она активирует: * noImplicitAny: Запрещает переменные с типом any, если тип не указан явно и не может быть выведен. * strictNullChecks: Запрещает присваивать null или undefined переменным других типов (например, string).

Пример влияния strictNullChecks:

Чтобы исправить ошибку, нужно проверить наличие значения:

Итоги

Продвинутые типы: Используйте Union (|) для вариативности и Intersection (&) для объединения структур. Type Guards (typeof, instanceof) необходимы для безопасной работы с объединениями.

Классы: TypeScript добавляет модификаторы доступа (private, protected, public) и абстрактные классы, позволяя строить строгую архитектуру приложения.

Компилятор: tsconfig.json управляет тем, как ваш TS код превращается в JS. Всегда используйте "strict": true для максимальной надежности кода.