Этап 7 из 19 · ≈ 10 ч

TypeScript

Основа с Junior

JavaScript со статическими типами — стандарт для коммерческой фронтенд-разработки.

TypeScript добавляет к JavaScript типы, которые проверяются при сборке и стираются в итоговом коде. Ошибки вида «undefined is not a function» ловятся до запуска, редактор подсказывает поля и методы, рефакторинг становится безопасным.

type Order = { id: number; status: "new" | "paid" | "shipped"; total?: number };

function label(o: Order): string {
  switch (o.status) {
    case "new": return "Новый";
    case "paid": return "Оплачен";
    case "shipped": return "Отправлен";
  }
}

Что важно знать

  • Структурная типизация: совместимость по форме, а не по имени типа.
  • Объединения (|), литеральные типы, сужение через typeof, in, проверку поля-дискриминатора.
  • unknown вместо any: значение нужно проверить перед использованием.
  • Дженерики: function first<T>(xs: T[]): T | undefined.
  • Утилиты: Partial, Pick, Omit, Record, ReturnType.
  • interface и type почти взаимозаменяемы; interface расширяется объявлением, type умеет объединения и вычисляемые типы.
  • strict: true в tsconfig — обязательно.
  • Типы не проверяют данные в рантайме: ответ сервера валидируют (Zod, Valibot).

Критерии освоения

Junior ≈ 10 ч

  • Типизирует функции, объекты и пропсы, использует объединения и сужение типов
  • Использует unknown вместо any и включает strict

Практика. Перевести учебный JS-проект на TypeScript в режиме strict без any.

Middle ≈ 10 ч

  • Пишет дженерики и использует утилитарные типы
  • Описывает дискриминированные объединения для состояний (загрузка, успех, ошибка)
  • Валидирует данные с сервера схемой (Zod) и выводит из неё типы

Практика. Типизировать слой API — дженерик-клиент, схемы Zod для ответов, дискриминированные объединения для состояний запросов.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Зачем нужен TypeScript и чем any отличается от unknown?Junior

TypeScript добавляет к JavaScript статические типы, которые проверяются при компиляции и стираются в итоговом JS. Польза: ошибки до запуска, автодополнение, безопасный рефакторинг, типы как документация. any отключает проверку; unknown — «что угодно», но…

Полный разбор
Чем interface отличается от type в TypeScript и что такое утилитарные типы?Junior

Оба описывают форму объекта. interface — расширяется через extends и сливается при повторном объявлении (удобно для расширения чужих типов). type — умеет больше: объединения, пересечения, кортежи, условные и сопоставленные типы. Утилиты строят новые типы из…

Полный разбор
Что такое дженерики в TypeScript и зачем они нужны?Junior

Дженерик — параметр типа: функция или тип работает с разными типами, сохраняя связь между входом и выходом. function first<T>(xs: T[]): T | undefined — для string[] вернёт string, для User[] — User. Без дженерика пришлось бы писать any и терять проверку…

Полный разбор
Что такое сужение типов в TypeScript?Junior

Если переменная имеет тип-объединение (string | number, User | null), TypeScript позволяет использовать только общее. Проверка внутри кода сужает тип в ветке: typeof (примитивы), instanceof (классы), in (наличие свойства), сравнение с null, дискриминант…

Полный разбор
Как типизировать props и состояние React-компонента в TypeScript?Junior

Props описывают типом или интерфейсом и указывают в параметре: function Button({ label, onClick }: ButtonProps). Необязательные — ?, значения по умолчанию — в деструктуризации. children — React.ReactNode. Колбэки — сигнатурой: onSelect: (id: string) => void…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования