Ovladavanje TypeScript pomoćnim tipovima: Praktični vodič za globalne programere

TypeScript nudi moćan skup ugrađenih pomoćnih tipova koji mogu značajno poboljšati tipsku sigurnost, čitljivost i održivost vašeg koda. Ovi pomoćni tipovi su u suštini unaprijed definirane transformacije tipova koje možete primijeniti na postojeće tipove, štedeći vas od pisanja ponavljajućeg i pogreškama sklonog koda. Ovaj vodič će istražiti različite pomoćne tipove s praktičnim primjerima koji su relevantni za programere diljem svijeta.

Zašto koristiti pomoćne tipove?

Pomoćni tipovi rješavaju uobičajene scenarije manipulacije tipovima. Koristeći ih, možete:

• Smanjiti ponavljajući kod (boilerplate): Izbjegnite pisanje ponavljajućih definicija tipova.
• Poboljšati tipsku sigurnost: Osigurajte da se vaš kod pridržava ograničenja tipova.
• Poboljšati čitljivost koda: Učinite svoje definicije tipova sažetijima i lakšima za razumijevanje.
• Povećati održivost: Pojednostavite izmjene i smanjite rizik od uvođenja pogrešaka.

Osnovni pomoćni tipovi

Partial<T>

Partial<T> stvara tip u kojem su sva svojstva tipa T postavljena kao opcionalna. Ovo je posebno korisno kada želite stvoriti tip za djelomična ažuriranja ili konfiguracijske objekte.

Primjer:

Zamislite da gradite platformu za e-trgovinu s kupcima iz različitih regija. Imate 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;
  }
}

Prilikom ažuriranja podataka o kupcu, možda nećete htjeti zahtijevati sva polja. Partial<Customer> vam omogućuje da definirate tip u kojem su sva svojstva tipa Customer opcionalna:

type PartialCustomer = Partial<Customer>;

function updateCustomer(id: string, updates: PartialCustomer): void {
  // ... implementacija za ažuriranje kupca s danim ID-om
}

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

Readonly<T>

Readonly<T> stvara tip u kojem su sva svojstva tipa T postavljena kao readonly (samo za čitanje), sprječavajući izmjene nakon inicijalizacije. Ovo je vrijedno za osiguravanje nepromjenjivosti (immutability).

Primjer:

Uzmimo u obzir konfiguracijski objekt za vašu globalnu aplikaciju:

interface AppConfig {
  apiUrl: string;
  theme: string;
  supportedLanguages: string[];
  version: string; // Dodana verzija
}

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

Kako biste spriječili slučajnu izmjenu konfiguracije nakon inicijalizacije, možete koristiti Readonly<AppConfig>:

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"; // Greška: Nije moguće dodijeliti 'apiUrl' jer je svojstvo samo za čitanje.

Pick<T, K>

Pick<T, K> stvara tip odabirom skupa svojstava K iz tipa T, gdje je K unija literalnih tipova stringova koji predstavljaju nazive svojstava koje želite uključiti.

Primjer:

Recimo da imate sučelje Event s različitim svojstvima:

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

Ako trebate samo title, location i startTime za određenu komponentu prikaza, možete koristiti Pick:

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

function displayEventSummary(event: EventSummary): void {
  console.log(`Događaj: ${event.title} na ${event.location} dana ${event.startTime}`);
}

Omit<T, K>

Omit<T, K> stvara tip isključivanjem skupa svojstava K iz tipa T, gdje je K unija literalnih tipova stringova koji predstavljaju nazive svojstava koje želite isključiti. Ovo je suprotno od Pick.

Primjer:

Koristeći isto sučelje Event, ako želite stvoriti tip za kreiranje novih događaja, možda ćete htjeti isključiti svojstvo id, koje se obično generira na pozadini (backendu):

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

function createEvent(event: NewEvent): void {
  // ... implementacija za stvaranje novog događaja
}

Record<K, T>

Record<K, T> stvara tip objekta čiji su ključevi svojstava K, a vrijednosti svojstava T. K može biti unija literalnih tipova stringova, brojeva ili simbola. Ovo je savršeno za stvaranje rječnika ili mapa.

Primjer:

Zamislite da trebate pohraniti prijevode za korisničko sučelje vaše aplikacije. Možete koristiti Record kako biste definirali tip za svoje prijevode:

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; // Pojednostavljeno
  return translations[key] || key; // Vraća ključ ako prijevod nije pronađen
}

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

Exclude<T, U>

Exclude<T, U> stvara tip isključivanjem iz T svih članova unije koji su dodjeljivi U. Korisno je za filtriranje specifičnih tipova iz unije.

Primjer:

Možda imate tip koji predstavlja različite vrste događaja:

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

Ako želite stvoriti tip koji isključuje "webinar" događaje, možete koristiti Exclude:

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

// PhysicalEvent je sada "concert" | "conference" | "workshop"

function attendPhysicalEvent(event: PhysicalEvent): void {
  console.log(`Prisustvovanje ${event}u`);
}

// attendPhysicalEvent("webinar"); // Greška: Argument tipa '"webinar"' nije dodjeljiv parametru tipa '"concert" | "conference" | "workshop"'.

attendPhysicalEvent("concert"); // Ispravno

Extract<T, U>

Extract<T, U> stvara tip izdvajanjem iz T svih članova unije koji su dodjeljivi U. Ovo je suprotno od Exclude.

Primjer:

Koristeći isti EventType, možete izdvojiti tip događaja webinar:

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

// OnlineEvent je sada "webinar"

function attendOnlineEvent(event: OnlineEvent): void {
  console.log(`Prisustvovanje ${event}u online`);
}

attendOnlineEvent("webinar"); // Ispravno
// attendOnlineEvent("concert"); // Greška: Argument tipa '"concert"' nije dodjeljiv parametru tipa '"webinar"'.

NonNullable<T>

NonNullable<T> stvara tip isključivanjem null i undefined iz T.

Primjer:

type MaybeString = string | null | undefined;

type DefinitelyString = NonNullable<MaybeString>;

// DefinitelyString je sada string

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

// processString(null); // Greška: Argument tipa 'null' nije dodjeljiv parametru tipa 'string'.
// processString(undefined); // Greška: Argument tipa 'undefined' nije dodjeljiv parametru tipa 'string'.
processString("hello"); // Ispravno

ReturnType<T>

ReturnType<T> stvara tip koji se sastoji od povratnog tipa funkcije T.

Primjer:

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

type Greeting = ReturnType<typeof greet>;

// Greeting je sada string

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

console.log(message);

Parameters<T>

Parameters<T> stvara tip n-torke (tuple) iz tipova parametara funkcijskog tipa T.

Primjer:

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

type LogEventParams = Parameters<typeof logEvent>;

// LogEventParams je sada [eventName: string, eventData: object]

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

logEvent(...params);

ConstructorParameters<T>

ConstructorParameters<T> stvara tip n-torke ili polja iz tipova parametara konstruktorske funkcije T. Zaključuje tipove argumenata koji se trebaju proslijediti konstruktoru klase.

Primjer:

class Greeter {
  greeting: string;

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

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


type GreeterParams = ConstructorParameters<typeof Greeter>;

// GreeterParams je sada [message: string]

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

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

Required<T>

Required<T> stvara tip koji se sastoji od svih svojstava iz T postavljenih kao obavezna. Sva opcionalna svojstva čini obaveznima.

Primjer:

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

type RequiredUserProfile = Required<UserProfile>;

// RequiredUserProfile je sada { name: string; age: number; email: string; }

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

// const incompleteProfile: RequiredUserProfile = { name: "Bob" }; // Greška: Svojstvo 'age' nedostaje u tipu '{ name: string; }' ali je obavezno u tipu 'Required'.

Napredni pomoćni tipovi

Predložni literalni tipovi

Predložni literalni tipovi omogućuju vam stvaranje novih literalnih tipova stringova spajanjem postojećih literalnih tipova stringova, brojeva i više. To omogućuje moćnu manipulaciju tipovima temeljenim na stringovima.

Primjer:

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

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

// RequestURL je sada "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(`Stvaranje zahtjeva prema ${url}`);
}

makeRequest("GET /api/users"); // Ispravno
// makeRequest("INVALID /api/users"); // Greška

Uvjetni tipovi

Uvjetni tipovi omogućuju vam definiranje tipova koji ovise o uvjetu izraženom kao odnos tipova. Koriste ključnu riječ infer za izdvajanje informacija o tipu.

Primjer:

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

// Ako je T Promise, onda je tip U; inače, tip je T.

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


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

// Data je sada number

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

processData(await fetchData());

interface FormData {
  firstName: string;
  lastName: string;
  email: string;
  country: string; // Obavezno
  city?: string; // Opcionalno
  postalCode?: string;
  newsletterSubscription?: boolean;
}

// Početne vrijednosti obrasca (opcionalna polja)
type InitialFormValues = Partial<FormData>;

// Ažurirane vrijednosti obrasca (neka polja mogu nedostajati)
type UpdatedFormValues = Partial<FormData>;

// Obavezna polja za slanje
type RequiredForSubmission = Required<Pick<FormData, 'firstName' | 'lastName' | 'email' | 'country'>>;

// Koristite ove tipove u vašim komponentama obrasca
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" }; // GREŠKA: Nedostaje 'country' 
const submissionData: RequiredForSubmission = { firstName: "test", lastName: "test", email: "test", country: "USA" }; //U REDU

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

// Transformirajte API odgovor u čitljiviji format
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));
}


// Možete čak i nametnuti tip pomoću:

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; // Opcionalni API URL za različita okruženja
  timeout?: number;  //Opcionalno
}

// Zadane postavke
const defaultSettings: AppSettings = {
  theme: "light",
  language: "en",
  notificationsEnabled: true
};

// Funkcija za spajanje korisničkih postavki sa zadanima
function mergeSettings(userSettings: Partial<AppSettings>): AppSettings {
  return { ...defaultSettings, ...userSettings };
}

// Koristite spojene postavke u svojoj aplikaciji
const mergedSettings = mergeSettings({ theme: "dark", apiUrl: "https://customapi.example.com" });
console.log(mergedSettings);