TypeScript: essenza del linguaggio, tipizzazione rigorosa e React Native

Cos'è TypeScript?

TypeScript è un linguaggio di programmazione di Microsoft (2012) creato da Anders Hejlsberg (creatore di C# e Turbo Pascal). TypeScript estende JavaScript con un sistema di tipi statico, interfacce, generics, enumerazioni e decoratori. Il codice TS viene compilato in JavaScript puro (transpilazione) tramite il compilatore tsc o Babel — il risultato è JS standard che funziona in qualsiasi ambiente.

La motivazione alla base di TypeScript sono i limiti di JavaScript nei progetti grandi. La tipizzazione dinamica di JS porta a errori scoperti solo in fase di esecuzione: undefined is not a function, Cannot read property of null. TypeScript sposta il controllo dei tipi in fase di compilazione, prevenendo questi errori prima dell'esecuzione del codice. Più grande è il progetto, maggiori sono i vantaggi di TS: in una codebase di oltre 100.000 righe, TS previene centinaia di potenziali bug.

Una caratteristica chiave di TypeScript è la tipizzazione rigorosa con il flag opzionale strict: true in tsconfig.json. La modalità rigorosa attiva tutti i controlli: strictNullChecks (null/undefined sono incompatibili con altri tipi), noImplicitAny (vieta any implicito), strictFunctionTypes (controvarianza dei parametri delle funzioni). Per impostazione predefinita, strict: true è raccomandato per tutti i nuovi progetti.

TypeScript vs JavaScript

TypeScript differisce da JavaScript solo in fase di sviluppo. Dopo la compilazione, i tipi vengono cancellati — il runtime esegue JS normale senza perdita di prestazioni. Questo è un compromesso: lo sviluppo richiede un passaggio di compilazione aggiuntivo, ma fornisce completamento automatico nell'IDE, refactoring con ridenominazione dei simboli e documentazione dei tipi direttamente nel codice.

Sistema di tipi di TypeScript

Il sistema di tipi di TypeScript è strutturale, non nominale: due tipi sono compatibili se la loro struttura corrisponde, indipendentemente dal nome. Questo differisce da Java/C# dove la compatibilità è determinata dal nome della classe o dell'interfaccia. La tipizzazione strutturale semplifica l'integrazione con il codice JS esistente — non è necessario dichiarare implements per ogni tipo.

Tipi di base e avanzati

TypeScript supporta i tipi primitivi JS più: any (disabilita il controllo), unknown (any sicuro — richiede controllo prima dell'uso), never (non restituisce mai), void (nessun ritorno), tuple (tupla di lunghezza fissa), enum (enumerazione), union (string | number), intersection (A & B), literal ('red' | 'blue'), index signature ([key: string]: number).

// Sistema di tipi di base di TypeScript
// Tipi primitivi
const name: string = 'React Native';
const version: number = 0.73;
const isReady: boolean = true;

// Tipi Union e Literal
type Platform = 'ios' | 'android' | 'web';
type Status = 'idle' | 'loading' | 'success' | 'error';

function getSDKVersion(platform: Platform): number {
  switch (platform) {
    case 'ios': return 17;
    case 'android': return 34;
    case 'web': return 2025;
  }
}

// Tuple — tupla di lunghezza fissa
type Coordinate = [number, number];
const position: Coordinate = [55.75, 37.61];

// Enum — enumerazione con auto-incremento
enum AppState {
  Background,
  Foreground,
  Inactive
}

// Unknown — alternativa sicura a any
function parseJSON(json: string): unknown {
  return JSON.parse(json);
}

const data = parseJSON('{"name":"TS"}');
if (typeof data === 'object' && data !== null) {
  console.log((data as Record<string, unknown>).name);
}

Il tipo Platform è un'unione di letterali di stringa, che limita i valori a tre opzioni. Se passi 'windows', TypeScript genererà un errore. La tupla Coordinate garantisce esattamente due numeri — utile per coordinate o colori RGB. L'enum AppState si compila in un oggetto con mappatura inversa. Unknown obbliga al controllo del tipo prima dell'uso — a differenza di any, unknown è sicuro per impostazione predefinita.

Interfacce e type-aliases

Le interfacce e i type-aliases in TypeScript descrivono le forme degli oggetti. Le interfacce supportano la fusione di dichiarazioni (ridichiarare aggiunge campi) e l'estensione (extends). I type-aliases possono descrivere unioni, intersezioni, tuple e tipi condizionali, ma non supportano la fusione di dichiarazioni. Regola: usa le interfacce per gli oggetti API, type per tutto il resto.

// Interfacce e tipi per React Native
// Interfaccia con campi opzionali
interface User {
  id: string;
  name: string;
  email: string;
  avatar?: string; // campo opzionale
  readonly createdAt: Date; // sola lettura
}

// Estensione dell'interfaccia (extends)
interface AdminUser extends User {
  role: 'admin';
  permissions: string[];
}

// Tipo per dati API
type ApiResponse<T> = {
  data: T;
  status: Status;
  error?: string;
};

// Utility types — Partial rende tutti i campi opzionali
type PartialUser = Partial<User>;

// Pick — seleziona i campi specificati
type UserPreview = Pick<User, 'id' | 'name' | 'avatar'>;

// Record — dizionario con chiavi tipizzate
type UserMap = Record<string, User>;

L'interfaccia User con ? (campo opzionale) e readonly (sola lettura). ApiResponse<T> è un'interfaccia generica per risposte API. Partial<User> è un tipo utilitario che rende tutti i campi opzionali (utile per moduli di modifica). Pick<User, 'id' | 'name'> seleziona solo i campi specificati — comodo per componenti di anteprima. Record<string, User> è un dizionario di utenti per ID.

Generics e tipi utilitari

I generics sono una caratteristica chiave di TypeScript, che consente di creare componenti che funzionano con qualsiasi tipo senza perdere la sicurezza dei tipi. Una funzione generica è definita con un parametro di tipo tra parentesi angolari: function identity<T>(arg: T): T. Il tipo T viene inferito automaticamente dall'argomento o specificato esplicitamente: identity<string>('hello').

I tipi utilitari sono generics incorporati per trasformazioni di tipi: Partial<T> (tutti i campi opzionali), Required<T> (tutti i campi obbligatori), Readonly<T> (tutti i campi di sola lettura), Pick<T, K> (seleziona campi), Omit<T, K> (esclude campi), Record<K, T> (dizionario), Exclude<T, U> (esclude dall'unione), Extract<T, U> (estrae dall'unione), NonNullable<T> (esclude null/undefined).

// Generics in TypeScript
// Funzione generica per lavorare con API
async function fetchData<T>(url: string): Promise<T> {
  const response = await fetch(url);

  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }

  return response.json() as Promise<T>;
}

// Utilizzo con un tipo specifico
interface Product {
  id: number;
  title: string;
  price: number;
}

const products = await fetchData<Product[]>('/api/products');

// Classe generica per la gestione dello stato
class StateManager<S> {
  private state: S;

  constructor(initial: S) {
    this.state = initial;
  }

  getState(): S {
    return this.state;
  }

  updateState(partial: Partial<S>): void {
    this.state = { ...this.state, ...partial };
  }
}

// Lavoro tipizzato con Redux Reducer
type Action<T, P> = {
  type: T;
  payload: P;
};

type UserAction =
  | Action<'SET_USER', User>
  | Action<'CLEAR_USER', undefined>
  | Action<'UPDATE_USER', Partial<User>>;

La funzione fetchData<T> è un wrapper tipizzato intorno a fetch. Il parametro T determina la forma della risposta: chiamando fetchData<Product[]>, TypeScript sa che l'array restituito contiene oggetti Product. La classe StateManager<S> gestisce lo stato di qualsiasi tipo — Partial<S> per aggiornamenti parziali. Action<T, P> è un'unione discriminata per azioni Redux con restringimento automatico del tipo in switch.

TypeScript in React Native

TypeScript in React Native fornisce una tipizzazione rigorosa per props e stato dei componenti. Il CLI di React Native crea un template con estensione .tsx e tsconfig.json. PropTypes (JS) vengono sostituiti da interfacce TypeScript — il controllo viene effettuato in fase di compilazione, non in runtime. styled-components e React Navigation hanno supporto completo dei tipi.

Tipizzazione dei componenti

React.FC<Props> è il tipo per un componente funzionale con props. I children sono tipizzati automaticamente. useRef<T> — riferimento a un componente nativo. useState<S> — stato con inferenza di tipo. useNavigation<T> — navigazione tipizzata. useCallback, useMemo — con inferenza automatica dei tipi. Tutti gli hook React sono completamente tipizzati.

// Componente React Native tipizzato
import React, { useState, useCallback } from 'react';
import {
  View, Text, FlatList, TouchableOpacity,
  StyleSheet
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';

// Tipi per navigazione e dati
type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string };
  Settings: undefined;
};

type NavigationProp =
  NativeStackNavigationProp<RootStackParamList, 'Home'>;

// Interfaccia per props
interface ProductListProps {
  products: Product[];
  onSelect: (id: number) => void;
}

// Componente funzionale tipizzato
const ProductList: React.FC<ProductListProps> = ({
  products,
  onSelect
}) => {
  const navigation = useNavigation<NavigationProp>();
  const [selectedId, setSelectedId] = useState<number | null>(null);

  const handlePress = useCallback((id: number) => {
    setSelectedId(id);
    onSelect(id);
    navigation.navigate('Profile', { userId: String(id) });
  }, [onSelect, navigation]);

  const renderItem = useCallback(({ item }: { item: Product }) => (
    <TouchableOpacity onPress={() => handlePress(item.id)}>
      <Text>{item.title}</Text>
      <Text>${item.price.toFixed(2)}</Text>
    </TouchableOpacity>
  ), [handlePress]);

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={(item) => String(item.id)}
    />
  );
};

Il tipo RootStackParamList è un dizionario di route con i loro parametri. NavigationProp fornisce navigazione tipizzata: navigation.navigate('Profile', { userId }) verifica che Profile accetti userId. useCallback con parametri tipizzati previene re-render non necessari. FlatList è tipizzato tramite generics: — data e renderItem ricevono i tipi automaticamente.

Strumenti dello sviluppatore TypeScript

Gli strumenti TypeScript includono il compilatore tsc, tsconfig.json, supporto IDE in VS Code, ESLint con @typescript-eslint, Prettier e DefinitelyTyped (@types/*). tsc è il compilatore che converte .ts in .js. tsconfig.json configura: target (ES2020), module (ESNext), strict: true, outDir (cartella di output). sourceMap — debug di TS nel browser tramite mappe di codice.

DefinitelyTyped è un repository di definizioni di tipi per librerie senza tipi incorporati. Installazione: npm install @types/react @types/react-native --save-dev. I file .d.ts sono dichiarazioni di tipi. Le librerie moderne (React, React Native, Angular) includono tipi incorporati e non richiedono @types/. Per le librerie JS più vecchie, DefinitelyTyped è l'unica fonte di tipi.

// tsconfig.json — configurazione minima
{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "strict": true,
    "jsx": "react-native",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "noEmit": true // solo controllo, senza generazione JS
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "babel.config.js"]
}

L'opzione strict: true attiva tutti i controlli di tipo — raccomandata per tutti i progetti. jsx: 'react-native' preserva JSX senza trasformazione (React Native gestisce JSX tramite Babel). moduleResolution: 'node' — risoluzione dei moduli come in Node.js. esModuleInterop — compatibilità con moduli CommonJS. noEmit: true — solo controllo senza generare file JS (Babel o Metro genera il JS).