Як ставитесь до типізації разом з React?

Повне пояснення

Що це і навіщо

• Типізація в React — застосування статичної типізації (наприклад, TypeScript) до компонентів, пропсів, стану і контексту. Це допомагає виявляти помилки ще на етапі компіляції, покращує автодоповнення і документацію.

Ключові принципи

• Props типізуються через інтерфейси або типи: interface ButtonProps { onClick: () => void; label: string; }.
• State типізується у функціональних компонентах через useState<T>().
• Типізація контексту: const ThemeContext = createContext<Theme | undefined>(undefined);.
• Типізація хуків: useEffect(() => { /* ... */ }, [deps]); – залежності типізуються автоматично.

Як це працює

• TypeScript компілює JSX у JavaScript, перевіряючи типи пропсів і стану. Якщо передається неправильний тип, компілятор видає помилку.
• У Next.js 14/15 типізація getServerSideProps і getStaticProps забезпечує, що дані, які передаються в компонент, мають очікуваний тип.

Практика і реалізація

interface CardProps {
  title: string;
  content?: string;
}
const Card = ({ title, content }: CardProps) => {
  return <div>{title}{content && <p>{content}</p>}</div>;
};

const [count, setCount] = useState<number>(0);

Тестування

• Jest + React Testing Library: render(<Card title="Hi" />); – перевірка, що пропс типу string.
• Vitest: expect(() => render(<Card title={123 as any} />)).toThrow(); – перевірка типу.

Особливості в контексті React

• Функціональні компоненти: типізація пропсів і стану через FC<Props> або просто інтерфейс.
• Класові компоненти: типізація через React.Component<Props, State>.
• Context API: типізація контексту забезпечує безпечне використання значень.

Оптимізація та типові помилки

• Перевантаження пропсів: використання React.memo з типами.
• Невірний тип пропсу → помилка компіляції, а не runtime.
• Необхідність any → уникайте, використовуйте конкретні типи.

Диагностика

• Якщо компонент не рендериться: перевірте, чи тип пропсу відповідає очікуваному.
• Якщо TypeScript видає помилку про undefined, перевірте, чи передається значення або використайте опціональний тип.

Альтернативи

• PropTypes (runtime) – менш строгий, але працює без TypeScript.
• Flow – інша статична типізація, менш поширена в React‑спільноті.

Часті помилки (8)

1. Передача any замість конкретного типу.
2. Необхідність обгортати компонент React.memo без типізації.
3. Відсутність дефолтних значень для пропсів → undefined‑помилки.
4. Неправильне використання useState<any>() → втрата типізації.
5. Змішування класових і функціональних компонентів без відповідної типізації.
6. Необхідність as any для пропсів → приховує помилки.
7. Відсутність типу у контексті → undefined при використанні.
8. Невірна типізація getServerSideProps → помилки при передачі даних.

Cheatsheet

• interface Props {} – тип пропсів.
• const [state, setState] = useState<Type>(initial); – тип стану.
• const ctx = createContext<Type | undefined>(undefined);
• React.FC<Props> – тип функціонального компоненту.

Follow‑up питання

• Як працює типізація React.memo?
• Чому в Next.js важлива типізація getStaticProps?