Глава 37. TypeScript для React: типы, props, события

Зачем эта глава

TypeScript помогает находить ошибки раньше и делает код понятнее. Сейчас это стандарт в коммерческой разработке.

Типизация props

TSX

type UserCardProps = {
  name: string;
  role: string;
};

function UserCard({ name, role }: UserCardProps) {
  return <div>{name} — {role}</div>;
}

Типизация событий

TSX

function Input() {
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    console.log(e.target.value);
  };
  return <input onChange={handleChange} />;
}

Подсказка: начинай с типизации props и данных, остальное придёт постепенно.

Задания

Задание: типы

Создай тип для товара.
Передай тип в компонент.
Добавь тип для события input.

← Предыдущая Следующая глава →