Stăpânirea Tipurilor Utilitare TypeScript: Un Ghid Practic pentru Dezvoltatorii din Întreaga Lume

TypeScript oferă un set puternic de tipuri utilitare încorporate care pot îmbunătăți semnificativ siguranța tipurilor, lizibilitatea și mentenabilitatea codului dumneavoastră. Aceste tipuri utilitare sunt, în esență, transformări de tip predefinite pe care le puteți aplica tipurilor existente, scutindu-vă de scrierea de cod repetitiv și predispus la erori. Acest ghid va explora diverse tipuri utilitare cu exemple practice care rezonează cu dezvoltatorii de pe tot globul.

De ce să Folosim Tipurile Utilitare?

Tipurile utilitare abordează scenarii comune de manipulare a tipurilor. Folosindu-le, puteți:

• Reduceți codul repetitiv (boilerplate): Evitați scrierea definițiilor de tip repetitive.
• Îmbunătățiți siguranța tipurilor: Asigurați-vă că codul respectă constrângerile de tip.
• Creșteți lizibilitatea codului: Faceți definițiile de tip mai concise și mai ușor de înțeles.
• Sporește mentenabilitatea: Simplificați modificările și reduceți riscul de a introduce erori.

Tipuri Utilitare de Bază

Partial

Partial construiește un tip în care toate proprietățile lui T devin opționale. Acest lucru este deosebit de util atunci când doriți să creați un tip pentru actualizări parțiale sau obiecte de configurare.

Exemplu:

Imaginați-vă că construiți o platformă de e-commerce cu clienți din diverse regiuni. Aveți un tip Customer:

interface Customer {
  id: string;
  firstName: string;
  lastName: string;
  email: string;
  phoneNumber: string;
  address: {
    street: string;
    city: string;
    country: string;
    postalCode: string;
  };
  preferences?: {
    language: string;
    currency: string;
  }
}

Când actualizați informațiile unui client, este posibil să nu doriți să solicitați toate câmpurile. Partial vă permite să definiți un tip în care toate proprietățile lui Customer sunt opționale:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... implementare pentru a actualiza clientul cu ID-ul dat
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // Valid
updateCustomer("456", { address: { city: "London" } }); // Valid

Readonly

Readonly construiește un tip în care toate proprietățile lui T devin readonly, prevenind modificarea după inițializare. Acest lucru este valoros pentru a asigura imutabilitatea.

Exemplu:

Luați în considerare un obiect de configurare pentru aplicația dumneavoastră globală:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Versiune adăugată
}

const config: AppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

Pentru a preveni modificarea accidentală a configurației după inițializare, puteți utiliza Readonly:

type ReadonlyAppConfig = Readonly<AppConfig>;

const readonlyConfig: ReadonlyAppConfig = {
  apiUrl: "https://api.example.com",
  theme: "dark",
  supportedLanguages: ["en", "fr", "de", "es", "zh"],
  version: "1.0.0"
};

// readonlyConfig.apiUrl = "https://newapi.example.com"; // Eroare: Nu se poate atribui valoare lui 'apiUrl' deoarece este o proprietate read-only.

Pick

Pick construiește un tip prin selectarea setului de proprietăți K din T, unde K este o uniune de tipuri literale de șiruri de caractere care reprezintă numele proprietăților pe care doriți să le includeți.

Exemplu:

Să presupunem că aveți o interfață Event cu diverse proprietăți:

interface Event {
  id: string;
  title: string;
  description: string;
  location: string;
  startTime: Date;
  endTime: Date;
  organizer: string;
  attendees: string[];
}

Dacă aveți nevoie doar de title, location și startTime pentru o componentă de afișare specifică, puteți utiliza Pick:

type EventSummary = Pick<Event, "title" | "location" | "startTime">;

function displayEventSummary(event: EventSummary): void {
  console.log(`Eveniment: ${event.title} la ${event.location} pe ${event.startTime}`);
}

Omit

Omit construiește un tip prin excluderea setului de proprietăți K din T, unde K este o uniune de tipuri literale de șiruri de caractere care reprezintă numele proprietăților pe care doriți să le excludeți. Este opusul lui Pick.

Exemplu:

Folosind aceeași interfață Event, dacă doriți să creați un tip pentru evenimente noi, ați putea dori să excludeți proprietatea id, care este de obicei generată de backend:

type NewEvent = Omit<Event, "id">;

function createEvent(event: NewEvent): void {
  // ... implementare pentru a crea un eveniment nou
}

Record

Record construiește un tip de obiect ale cărui chei de proprietate sunt K și ale cărui valori de proprietate sunt T. K poate fi o uniune de tipuri literale de șiruri de caractere, tipuri literale de numere sau un simbol. Este perfect pentru crearea de dicționare sau hărți (maps).

Exemplu:

Imaginați-vă că trebuie să stocați traduceri pentru interfața utilizator a aplicației dumneavoastră. Puteți utiliza Record pentru a defini un tip pentru traducerile dumneavoastră:

type Translations = Record<string, string>;

const enTranslations: Translations = {
  "hello": "Hello",
  "goodbye": "Goodbye",
  "welcome": "Welcome to our platform!"
};

const frTranslations: Translations = {
  "hello": "Bonjour",
  "goodbye": "Au revoir",
  "welcome": "Bienvenue sur notre plateforme !"
};

function translate(key: string, language: string): string {
  const translations = language === "en" ? enTranslations : frTranslations; //Simplificat
  return translations[key] || key; // Revine la cheie dacă nu se găsește nicio traducere
}

console.log(translate("hello", "en")); // Rezultat: Hello
console.log(translate("hello", "fr")); // Rezultat: Bonjour
console.log(translate("nonexistent", "en")); // Rezultat: nonexistent

Exclude

Exclude construiește un tip prin excluderea din T a tuturor membrilor uniunii care pot fi atribuiți lui U. Este util pentru a filtra anumite tipuri dintr-o uniune.

Exemplu:

S-ar putea să aveți un tip care reprezintă diferite tipuri de evenimente:

type EventType = "concert" | "conference" | "workshop" | "webinar";

Dacă doriți să creați un tip care exclude evenimentele de tip "webinar", puteți utiliza Exclude:

type PhysicalEvent = Exclude<EventType, "webinar">;

// PhysicalEvent este acum "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Particip la un ${event}`);
}

// attendPhysicalEvent("webinar"); // Eroare: Argumentul de tipul '"webinar"' nu poate fi atribuit parametrului de tipul '"concert" | "conference" | "workshop"'.

attendPhysicalEvent("concert"); // Valid

Extract

Extract construiește un tip prin extragerea din T a tuturor membrilor uniunii care pot fi atribuiți lui U. Este opusul lui Exclude.

Exemplu:

Folosind același EventType, puteți extrage tipul de eveniment webinar:

type OnlineEvent = Extract<EventType, "webinar">;

// OnlineEvent este acum "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Particip la un ${event} online`);
}

attendOnlineEvent("webinar"); // Valid
// attendOnlineEvent("concert"); // Eroare: Argumentul de tipul '"concert"' nu poate fi atribuit parametrului de tipul '"webinar"'.

NonNullable

NonNullable construiește un tip prin excluderea null și undefined din T.

Exemplu:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString este acum string

function processString(str: DefinitelyString): void {
  console.log(str.toUpperCase());
}

// processString(null); // Eroare: Argumentul de tipul 'null' nu poate fi atribuit parametrului de tipul 'string'.
// processString(undefined); // Eroare: Argumentul de tipul 'undefined' nu poate fi atribuit parametrului de tipul 'string'.
processString("hello"); // Valid

ReturnType

ReturnType construiește un tip constând din tipul de retur al funcției T.

Exemplu:

function greet(name: string): string {
  return `Hello, ${name}!`;
}

type Greeting = ReturnType<typeof greet>;

// Greeting este acum string

const message: Greeting = greet("World");

console.log(message);

Parameters

Parameters construiește un tip tuplu din tipurile parametrilor unei funcții de tip T.

Exemplu:

function logEvent(eventName: string, eventData: object): void {
  console.log(`Eveniment: ${eventName}`, eventData);
}

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams este acum [eventName: string, eventData: object]

const params: LogEventParams = ["user_login", { userId: "123", timestamp: Date.now() }];

logEvent(...params);

ConstructorParameters

ConstructorParameters construiește un tip tuplu sau tablou din tipurile parametrilor unui constructor de funcție de tip T. Acesta deduce tipurile argumentelor care trebuie pasate constructorului unei clase.

Exemplu:

class Greeter {
  greeting: string;

  constructor(message: string) {
    this.greeting = message;
  }

  greet() {
    return "Hello, " + this.greeting;
  }
}


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams este acum [message: string]

const paramsGreeter: GreeterParams = ["World"];
const greeterInstance = new Greeter(...paramsGreeter);

console.log(greeterInstance.greet()); // Afișează: Hello, World

Required

Required construiește un tip format din toate proprietățile lui T setate ca fiind obligatorii. Face toate proprietățile opționale să devină obligatorii.

Exemplu:

interface UserProfile {
  name: string;
  age?: number;
  email?: string;
}

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile este acum { name: string; age: number; email: string; }

const completeProfile: RequiredUserProfile = {
  name: "Alice",
  age: 30,
  email: "alice@example.com"
};

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Eroare: Proprietatea 'age' lipsește în tipul '{ name: string; }' dar este obligatorie în tipul 'Required'.

Tipuri Utilitare Avansate

Tipuri Literale Șablon (Template Literal Types)

Tipurile literale șablon vă permit să construiți noi tipuri literale de șiruri de caractere prin concatenarea tipurilor literale de șiruri de caractere existente, a tipurilor literale de numere și multe altele. Acest lucru permite o manipulare puternică a tipurilor bazată pe șiruri de caractere.

Exemplu:

type HTTPMethod = "GET" | "POST" | "PUT" | "DELETE";
type APIEndpoint = `/api/users` | `/api/products`;

type RequestURL = `${HTTPMethod} ${APIEndpoint}`;

// RequestURL este acum "GET /api/users" | "POST /api/users" | "PUT /api/users" | "DELETE /api/users" | "GET /api/products" | "POST /api/products" | "PUT /api/products" | "DELETE /api/products"

function makeRequest(url: RequestURL): void {
  console.log(`Se face o cerere către ${url}`);
}

makeRequest("GET /api/users"); // Valid
// makeRequest("INVALID /api/users"); // Eroare

Tipuri Condiționale (Conditional Types)

Tipurile condiționale vă permit să definiți tipuri care depind de o condiție exprimată ca o relație de tip. Ele folosesc cuvântul cheie infer pentru a extrage informații despre tip.

Exemplu:

type UnwrapPromise<T> = T extends Promise<infer U> ? U : T;

// Dacă T este un Promise, atunci tipul este U; altfel, tipul este T.

async function fetchData(): Promise<number> {
  return 42;
}


type Data = UnwrapPromise<ReturnType<typeof fetchData>>;

// Data este acum number

function processData(data: Data): void {
  console.log(data * 2);
}

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Obligatoriu
  city?: string; // Opțional
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Valorile inițiale ale formularului (câmpuri opționale)
type InitialFormValues = Partial<FormData>;

// Valorile actualizate ale formularului (unele câmpuri pot lipsi)
type UpdatedFormValues = Partial<FormData>;

// Câmpuri obligatorii pentru trimitere
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Utilizați aceste tipuri în componentele de formular
function initializeForm(initialValues: InitialFormValues): void { }
function updateForm(updates: UpdatedFormValues): void {}
function submitForm(data: RequiredForSubmission): void {}


const initialForm: InitialFormValues = { newsletterSubscription: true };

const updateFormValues: UpdatedFormValues = {
    firstName: "John",
    lastName: "Doe"
};

// const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test" }; // EROARE: Lipsește 'country' 
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //OK

interface APIResponse {
  user_id: string;
  first_name: string;
  last_name: string;
  email_address: string;
  profile_picture_url: string;
  is_active: boolean;
}

// Transformă răspunsul API într-un format mai lizibil
type UserData = {
  id: string;
  fullName: string;
  email: string;
  avatar: string;
  active: boolean;
};

function transformApiResponse(response: APIResponse): UserData {
  return {
    id: response.user_id,
    fullName: `${response.first_name} ${response.last_name}`,
    email: response.email_address,
    avatar: response.profile_picture_url,
    active: response.is_active
  };
}

function fetchAndTransformData(url: string): Promise<UserData> {
    return fetch(url)
        .then(response => response.json())
        .then(data => transformApiResponse(data));
}


// Puteți chiar impune tipul prin:

function saferTransformApiResponse(response: APIResponse): UserData {
    const {user_id, first_name, last_name, email_address, profile_picture_url, is_active} = response;
    const transformed: UserData = {
        id: user_id,
        fullName: `${first_name} ${last_name}`,
        email: email_address,
        avatar: profile_picture_url,
        active: is_active
    };

    return transformed;
}

interface AppSettings {
  theme: "light" | "dark";
  language: string;
  notificationsEnabled: boolean;
  apiUrl?: string; // URL API opțional pentru diferite medii
  timeout?: number;  //Opțional
}

// Setări implicite
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Funcție pentru a fuziona setările utilizatorului cu setările implicite
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Utilizați setările fuzionate în aplicația dumneavoastră
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);