import React, { useState, useRef } from 'react';
interface UserProfileProps {
title: string;
children?: React.ReactNode;
}
export const UserProfile = ({ title, children }: UserProfileProps) => {
// 1. Array state tipizat corect
const [tags, setTags] = useState<string[]>([]);
// 2. Ref pentru nod DOM cu valoare initiala null
const inputRef = useRef<HTMLInputElement>(null);
// 3. Event handler tipizat exact
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.value.trim()) {
setTags((prev) => [...prev, e.target.value]);
}
};
return (
<div>
<h2>{title}</h2>
<input ref={inputRef} onChange={handleChange} placeholder="Adauga tag..." />
{children}
</div>
);
};Când am trecut prima oară un dashboard intern de vreo 45k linii de cod de la JavaScript la TypeScript cu strict: true, terminalul s-a înroșit instant cu peste 300 de erori. TypeScript nu te urăște, doar te obligă să nu mai presupui că runtime-ul știe ce ai tu în cap. Dacă ești la primul proiect de React cu TS, sigur te-ai lovit deja de câteva dintre ele.
1. useState([]) devine misteriosul never[]
Scrii const [items, setItems] = useState([]) și totul pare în regulă până când încerci să faci setItems(['laptop']). Bum: Argument of type 'string' is not assignable to parameter of type 'never'.
Când îi dai un array gol fără generic, TypeScript deduce că array-ul va rămâne gol pentru totdeauna (never[]). Soluția e simplă: pasează-i genericul explicit când starea inițială e goală sau null.
const [items, setItems] = useState<string[]>([]);
2. e.target.value dă eroare la onChange
Folosești (e) => setName(e.target.value) și primești eroare că value nu există pe EventTarget. În JS clasic mergea fără probleme.
TypeScript are nevoie de tipul exact de eveniment din React. Dacă ai un input text, evenimentul este React.ChangeEvent<HTMLInputElement>. Dacă ai un buton, ai React.MouseEvent<HTMLButtonElement>. Scrii 10 secunde în plus, dar ai autocomplete garantat pe toate proprietățile elementului nativ.
3. useRef dă eroare de "read-only"
Mulți scriu const inputRef = useRef<HTMLInputElement>() și apoi se miră că inputRef.current.focus() crapă sau că ref={inputRef} dă eroare de tipuri incompatibile.
Regula cu useRef pentru elemente DOM e clară: pasează mereu null ca valoare inițială (useRef<HTMLInputElement>(null)). Fără acel null, TypeScript crede că vrei un ref mutabil generic (ca o variabilă de instanță), nu o legătură către un nod DOM.
4. Props cu children nespecificate
De la React 18 încoace, React.FC nu mai include automat children. Dacă ai o componentă wrapper și scrii direct { children } în props, primești eroare că proprietatea nu există pe tipul declarat.
Personal, prefer să declar explicit o interfață cu children?: React.ReactNode în loc să mă bazez pe PropsWithChildren. E mai lizibil pentru oricine citește fișierul.
5. Acces direct pe obiecte care pot fi null
Faci un fetch, salvezi datele într-un state const [user, setUser] = useState<User | null>(null) și apoi randezi direct <h1>{user.name}</h1>. TypeScript te oprește pe loc: 'user' is possibly 'null'.
Nu folosi user!.name (non-null assertion) doar ca să scapi de eroare. Dacă fetch-ul dă fail sau durează 2 secunde, aplicația crapă în producție. Folosește user?.name sau un guard clasic (if (!user) return <Loading />).
Merită efortul?
Trade-off-ul e cinstit: la început pierzi cam 20-25% din viteză scriind interfețe și tipizând formulare. Dar pentru orice proiect care depășește 3 pagini, te scapă de 90% din clasicele erori Cannot read properties of undefined care altfel ajungeau direct la utilizatori.
Voi ce eroare de TypeScript ați urât cel mai mult când ați început?