React cu TypeScript strict: 5 erori clasice la primul proiect și cum le repari

import React, { useRef, useState } from 'react';

type SearchBoxProps = {
  onSearch: (query: string) => void;
  placeholder?: string;
};

export const SearchBox = ({ onSearch, placeholder = 'Caută...' }: SearchBoxProps) => {
  const [text, setText] = useState<string>('');
  const inputRef = useRef<HTMLInputElement>(null);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value);
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!text.trim()) {
      inputRef.current?.focus();
      return;
    }
    onSearch(text);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        ref={inputRef}
        type="text"
        value={text}
        onChange={handleChange}
        placeholder={placeholder}
      />
      <button type="submit">Trimite</button>
    </form>
  );
};

Când am trecut prima oară un proiect de React de la JS chior pe "strict": true, m-am trezit cu 140 de erori la primul build. Îți vine să arunci tastatura pe geam, dar TypeScript nu e încăpățânat fără motiv — doar te forțează să nu mai lași presupuneri în cod. Dacă ești la început de drum, astea sunt cele 5 erori pe care le vei vedea în buclă și felul simplu în care le rezolvi.

1. Parameter 'props' implicitly has an 'any' type

Clasicul absolut. În JavaScript scrii function UserCard({ name, age }) și viața e frumoasă. În TS strict, dacă nu-i spui explicit ce formă are obiectul de props, refuză să compileze.

Nu folosi any ca să scapi rapid de eroare; îți bați joc de tot setup-ul. Fă o interfață dedicată chiar deasupra componentei:

type UserCardProps = {
  name: string;
  age: number;
};

Trade-off sincer: scrii cu 30% mai mult cod boilerplate la început pentru fiecare componentă amărâtă de UI, dar scapi complet de bug-urile în care trimiți user_name în loc de name.

2. Property 'value' does not exist on type 'EventTarget'

Faci un handler pentru un input și scrii:

const handleChange = (e) => setValue(e.target.value);

TypeScript se plânge instant. De ce? Fiindcă e e necunoscut, iar dacă îi pui e: any, ai trișat. Dacă pui e: React.SyntheticEvent, e.target este un element generic din DOM care s-ar putea să nu aibă proprietatea value (gândește-te la un div).

Soluția e să folosești tipul dedicat: React.ChangeEvent<HTMLInputElement>. În momentul ăla, autocompletion-ul funcționează perfect și TS știe exact ce proprietăți are inputul.

3. Object is possibly 'null' la useRef

Ai nevoie de focus pe un input sau măsori un container:

const inputRef = useRef<HTMLInputElement>(null);

Mai jos în cod vrei să faci inputRef.current.focus(), iar compilatorul se blochează cu roșu. La primul render, DOM-ul încă nu există, deci valoarea inițială chiar este null.

Ai două variante curate: fie folosești optional chaining (inputRef.current?.focus()), fie verifici printr-un guard (if (!inputRef.current) return;). Nu pune inputRef.current!.focus() cu semnul exclamării decât dacă ești 100% sigur că acel cod rulează doar după montare, altfel îți asumi un crash în producție.

4. Type 'undefined' is not assignable to type 'ReactNode'

La o componentă cu props opționale, de exemplu subtitle?: string, încerci să faci logică condițională și te trezești că TypeScript nu acceptă ce returnezi tu din componentă sau ce pasezi ca parametru.

În React 18, dacă o componentă returnează undefined, e considerată eroare (trebuie null sau un nod valid). Dacă pasezi children, folosește tipul React.ReactNode în props, nu JSX.Element. ReactNode acceptă șiruri, numere, fragmente, null sau chiar boolean, adică tot ce poate randa React în mod legitim.

5. Argument of type 'string | undefined' is not assignable to parameter of type 'string'

O pățești des când citești parametri din URL (useParams()) sau date dintr-un query. Vrei să transmiți ID-ul către o funcție care așteaptă strict un string, dar useParams returnează valori opționale.

Nu forța cu type assertion (as string). Fă o verificare scurtă la începutul funcției:

if (!id) {
  return <NotFound />;
}

După acest bloc, TypeScript își dă seama singur (prin narrowing) că id nu mai poate fi undefined și te lasă să mergi mai departe fără erori.

Când începi, strict mode pare un polițist enervant care te încetinește. După vreo două săptămâni, îți dai seama că te scapă de jumătate din testele manuale pe care le făceai înainte în browser.

Voi la ce eroare de TypeScript ați pierdut cel mai mult timp când ați trecut prima oară pe React?