Migliori Pratiche TypeScript: Sicurezza dei Tipi e Qualità del Codice

Perché usare TypeScript?

TypeScript è un superinsieme di JavaScript. Tutto il codice JavaScript è codice TypeScript valido. Aggiunge la verifica dei tipi statica.

Sicurezza dei tipi: Rileva gli errori di tipo a tempo di compilazione. Riduce gli errori di runtime (undefined is not a function).

Esperienza dello sviluppatore: Le funzionalità di autocompletamento IDE, refactoring e go-to-definition funzionano con le informazioni di tipo.

Progetti grandi: Man mano che la base di codice cresce, la verifica dei tipi rende più facile la manutenzione e il refactoring. Migliora la collaborazione in team.

Migliori Pratiche di Definizione dei Tipi

interface vs type: Usate interface per le forme degli oggetti. Usate type per i tipi union/intersection. interface può essere estesa con extends.

Evitate any: any disabilita la verifica dei tipi. Usate unknown ed effettuate la verifica dei tipi: if (typeof x === 'string') { ... }.

Modalità strict: Impostate strict: true in tsconfig.json. Questo abilita controlli come noImplicitAny, strictNullChecks, strictFunctionTypes.

Inferenza dei tipi: Usate l'inferenza dei tipi di TypeScript invece dell'annotazione di tipo esplicita. const name = 'John' (inferito come string).

Tipi letterali: Usate valori specifici invece di string o number: type Status = 'active' | 'inactive' | 'pending'.

Tecniche Avanzate di Tipi

Tipi generici: Create funzioni e classi riutilizzabili e sicure nei tipi: function identity<T>(arg: T): T { return arg; }.

Tipi condizionali: Restituite tipi diversi basati su condizioni di tipo: type IsString<T> = T extends string ? true : false.

Tipi mappati: Trasformate i tipi esistenti: type Readonly<T> = { readonly [P in keyof T]: T[P]; }.

Tipi di utilità: Usate i tipi di utilità integrati di TypeScript: Partial, Required, Pick, Omit, Record, Exclude, Extract.

Tipi di template letterale: Create string sicuri nei tipi con la manipolazione di string: type EventName = `on${Capitalize<string>}`.

TypeScript con React

Definizione dei props: interface Props { name: string; age?: number; onClick: () => void; }. Usate ? per i props opzionali.

useState: const [count, setCount] = useState<number>(0);. L'inferenza dei tipi è generalmente sufficiente: useState(0) (inferito come number).

useRef: const inputRef = useRef<HTMLInputElement>(null);. Usate il tipo corretto per i riferimenti degli elementi DOM.

Gestori di eventi: Usate i tipi di eventi React come React.ChangeEvent<HTMLInputElement>, React.FormEvent<HTMLFormElement>.

Children: Usate React.ReactNode (generale) o React.ReactElement (solo elemento). Aggiungete la prop children con PropsWithChildren.

Gestione degli Errori e Debug

Asserzioni di tipo: Convertite i tipi con la parola chiave as: const value = input as string. Preferite i type guard quando possibile.

Type guards: Effettuate la verifica dei tipi a runtime con typeof, instanceof, l'operatore in e funzioni di type guard personalizzate.

Non-null assertion: Specificate che il valore non è null/undefined con l'operatore !: element!.value. Usate solo quando siete sicuri.

tsconfig strictNullChecks: Gestite null e undefined esplicitamente. Usate optional chaining (?.) e nullish coalescing (??).

ESLint + TypeScript: Aggiungete regole extra con il plugin @typescript-eslint. Abilitate regole come no-unused-vars, no-explicit-any.

Configurazione del Progetto

tsconfig.json: Impostate strict: true, target: 'ES2020', module: 'ESNext', moduleResolution: 'bundler', esModuleInterop: true.

Path aliases: Accorciate i percorsi di import con baseUrl e paths: "@/*": ["src/*"]. import { Button } from '@/components/Button'.

Project references: Usate i project references per i build incrementali in progetti grandi. Usate l'array references in tsconfig.json.

Monorepo: Configurate il monorepo TypeScript con Turborepo o Nx. Create pacchetti condivisi per tipi e utilità.

Declaration files: Aggiungete definizioni di tipo alle librerie JavaScript con file .d.ts. Usate i pacchetti @types/*.