5 erori de TypeScript strict care îți blochează primul proiect de React (și cum le rezolvi)

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

interface InputFormProps {
  onSubmit: (value: string) => void;
}

export const InputForm = ({ onSubmit }: InputFormProps) => {
  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()) {
      onSubmit(text);
      setText('');
      inputRef.current?.focus();
    }
  };

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

Dacă tocmai ai bifat strict: true în tsconfig.json pe un proiect de React, probabil îți vine să-ți bagi picioarele în el de compilator. Am trecut prin asta acum câțiva ani când am migrat un dashboard cu vreo 12 module complexe de la JS la TS strict și m-am trezit cu peste 300 de erori roșii în editor. Partea bună e că, după ce treci de hopul ăsta, nu mai vrei să auzi de JavaScript simplu.

TypeScript strict te forțează să fii explicit. Nu te lasă să ghicești ce e în obiecte, ceea ce la început pare un blocaj stupid, dar te salvează de zeci de bug-uri de tipul Cannot read property of undefined în producție. Hai să vedem cele mai frecvente 5 erori peste care sigur o să te lovești și cum le rezolvi corect, fără să trișezi cu any.

1. Binding element implicitly has an 'any' type

Scrii o componentă simplă și vrei să-i trimiți props. În JS scriai direct destructurat:

const Button = ({ label }) => { ... }

În modul strict, TS urlă instant. De ce? Pentru că nu are de unde să știe ce este label – poate fi un șir de caractere, un număr sau o funcție întreagă.

Soluția: Definește mereu o interfață pentru props. Este cel mai curat mod de a lucra.

interface ButtonProps {
  label: string;
  onClick: () => void;
}

const Button = ({ label, onClick }: ButtonProps) => { ... }

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

Asta apare când pui un handler pe un input. Scrii onChange={(e) => setVal(e.target.value)} și te trezești cu o linie roșie sub target.value.

TS nu știe dacă acel eveniment vine de la un input, de la un div sau de la un buton. Iar un div nu are proprietatea value.

Soluția: Trebuie să folosești tipurile de evenimente oferite de React. Pentru un input de text, tipul corect este React.ChangeEvent<HTMLInputElement>. Dacă e un select, folosești HTMLSelectElement.

3. Object is possibly 'null'

O pățești des când folosești useRef ca să accesezi un element din DOM. De exemplu, vrei să pui focus pe un input după ce se randează componenta:

const inputRef = useRef(null);
// ... mai jos în cod
inputRef.current.focus(); // Eroare aici

TS te avertizează pe bună dreptate: la prima randare, înainte ca React să deseneze HTML-ul, inputRef.current este chiar null.

Soluția: Specifică tipul elementului în generic și folosește operatorul ?. (optional chaining) când apelezi metode pe el.

const inputRef = useRef<HTMLInputElement>(null);
// ...
inputRef.current?.focus();

4. Argument of type 'X' is not assignable to parameter of type 'never'

Asta e clasică pentru stările inițiale de tip array în useState. Faci const [items, setItems] = useState([]) și când încerci să adaugi ceva cu setItems([...items, 'new-item']), compilatorul crapă.

Pentru că ai inițializat useState cu un array gol, TS a dedus că tipul este never[] – adică un array care nu are voie să conțină niciodată nimic.

Soluția: Folosește un generic ca să-i spui ce va conține acel array pe viitor:

const [items, setItems] = useState<string[]>([]);

5. React 18 și eroarea cu 'children'

Dacă ai învățat React acum ceva timp, erai obișnuit ca tipul React.FC (sau FunctionComponent) să includă automat prop-ul children. De la React 18 încoace, acest comportament a fost eliminat pentru că era prea permisiv.

Dacă încerci să pui copii în interiorul unei componente custom fără să-i declari, TS va protesta.

Soluția: Adaugă manual children în interfața de props, folosind tipul React.ReactNode.

interface WrapperProps {
  children: React.ReactNode;
}

Trade-off-ul la toată povestea asta? Da, scrii cu vreo 15-20% mai mult cod la început. Dar gândește-te că salvezi timp la debugging. Tu cum gestionezi trecerea la TypeScript strict? Îți vine să dai disable la reguli sau ai început să le prinzi gustul?