Generics di TypeScript: Padroneggiare Tipi di Dati Complessi per Applicazioni Robuste

TypeScript, un superset di JavaScript, permette agli sviluppatori di scrivere codice più robusto e manutenibile attraverso la tipizzazione statica. Tra le sue funzionalità più potenti ci sono i generics (o tipi generici), che consentono di scrivere codice in grado di funzionare con una varietà di tipi di dati, mantenendo al contempo la sicurezza dei tipi. Questa guida offre un'esplorazione completa dei generics di TypeScript, concentrandosi sulla loro applicazione a tipi di dati complessi nel contesto dello sviluppo software globale.

Cosa sono i Generics?

I generics forniscono un modo per scrivere codice riutilizzabile che può funzionare con tipi diversi. Invece di scrivere funzioni o classi separate per ogni tipo che si desidera supportare, è possibile scrivere una singola funzione o classe che utilizza parametri di tipo. Questi parametri di tipo sono segnaposto per i tipi effettivi che verranno utilizzati quando la funzione o la classe viene chiamata o istanziata. Ciò è particolarmente utile quando si ha a che fare con strutture di dati complesse in cui il tipo di dati all'interno di tali strutture può variare.

Vantaggi dell'utilizzo dei Generics

• Riusabilità del Codice: Scrivi il codice una volta e usalo con tipi diversi. Ciò riduce la duplicazione del codice e rende la tua codebase più manutenibile.
• Sicurezza dei Tipi: I generics consentono al compilatore TypeScript di applicare la sicurezza dei tipi in fase di compilazione. Questo aiuta a prevenire errori a runtime legati a mancate corrispondenze di tipo.
• Migliore Leggibilità: I generics rendono il tuo codice più leggibile indicando chiaramente i tipi con cui le tue funzioni e classi sono progettate per funzionare.
• Prestazioni Migliorate: In alcuni casi, i generics possono portare a miglioramenti delle prestazioni perché il compilatore può ottimizzare il codice generato in base ai tipi specifici utilizzati.

Sintassi di Base dei Generics

La sintassi di base dei generics prevede l'uso di parentesi angolari (< >) per dichiarare i parametri di tipo. Questi parametri di tipo sono tipicamente chiamati T, K, V, ecc., ma è possibile utilizzare qualsiasi identificatore valido. Ecco un semplice esempio di una funzione generica:

function identity<T>(arg: T): T {
  return arg;
}

let myString: string = identity<string>("hello");
let myNumber: number = identity<number>(123);
let myBoolean: boolean = identity<boolean>(true);

console.log(myString); // Output: hello
console.log(myNumber); // Output: 123
console.log(myBoolean); // Output: true

In questo esempio, <T> dichiara un parametro di tipo chiamato T. La funzione identity accetta un argomento di tipo T e restituisce un valore di tipo T. Quando si chiama la funzione, è possibile specificare esplicitamente il parametro di tipo (es. identity<string>) o lasciare che TypeScript lo inferisca in base al tipo dell'argomento.

Lavorare con Tipi di Dati Complessi

I generics diventano particolarmente preziosi quando si ha a che fare con tipi di dati complessi come array, oggetti e interfacce. Esploriamo alcuni scenari comuni:

Array Generici

È possibile utilizzare i generics per creare funzioni o classi che funzionano con array di tipi diversi:

function arrayToString<T>(arr: T[]): string {
  return arr.join(", ");
}

let numberArray: number[] = [1, 2, 3, 4, 5];
let stringArray: string[] = ["apple", "banana", "cherry"];

console.log(arrayToString(numberArray)); // Output: 1, 2, 3, 4, 5
console.log(arrayToString(stringArray)); // Output: apple, banana, cherry

Qui, la funzione arrayToString accetta un array di tipo T[] e restituisce una rappresentazione in stringa dell'array. Questa funzione funziona con array di qualsiasi tipo, rendendola altamente riutilizzabile.

Oggetti Generici

I generics possono anche essere usati per definire funzioni o classi che funzionano con oggetti di forme diverse:

interface Person {
  name: string;
  age: number;
  country: string; // Aggiunto 'country' per il contesto globale
}

interface Product {
  id: number;
  name: string;
  price: number;
  currency: string; // Aggiunto 'currency' per il contesto globale
}

function displayInfo<T extends { name: string }>(item: T): void {
  console.log(`Name: ${item.name}`);
}

let person: Person = { name: "Alice", age: 30, country: "USA" };
let product: Product = { id: 1, name: "Laptop", price: 1200, currency: "USD" };

displayInfo(person); // Output: Name: Alice
displayInfo(product); // Output: Name: Laptop

In questo esempio, la funzione displayInfo accetta un oggetto di tipo T che deve avere una proprietà name di tipo stringa. La clausola extends { name: string } è un vincolo (constraint), che specifica i requisiti minimi per il parametro di tipo T. Ciò garantisce che la funzione possa accedere in sicurezza alla proprietà name.

Utilizzo Avanzato dei Generics

I generics di TypeScript offrono funzionalità più avanzate che consentono di creare codice ancora più flessibile e potente. Esploriamo alcune di queste funzionalità:

Parametri di Tipo Multipli

È possibile definire funzioni o classi con parametri di tipo multipli:

function merge<T, U>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}

interface Name {
  firstName: string;
}

interface Age {
  age: number;
}

const person: Name = { firstName: "Bob" };
const details: Age = { age: 42 };

const merged = merge(person, details);
console.log(merged.firstName); // Output: Bob
console.log(merged.age); // Output: 42

La funzione merge accetta due oggetti di tipo T e U e restituisce un nuovo oggetto che contiene le proprietà di entrambi gli oggetti. Questo è un modo potente per combinare dati da fonti diverse.

Vincoli Generici (Constraints)

Come mostrato in precedenza, i vincoli consentono di limitare i tipi che possono essere utilizzati con un parametro di tipo generico. Ciò garantisce che il codice generico possa operare in sicurezza sui tipi specificati.

interface Lengthwise {
  length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
  console.log(arg.length);
  return arg;
}

loggingIdentity([1, 2, 3]); // Output: 3
loggingIdentity("hello"); // Output: 5
// loggingIdentity(123); // Errore: l'argomento di tipo 'number' non è assegnabile al parametro di tipo 'Lengthwise'.

La funzione loggingIdentity accetta un argomento di tipo T che deve avere una proprietà length di tipo numero. Ciò garantisce che la funzione possa accedere in sicurezza alla proprietà length.

Classi Generiche

I generics possono essere utilizzati anche con le classi:

class DataStorage<T> {
  private data: T[] = [];

  addItem(item: T) {
    this.data.push(item);
  }

  removeItem(item: T) {
    this.data = this.data.filter(d => d !== item);
  }

  getItems(): T[] {
    return [...this.data];
  }
}

const textStorage = new DataStorage<string>();
textStorage.addItem("apple");
textStorage.addItem("banana");
textStorage.removeItem("apple");
console.log(textStorage.getItems()); // Output: [ 'banana' ]

const numberStorage = new DataStorage<number>();
numberStorage.addItem(1);
numberStorage.addItem(2);
numberStorage.removeItem(1);
console.log(numberStorage.getItems()); // Output: [ 2 ]

La classe DataStorage può memorizzare dati di qualsiasi tipo T. Ciò consente di creare strutture dati riutilizzabili e sicure dal punto di vista dei tipi.

Interfacce Generiche

Le interfacce generiche sono utili per definire contratti che possono funzionare con tipi diversi. Ad esempio:

interface Result<T, E> {
  success: boolean;
  data?: T;
  error?: E;
}

interface User {
  id: number;
  username: string;
  email: string;
}

interface ErrorMessage {
  code: number;
  message: string;
}

function fetchUser(id: number): Result<User, ErrorMessage> {
  if (id === 1) {
    return { success: true, data: { id: 1, username: "john.doe", email: "john.doe@example.com" } };
  } else {
    return { success: false, error: { code: 404, message: "User not found" } };
  }
}

const userResult = fetchUser(1);
if (userResult.success) {
  console.log(userResult.data.username);
} else {
  console.log(userResult.error.message);
}

L'interfaccia Result definisce una struttura generica per rappresentare l'esito di un'operazione. Può contenere dati di tipo T o un errore di tipo E. Questo è un pattern comune per la gestione di operazioni asincrone o operazioni che possono fallire.

Tipi di Utilità (Utility Types) e Generics

TypeScript fornisce diversi tipi di utilità integrati che funzionano bene con i generics. Questi tipi di utilità possono aiutarti a trasformare e manipolare i tipi in modi potenti.

Partial<T>

Partial<T> rende tutte le proprietà del tipo T opzionali:

interface Person {
  name: string;
  age: number;
}

type PartialPerson = Partial<Person>;

const partialPerson: PartialPerson = { name: "Alice" }; // Valido

Readonly<T>

Readonly<T> rende tutte le proprietà del tipo T di sola lettura (readonly):

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = Readonly<Person>;

const readonlyPerson: ReadonlyPerson = { name: "Bob", age: 42 };
// readonlyPerson.age = 43; // Errore: Impossibile assegnare a 'age' perché è una proprietà di sola lettura.

Pick<T, K>

Pick<T, K> seleziona un insieme di proprietà K dal tipo T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type NameAndAge = Pick<Person, "name" | "age">;

const nameAndAge: NameAndAge = { name: "Charlie", age: 28 };

Omit<T, K>

Omit<T, K> rimuove un insieme di proprietà K dal tipo T:

interface Person {
  name: string;
  age: number;
  email: string;
}

type PersonWithoutEmail = Omit<Person, "email">;

const personWithoutEmail: PersonWithoutEmail = { name: "David", age: 35 };

Record<K, T>

Record<K, T> crea un tipo con chiavi K e valori di tipo T:

type CountryCodes = "US" | "CA" | "UK" | "DE" | "FR" | "JP" | "CN" | "IN" | "BR" | "AU"; // Lista estesa per contesto globale
type Currency = "USD" | "CAD" | "GBP" | "EUR" | "JPY" | "CNY" | "INR" | "BRL" | "AUD"; // Lista estesa per contesto globale

type CurrencyMap = Record<CountryCodes, Currency>;

const currencyMap: CurrencyMap = {
  "US": "USD",
  "CA": "CAD",
  "UK": "GBP",
  "DE": "EUR",
  "FR": "EUR",
  "JP": "JPY",
  "CN": "CNY",
  "IN": "INR",
  "BR": "BRL",
  "AU": "AUD",
};

Tipi Mappati (Mapped Types)

I tipi mappati consentono di trasformare i tipi esistenti iterando sulle loro proprietà. Questo è un modo potente per creare nuovi tipi basati su quelli esistenti. Ad esempio, è possibile creare un tipo che renda tutte le proprietà di un altro tipo di sola lettura:

interface Person {
  name: string;
  age: number;
}

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
};

const readonlyPerson: ReadonlyPerson = { name: "Eve", age: 25 };
// readonlyPerson.age = 26; // Errore: Impossibile assegnare a 'age' perché è una proprietà di sola lettura.

In questo esempio, [K in keyof Person] itera su tutte le chiavi dell'interfaccia Person, e Person[K] accede al tipo di ciascuna proprietà. La parola chiave readonly rende ogni proprietà di sola lettura.

Tipi Condizionali (Conditional Types)

I tipi condizionali consentono di definire tipi basati su condizioni. Questo è un modo potente per creare tipi che si adattano a scenari diversi.

type NonNullable<T> = T extends null | undefined ? never : T;

type MaybeString = string | null | undefined;
type StringType = NonNullable<MaybeString>; // string

function getValue<T>(value: T): NonNullable<T> {
  if (value == null) { // Gestisce sia null che undefined
    throw new Error("Il valore non può essere nullo o indefinito");
  }
  return value as NonNullable<T>;
}

try {
  const validValue = getValue("hello");
  console.log(validValue.toUpperCase()); // Output: HELLO

  const invalidValue = getValue(null); // Questo lancerà un errore
  console.log(invalidValue); // Questa riga non verrà raggiunta
} catch (error: any) {
  console.error(error.message); // Output: Il valore non può essere nullo o indefinito
}

In questo esempio, il tipo NonNullable<T> controlla se T è null o undefined. Se lo è, restituisce never, il che significa che il tipo non è consentito. Altrimenti, restituisce T. Ciò consente di creare tipi che sono garantiti non essere nullabili.

Best Practice per l'Uso dei Generics

Ecco alcune best practice da tenere a mente quando si utilizzano i generics:

• Usa nomi descrittivi per i parametri di tipo: Scegli nomi che indichino chiaramente lo scopo del parametro di tipo.
• Usa i vincoli per limitare i tipi che possono essere utilizzati con un parametro di tipo generico: Ciò garantisce che il tuo codice generico possa operare in sicurezza sui tipi specificati.
• Mantieni il tuo codice generico semplice e mirato: Evita di complicare eccessivamente il tuo codice generico con troppi parametri di tipo o vincoli complessi.
• Documenta accuratamente il tuo codice generico: Spiega lo scopo dei parametri di tipo e di eventuali vincoli utilizzati.
• Considera i compromessi tra riusabilità del codice e sicurezza dei tipi: Sebbene i generics possano migliorare la riusabilità del codice, possono anche rendere il codice più complesso. Valuta i vantaggi e gli svantaggi prima di utilizzare i generics.
• Considera la localizzazione e la globalizzazione (l10n e g11n): Quando si ha a che fare con dati che devono essere visualizzati a utenti in diverse regioni, assicurati che i tuoi generics supportino la formattazione e le convenzioni culturali appropriate. Ad esempio, la formattazione di numeri e date può variare in modo significativo tra le diverse localizzazioni.

Esempi in un Contesto Globale

Consideriamo alcuni esempi di come i generics possono essere utilizzati in un contesto globale:

Conversione di Valuta

interface ConversionRate {
  rate: number;
  fromCurrency: string;
  toCurrency: string;
}

function convertCurrency<T extends ConversionRate>(amount: number, rate: T): number {
  return amount * rate.rate;
}

const usdToEurRate: ConversionRate = { rate: 0.85, fromCurrency: "USD", toCurrency: "EUR" };
const amountInUSD = 100;
const amountInEUR = convertCurrency(amountInUSD, usdToEurRate);
console.log(`${amountInUSD} USD equivalgono a ${amountInEUR} EUR`); // Output: 100 USD equivalgono a 85 EUR

Formattazione della Data

interface DateFormatOptions {
  locale: string;
  options: Intl.DateTimeFormatOptions;
}

function formatDate<T extends DateFormatOptions>(date: Date, format: T): string {
  return date.toLocaleDateString(format.locale, format.options);
}

const currentDate = new Date();

const usDateFormat: DateFormatOptions = { locale: "en-US", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const germanDateFormat: DateFormatOptions = { locale: "de-DE", options: { year: 'numeric', month: 'long', day: 'numeric' } };
const japaneseDateFormat: DateFormatOptions = { locale: "ja-JP", options: { year: 'numeric', month: 'long', day: 'numeric' } };

console.log("Data USA: " + formatDate(currentDate, usDateFormat));
console.log("Data Tedesca: " + formatDate(currentDate, germanDateFormat));
console.log("Data Giapponese: " + formatDate(currentDate, japaneseDateFormat));

Servizio di Traduzione

interface Translation {
  [key: string]: string; // Consente chiavi di lingua dinamiche
}

interface LanguageData<T extends Translation> {
  languageCode: string;
  translations: T;
}

const englishTranslations: Translation = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our website!"
};

const spanishTranslations: Translation = {
  "hello": "Hola",
  "goodbye": "Adiós",
  "welcome": "¡Bienvenido a nuestro sitio web!"
};

const frenchTranslations: Translation = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre site web !"
};


const languageData: LanguageData<typeof englishTranslations>[] = [
  {languageCode: "en", translations: englishTranslations },
  {languageCode: "es", translations: spanishTranslations },
  {languageCode: "fr", translations: frenchTranslations}
];

function translate<T extends Translation>(key: string, languageCode: string, languageData: LanguageData<T>[]): string {
  const lang = languageData.find(lang => lang.languageCode === languageCode);
  if (!lang) {
    return `Traduzione per ${key} in ${languageCode} non trovata.`;
  }
  return lang.translations[key] || `Traduzione per ${key} non trovata.`;
}

console.log(translate("hello", "en", languageData)); // Output: Hello
console.log(translate("hello", "es", languageData)); // Output: Hola
console.log(translate("welcome", "fr", languageData)); // Output: Bienvenue sur notre site web !
console.log(translate("missingKey", "de", languageData)); // Output: Traduzione per missingKey in de non trovata.

Conclusione

I generics di TypeScript sono uno strumento potente per scrivere codice riutilizzabile e sicuro dal punto di vista dei tipi, in grado di funzionare con tipi di dati complessi. Comprendendo la sintassi di base, le funzionalità avanzate e le best practice dei generics, è possibile migliorare significativamente la qualità e la manutenibilità delle proprie applicazioni TypeScript. Nello sviluppo di applicazioni per un pubblico globale, i generics possono aiutare a gestire formati di dati e convenzioni culturali diversi, garantendo un'esperienza utente fluida per tutti.