import React, { useState, useRef } from 'react';
interface User {
id: number;
name: string;
}
export const UserForm = () => {
const [users, setUsers] = useState<User[]>([]); // Soluție Eroarea 2
const [name, setName] = useState('');
const inputRef = useRef<HTMLInputElement>(null); // Soluție Eroarea 3
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => { // Soluție Eroarea 1
setName(e.target.value);
};
const handleAddUser = (e: React.FormEvent) => {
e.preventDefault();
if (!name) return;
const newUser: User = { id: Date.now(), name };
setUsers([...users, newUser]);
setName('');
inputRef.current?.focus(); // Soluție Eroarea 3 (optional chaining)
};
return (
<form onSubmit={handleAddUser}>
<input ref={inputRef} value={name} onChange={handleChange} />
<button type="submit">Adaugă user</button>
</form>
);
};Trecerea la strict: true în TypeScript e un duș rece dacă vii de la JavaScript simplu sau de la un proiect unde TS-ul era configurat la mișto. Am pățit asta acum câțiva ani pe o aplicație cu vreo 15.000 de utilizatori activi. Când am activat modul strict, build-ul a crăpat spectaculos cu peste 350 de erori.
Vestea bună e că majoritatea erau variații ale acelorași cinci probleme. Dacă le înțelegi o dată, le rezolvi din reflex în 10 secunde. Hai să le luăm pe rând, fără teorie inutilă.
1. Parameter 'e' implicitly has an 'any' type
O vezi mereu la handlerele de evenimente (onChange, onSubmit). TypeScript nu știe ce fel de eveniment primește funcția ta din HTML direct din aer.
Nu pune any. Soluția corectă este să folosești tipurile dedicate din React. Pentru un input de text, tipul este React.ChangeEvent<HTMLInputElement>. Pentru un form, este React.FormEvent<HTMLFormElement>.
2. Argument of type 'X' is not assignable to parameter of type 'never'
Apare aproape exclusiv când inițializezi un state cu un array gol: const [users, setUsers] = useState([]).
Dacă lași așa, TypeScript deduce că users este un array care va rămâne mereu gol (never[]). Când încerci să faci setUsers([...users, newUser]), compilerul urlă. Rezolvarea e simplă: folosește un generic ca să-i spui ce va conține array-ul în viitor: useState<User[]>([]).
3. Object is possibly 'null' sau 'undefined'
O problemă clasică la useRef sau când iei date dintr-un API care pot lipsi. De exemplu, dacă ai un ref pe un input și vrei să-i dai focus direct: inputRef.current.focus().
TypeScript te avertizează că, la montare, inputRef.current este null. Soluția rapidă este optional chaining: inputRef.current?.focus(). Dacă ești 100% sigur că elementul există în acel punct al execuției, poți folosi non-null assertion operator (inputRef.current!.focus()), dar personal prefer oricând un if (inputRef.current) defensiv.
4. Property 'X' does not exist on type '{}'
Se întâmplă când încerci să citești props într-o componentă fără să le definești structura. În React cu JS scriai direct ({ title, onClick }). În TS strict, trebuie să-i spui exact ce sunt acele proprietăți printr-un interface sau type.
Evită să folosești React.FC doar de dragul de a o face. De la React 18, React.FC nu mai include implicit proprietatea children, așa că adesea e mai curat și mai simplu să tastezi direct argumentele funcției destructurate.
5. Element implicitly has an 'any' type because expression of type 'string' can't be used to index
Apare când vrei să accesezi dinamic o cheie dintr-un obiect folosind o variabilă de tip string. De exemplu, const value = userSettings[key] unde key e un string oarecare.
TypeScript se teme că acel string s-ar putea să nu fie o cheie validă în obiectul tău. Rezolvarea e să-i spui compilerului că stringul tău este, într-adevăr, una dintre cheile obiectului, folosind keyof typeof userSettings sau un type assertion de tipul key as keyof UserSettings.
Trade-off-ul sincer al modului strict
Să fim realiști: modul strict te va încetini la început. Estimez o pierdere de viteză de vreo 20% în primele săptămâni. Însă, pe termen lung, te scapă de ecrane albe în producție și de erori penibile de tipul Cannot read properties of undefined. Merită din plin pentru orice proiect care va trăi mai mult de trei luni.
Voi ce erori de TS ați urât cel mai mult când ați făcut trecerea la modul strict?