‌

21 - Typescript in React for beginners tutorial 01

Оценить качество материала и подачу материала автором видео:

Front-end

Трудоустройтесь middle front-end разработчиком на React JS (TypeScript) за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Front-end

Back-end

Трудоустройтесь middle back-end разработчиком за 12-16 месяцев обучения с ежедневной менторской поддержкой в формате видео 1 на 1 и коммерческими проектами в портфолио

Перейти на курс
Back-end

Карьерный бустер

Получите коммерческий опыт на реальных стартапах, прокачайте tech & soft навыки, научитесь работать в команде, проходить собеседования и получите первую работу в IT!

Перейти на курс
Карьерный бустер

Основы Front-end

Сделайте первый шаг в IT, освоив базовые знания разработки и научившись создавать небольшие проекты на JavaScript

Перейти на курс
Основы Front-end

Основы Back-end

Сделайте первый шаг в IT, освоив базовые знания разработки. Без опыта. Без математики. Только практика: JavaScript, SQL, Node JS, база данных

Перейти на курс
Основы Back-end

TypeScript и React

Автор конспекта: Стогниева Виктория

💡 Введение

TypeScript помогает нам, разработчикам, совершать меньше ошибок, писать стабильнее и быстрее. В этом уроке мы переносим базовые знания TypeScript в React-приложение.

1. Как найти все ошибки типизации в проекте

IDE-подсветка (пример: WebStorm)

  • IDE анализирует код в реальном времени и подсвечивает ошибки в редактируемых файлах.
  • Удобно «на лету», но можно пропустить ошибки в неоткрытых файлах или в зависимостях.

Полная проверка компилятором

Надёжный способ — прогнать весь проект через tsc:

bash
npm run build
💡

Команда заставляет TypeScript проверить каждый файл и вывести полный список ошибок. Используйте этот метод, чтобы получить исчерпывающую картину. Сначала находим всё (npm run build), потом исправляем — от состояния к пропсам.

💬 TypeScript компилирует .ts и .tsx → в .js файлы, а сборщик делает минификацию и бандл.

2. Типизация состояния (State) 🧩

Проблема:

TypeScript сообщает, что параметр trackId имеет тип any.

Решение:

Определяем тип явно:

ts
const [trackId, setTrackId] = useState<string | null>(null)
 
const handleTrackSelect = (id: string | null) => {
  setTrackId(id)
}
💡

Используем объединение типов ( string | null), если значение может быть либо строкой, либо отсутствовать. Внутри компонента TrackList используем кнопку reset, которая сбрасывает выбор треков и передает null.

Сложные данные из API (массивы объектов)

Типизируем только используемые поля — это практично и экономит время.

TrackList.tsx
// Экспортируем тип, чтобы переиспользовать в других компонентах
export type TrackListItemOutput = {
  id: string
}
 
// Состояние: до загрузки — null, после — массив треков
const [tracks, setTracks] = useState<Array<TracklistItemOutput> | null>(null)
 
const handleClick = (trackId: string) => {
  onTrackSelect?.(trackId)
}

Для типизации используем Schema из Swager-документации. SwagerSchema

TrackDetail.tsx
type GetTrackDetailsOutputData = {
  id: string
  attributes: {
    title: string
    lyrics: string | null
  }
}
 
export function TrackDetail({ trackId }) {
  const [selectedTrack, setSelectedTrack] = useState<GetTrackDetailsOutputData | null>(null)
  // ...логика компонента
  return
}
⚖️

Типизируйте ровно то, что применяется в UI/логике. Описание «всего ответа API» — дорого и хрупко.

3. Типизация пропсов (Props) — «контракт» между компонентами

Создание типа Props и применение в компоненте

TrackList.tsx
type Props = {
  selectedTrackId: string | null
  onTrackSelect: (id: string | null) => void
}
 
export function TrackList({ selectedTrackId, onTrackSelect }: Props) {
  // ...логика компонента
  return null
}
TrackDetail.tsx
type Props = {
  trackId: string | null
}
 
export function TrackDetail({ trackId }: Props) {
  // ...логика компонента
  return
}
TrackItem.tsx
type AttachmentDto = {
  url: string
}
 
type TrackListItemOutputAttributes = {
    title: string
    attachments: Array<AttachmentDto>
}
 
export type TrackListItemOutput = {
    id: string
    attributes: TrackListItemOutputAttributes
}
 
type Props = {
  isSelect: boolean
  onSelect: (trackId: string) => void
  track: TrackListItemOutput
};
 
export function TrackItem({ onSelect, track, isSelected }) {
  const handleClick = () => onSelect?.(track.id);
 
  return (
    <li key={track.id} style={{
      border: isSelected ? '1px solid orange' : 'none'
    }}>
      <div onClick={handleClick}>
        {track.attributes.title}
      </div>
      <audio src={track.attributes.attachments[0].url} controls></audio>
    </li>
  );
}

Данные и колбэки — разные категории

Тип пропаПримерКлючевая идея
ДанныеselectedTrackId: string | nullОписывает входные данные, необходимые компоненту для корректного рендера.
Функция/колбэкonTrackSelect: (id: string | null) => voidОписывает сигнатуру взаимодействия (аргументы и void как отсутствие возврата).

Точность типов = предсказуемость

Компонент TrackItem сообщает только факт выбора конкретного трека — сбрасывать выбор он не может. Значит, его колбэк должен принимать строго string, а не string | null:

💡

Узкие, точные типы формируют чёткий контракт и предотвращают ложные ожидания от компонента.

4. Ключевые выводы

  • 🧩 TypeScript — помощник, а не обуза. Он делает разработку безопаснее, ловя ошибки раньше, чем они попадают в браузер.
  • 🧱 Явное лучше неявного. Всегда явно указывайте типы для useState и props.
  • Пропсы = контракт. Относитесь к типам пропсов как к официальному договору: что компонент принимает и как с ним взаимодействовать.
  • 📜Типизируйте по назначению. Состояние, пропсы, колбэки и данные из API — всё должно иметь чёткие, точные типы.

🏠 Домашнее задание

Цель задания: Исправить все Typescript ошибки в приложении

По аналогии как в видео необходимо доработать основное приложение trelly, над которым мы закончили работать в 19 домашнем задании

Для того чтобы найти все Typescript ошибки в приложении запустите в терминале команду npm run build

Задание 1

Устрани ошибки типизации в компоненте MainPage.tsx

  • протипизируй useState
  • протипизируй handler функции

Задание 2

Устрани ошибки типизации в компоненте TasksList.tsx

  • протипизируй props
  • протипизируй useState
💡

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

  • В домашнем задании для тренировки и понимания TS, протипизируй весь ответ целиком согласно документации

💡
  • При написании типизации ты заметишь что типизация занимает много строчек кода и восприятие компонента ухудшается. Поэтому при реальной разработке типы пришедшие с сервера выносятся в другие файлы. Димыч покажет как декомпозировать приложение в следующем уроке
💡

  • Название для типов можешь брать из swagger документации, а можешь и сам придумывать. Пиши как тебе понятнее

  • При реальной разработке,как правило, Typе в конце типа не пишется (❌ UserType, ✅ User) . Димыч показывает это в первую очередь в обучающих целях, чтобы на начальном этапе ты не путался. Но если и так понятно тогда можешь не писать Typе в конце

Задание 3

Устрани ошибки типизации в компоненте TaskDetails.tsx

  • протипизируй props
  • протипизируй useState
💡

  • Протипизируй весь ответ целиком согласно документации

  • на первый взгляд может показаться что тип детальной таски такой же как и при поучении всех тасок и захочется его переиспользовать. Рекомендуем не спешить с этим и сделать 2 отдельных типа. В дальнейшем обязательно решим и эту проблему

Задание 4

Устрани ошибки типизации в компоненте TaskItem.tsx

  • протипизируйте props
  • протипизируй handler функцию
💡

Вынеси в TaskItem.tsx тип для таски, чтобы не возникли циклической зависимости. Typescript достаточно умный и сам решит проблемы связанные с зависимостями, но тем не менее давай не будем усложнять ему и себе жизнь

Итоговый результат 🚀 все Typescript ошибки в проекте устранены

💡

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

🔶 Думай как компилятор: когда пишешь интерфейс или тип, представь все возможные сценарии его использования. Хороший тип делает невозможным неправильное использование кода. Это контракт между тобой и будущим программистом.

🔶 Удачи, самурай! Освоив TypeScript, ты перейдешь от "работает на моей машине" к "работает везде и всегда". Строгая типизация — это суперсила, которая отличает профессионала от любителя. 🥷⚡

Боевой маршрут (React Путь Самурая: без альтернатив)

Видеоурок - 23 видео из 30