A TypeScript segédtípusok elsajátítása: Gyakorlati útmutató globális fejlesztőknek

A TypeScript beépített segédtípusok (utility types) hatékony készletét kínálja, amelyek jelentősen javíthatják a kód típusbiztonságát, olvashatóságát és karbantarthatóságát. Ezek a segédtípusok lényegében előre definiált típusátalakítások, amelyeket meglévő típusokra alkalmazhat, így elkerülve az ismétlődő és hibalehetőségeket rejtő kód írását. Ez az útmutató különböző segédtípusokat mutat be gyakorlati példákkal, amelyek relevánsak a világ minden táján élő fejlesztők számára.

Miért használjunk segédtípusokat?

A segédtípusok általános típusmanipulációs forgatókönyveket kezelnek. Alkalmazásukkal a következőket érheti el:

• Csökkentse a boilerplate kódot: Kerülje az ismétlődő típusdefiníciók írását.
• Javítsa a típusbiztonságot: Biztosítsa, hogy a kód megfeleljen a típuskorlátozásoknak.
• Növelje a kód olvashatóságát: Tegye tömörebbé és könnyebben érthetővé a típusdefiníciókat.
• Növelje a karbantarthatóságot: Egyszerűsítse a módosításokat és csökkentse a hibák bevezetésének kockázatát.

Alapvető segédtípusok

Partial<T>

A Partial<T> olyan típust hoz létre, ahol T összes tulajdonsága opcionálisra van állítva. Ez különösen hasznos, ha részleges frissítésekhez vagy konfigurációs objektumokhoz szeretne típust létrehozni.

Példa:

Képzelje el, hogy egy e-kereskedelmi platformot épít, amelynek ügyfelei különböző régiókból származnak. Van egy Customer típusa:

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;
  }
}

Amikor egy ügyfél adatait frissíti, előfordulhat, hogy nem akarja az összes mezőt megkövetelni. A Partial<Customer> lehetővé teszi, hogy olyan típust definiáljon, ahol a Customer összes tulajdonsága opcionális:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... implementáció az ügyfél frissítésére a megadott azonosítóval
}

updateCustomer("123", { firstName: "John", lastName: "Doe" }); // Érvényes
updateCustomer("456", { address: { city: "London" } }); // Érvényes

Readonly<T>

A Readonly<T> olyan típust hoz létre, ahol T összes tulajdonsága readonly-ra van állítva, megakadályozva a módosítást az inicializálás után. Ez értékes az immutabilitás biztosításához.

Példa:

Vegyünk egy konfigurációs objektumot a globális alkalmazásához:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Hozzáadott verzió
}

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

A konfiguráció véletlen módosításának elkerülése érdekében az inicializálás után használhatja a Readonly<AppConfig> típust:

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"; // Hiba: Nem lehet értékül adni az 'apiUrl'-nek, mert az csak olvasható tulajdonság.

Pick<T, K>

A Pick<T, K> olyan típust hoz létre, amely T-ből kiválasztja a K tulajdonságok halmazát, ahol K egy string literál típusok uniója, amelyek a belefoglalni kívánt tulajdonságneveket reprezentálják.

Példa:

Tegyük fel, hogy van egy Event interfésze különböző tulajdonságokkal:

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

Ha csak a title, location és startTime tulajdonságokra van szüksége egy adott megjelenítési komponenshez, használhatja a Pick típust:

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

function displayEventSummary(event: EventSummary): void {
  console.log(`Esemény: ${event.title} helyszín: ${event.location} időpont: ${event.startTime}`);
}

Omit<T, K>

Az Omit<T, K> olyan típust hoz létre, amely kizárja T-ből a K tulajdonságok halmazát, ahol K egy string literál típusok uniója, amelyek a kizárni kívánt tulajdonságneveket reprezentálják. Ez a Pick ellentéte.

Példa:

Ugyanazt az Event interfészt használva, ha új események létrehozására szeretne típust létrehozni, előfordulhat, hogy ki szeretné zárni az id tulajdonságot, amelyet jellemzően a backend generál:

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

function createEvent(event: NewEvent): void {
  // ... implementáció egy új esemény létrehozására
}

Record<K, T>

A Record<K, T> olyan objektumtípust hoz létre, amelynek tulajdonságkulcsai K, tulajdonságértékei pedig T. A K lehet string literál típusok, szám literál típusok vagy szimbólumok uniója. Ez tökéletes szótárak vagy térképek létrehozására.

Példa:

Képzelje el, hogy fordításokat kell tárolnia alkalmazása felhasználói felületéhez. A Record segítségével definiálhat típust a fordításokhoz:

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; //Egyszerűsített
  return translations[key] || key; // Visszaesés a kulcsra, ha nem található fordítás
}

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

Exclude<T, U>

Az Exclude<T, U> olyan típust hoz létre, amely kizárja T-ből az összes olyan uniótagot, amely U-hez hozzárendelhető. Hasznos a specifikus típusok kiszűrésére egy unióból.

Példa:

Lehet, hogy van egy típusa, amely különböző eseménytípusokat reprezentál:

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

Ha olyan típust szeretne létrehozni, amely kizárja a "webinar" eseményeket, használhatja az Exclude típust:

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

// A PhysicalEvent most "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Részt vesz a következőn: ${event}`);
}

// attendPhysicalEvent("webinar"); // Hiba: Az '"webinar"' típusú argumentum nem hozzárendelhető a '"concert" | "conference" | "workshop"' típusú paraméterhez.

attendPhysicalEvent("concert"); // Érvényes

Extract<T, U>

Az Extract<T, U> olyan típust hoz létre, amely T-ből kinyeri az összes olyan uniótagot, amely U-hez hozzárendelhető. Ez az Exclude ellentéte.

Példa:

Ugyanazt az EventType típust használva kinyerheti a webinár eseménytípust:

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

// Az OnlineEvent most "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Részt vesz a következő online eseményen: ${event}`);
}

attendOnlineEvent("webinar"); // Érvényes
// attendOnlineEvent("concert"); // Hiba: Az '"concert"' típusú argumentum nem hozzárendelhető a '"webinar"' típusú paraméterhez.

NonNullable<T>

A NonNullable<T> olyan típust hoz létre, amely kizárja a null és undefined értékeket T-ből.

Példa:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// A DefinitelyString most string

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

// processString(null); // Hiba: A 'null' típusú argumentum nem hozzárendelhető a 'string' típusú paraméterhez.
// processString(undefined); // Hiba: Az 'undefined' típusú argumentum nem hozzárendelhető a 'string' típusú paraméterhez.
processString("hello"); // Érvényes

ReturnType<T>

A ReturnType<T> egy függvény T visszatérési típusából álló típust hoz létre.

Példa:

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

type Greeting = ReturnType<typeof greet>;

// A Greeting most string

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

console.log(message);

Parameters<T>

A Parameters<T> egy tuple típust hoz létre egy T függvénytípus paramétereinek típusaiból.

Példa:

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

type LogEventParams = Parameters<typeof logEvent>;

// A LogEventParams most [eventName: string, eventData: object]

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

logEvent(...params);

ConstructorParameters<T>

A ConstructorParameters<T> egy tuple vagy tömb típust hoz létre egy konstruktor függvénytípus T paramétereinek típusaiból. Lekérdezi azokat az argumentumtípusokat, amelyeket egy osztály konstruktorának át kell adni.

Példa:

class Greeter {
  greeting: string;

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

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


type GreeterParams = ConstructorParameters<typeof Greeter>;

// A GreeterParams most [message: string]

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

console.log(greeterInstance.greet()); // Kimenet: Hello, World

Required<T>

A Required<T> olyan típust hoz létre, amely T összes tulajdonságát kötelezőre állítja. Minden opcionális tulajdonságot kötelezővé tesz.

Példa:

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

type RequiredUserProfile = Required<UserProfile>;

// A RequiredUserProfile most { name: string; age: number; email: string; }

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

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Hiba: Hiányzik az 'age' tulajdonság a '{ name: string; }' típusban, de kötelező a 'Required' típusban.

Haladó segédtípusok

Template Literál Típusok

A template literál típusok lehetővé teszik új string literál típusok létrehozását meglévő string literál típusok, szám literál típusok és egyebek összefűzésével. Ez erőteljes string-alapú típusmanipulációt tesz lehetővé.

Példa:

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

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

// A RequestURL most "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(`Kérés küldése ide: ${url}`);
}

makeRequest("GET /api/users"); // Érvényes
// makeRequest("INVALID /api/users"); // Hiba

Feltételes Típusok

A feltételes típusok lehetővé teszik olyan típusok definiálását, amelyek egy feltételtől függnek, amelyet típuskapcsolatként fejeznek ki. Az infer kulcsszót használják a típusinformációk kinyerésére.

Példa:

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

// Ha T egy Promise, akkor a típus U; különben a típus T.

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


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

// A Data most number

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

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Kötelező
  city?: string; // Opcionális
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Kezdeti űrlapértékek (opcionális mezők)
type InitialFormValues = Partial<FormData>;

// Frissített űrlapértékek (néhány mező hiányozhat)
type UpdatedFormValues = Partial<FormData>;

// Kötelező mezők a beküldéshez
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Használja ezeket a típusokat az űrlapkomponenseiben
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" }; // HIBA: Hiányzik a '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;
}

// Alakítsa át az API választ olvashatóbb formátumba
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));
}


// Akár a típust is kikényszerítheti így:

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; // Opcionális API URL különböző környezetekhez
  timeout?: number;  //Opcionális
}

// Alapértelmezett beállítások
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Függvény a felhasználói beállítások egyesítésére az alapértelmezett beállításokkal
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Használja az egyesített beállításokat az alkalmazásában
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);