import { useState, useRef, type ChangeEvent, type FormEvent } from 'react';
interface UserProfile {
name: string;
email: string;
}
export const UserForm = () => {
// 1. Tip explicit pentru stare inițială vidă
const [user, setUser] = useState<UserProfile | null>(null);
const [nameInput, setNameInput] = useState('');
// 2. Ref legat corect de un element HTML
const inputRef = useRef<HTMLInputElement>(null);
// 3. Evenimente tastate precis, fără any
const handleNameChange = (e: ChangeEvent<HTMLInputElement>) => {
setNameInput(e.target.value);
};
const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
setUser({ name: nameInput, email: 'test@example.com' });
inputRef.current?.focus();
};
return (
<form onSubmit={handleSubmit}>
<input
ref={inputRef}
value={nameInput}
onChange={handleNameChange}
/>
<button type="submit">Salvează</button>
{user && <p>Activ: {user.name}</p>}
</form>
);
};Când activezi prima oară strict: true în tsconfig.json, te lovește instant un zid roșu în terminal. Am pățit asta acum câțiva ani pe un panou de gestiune cu vreo 40 de componente: dintr-un build verde în JavaScript, m-am trezit cu 180 de erori în mai puțin de trei secunde. Treci rapid peste panică dacă înveți tiparele care declanșează majoritatea acestor mesaje.
1. useState cu array gol devine never[]
Scrii const [items, setItems] = useState([]) și totul pare în regulă până vrei să adaugi ceva în listă. TypeScript deduce tipul ca never[], adică un array care nu acceptă absolut nimic.
Soluția e să-i dai explicit tipul prin generic: useState<User[]>([]). Dacă starea poate fi și null înainte de fetch, pui un union clar: useState<User | null>(null). Nu lăsa compilatorul să ghicească când pornești de la valori goale.
2. e: any la onChange și onSubmit
Toți am fost tentați să punem rapid (e: any) pe un handler de input doar ca să tacă compilatorul. Problema e că pierzi complet autocompletion pentru e.target.value și maschezi buguri evidente.
React are tipuri dedicate pentru evenimente sintetice. Pentru un simplu input folosești React.ChangeEvent<HTMLInputElement>. Pentru trimiterea formularului pui React.FormEvent<HTMLFormElement>. Dacă nu vrei să le memorezi pe de rost, scrie funcția inline o secundă, pune cursorul pe e în VS Code și copiază tipul sugerat de editor.
3. Unde a dispărut children în React 18?
Multă lume învață React din tutoriale vechi unde React.FC includea automat prop-ul children. De la React 18 încoace, echipa React a scos asta fiindcă forța o grămadă de componente să declare că acceptă copii chiar dacă nu făceau nimic cu ei.
Dacă vrei copii, definești prop-ul explicit folosind React.ReactNode în interfața ta, sau împachetezi tipul cu React.PropsWithChildren<MyProps>. E o linie în plus, dar scapi de comportamente ambigue.
4. useRef care nu se leagă de DOM
Ai vrut să dai focus pe un input și ai scris const inputRef = useRef(), iar la inputRef.current.focus() sare eroarea că current este undefined.
În TypeScript strict, un ref de DOM se inițializează mereu cu null și primește elementul HTML ca generic: useRef<HTMLInputElement>(null). Fără acel null inițial, TypeScript crede că vrei un ref de persistență (un simplu container mutabil de date), nu o referință conectată la ciclul de viață al unui nod din pagină.
5. Object is possibly undefined la date venite din API
Faci res.data.user.address.city și build-ul pică. În loc să trântești operatorul de non-null assertion peste tot (user!.address!.city), obișnuiește-te cu optional chaining (user?.address?.city) sau fă un guard logic la începutul funcției.
Trade-off-ul e cinstit: la început pierzi cam 20-30% mai mult timp tastând definiții și tipuri la fiecare componentă banală. Câștigul vine când refactorizezi o lună mai târziu și nu mai ai nici măcar o surpriză de tipul cannot read properties of undefined aruncată în consola utilizatorului.
Voi la ce eroare de TypeScript ați stat cel mai mult să vă prindeți ce vrea compilerul de la voi?