TypeScript Exact Types: Strogo Podudaranje Oblika Objekata za Robustan Kôd

TypeScript, nadskup JavaScripta, donosi statičko tipiziranje u dinamični svijet web razvoja. Iako TypeScript nudi značajne prednosti u pogledu sigurnosti tipova i održivosti koda, njegov sustav strukturalnog tipiziranja ponekad može dovesti do neočekivanog ponašanja. Ovdje na scenu stupa koncept "točnih tipova" (exact types). Iako TypeScript nema ugrađenu značajku eksplicitno nazvanu "exact types", slično ponašanje možemo postići kombinacijom TypeScript značajki i tehnika. Ovaj blog post će se baviti načinom na koji se može nametnuti strože podudaranje oblika objekata u TypeScriptu kako bi se poboljšala robusnost koda i spriječile uobičajene pogreške.

Razumijevanje Strukturalnog Tipiziranja u TypeScriptu

TypeScript koristi strukturalno tipiziranje (poznato i kao duck typing), što znači da se kompatibilnost tipova određuje prema članovima tipova, a ne prema njihovim deklariranim imenima. Ako objekt ima sva svojstva koja zahtijeva neki tip, smatra se kompatibilnim s tim tipom, bez obzira na to ima li dodatna svojstva.

Na primjer:

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}

printPoint(myPoint); // Ovo radi ispravno, iako myPoint ima svojstvo 'z'

U ovom scenariju, TypeScript dopušta da se `myPoint` proslijedi funkciji `printPoint` jer sadrži potrebna svojstva `x` i `y`, iako ima i dodatno svojstvo `z`. Iako ova fleksibilnost može biti praktična, može dovesti i do suptilnih bugova ako nenamjerno proslijedite objekte s neočekivanim svojstvima.

Problem s Viškom Svojstava

Popustljivost strukturalnog tipiziranja ponekad može prikriti pogreške. Razmotrimo funkciju koja očekuje konfiguracijski objekt:

interface Config {
  apiUrl: string;
  timeout: number;
}

function setup(config: Config) {
  console.log(`API URL: ${config.apiUrl}`);
  console.log(`Timeout: ${config.timeout}`);
}

const myConfig = { apiUrl: "https://api.example.com", timeout: 5000, typo: true };

setup(myConfig); // TypeScript se ovdje ne buni!

console.log(myConfig.typo); // ispisuje true. Dodatno svojstvo tiho postoji

U ovom primjeru, `myConfig` ima dodatno svojstvo `typo`. TypeScript ne javlja pogrešku jer `myConfig` i dalje zadovoljava sučelje `Config`. Međutim, tipfeler nikada nije uhvaćen, a aplikacija se možda neće ponašati kako se očekuje ako je tipfeler trebao biti `typoo`. Ovi naizgled beznačajni problemi mogu prerasti u velike glavobolje prilikom debugiranja složenih aplikacija. Nedostajuće ili krivo napisano svojstvo može biti posebno teško otkriti kada se radi o objektima ugniježđenim unutar drugih objekata.

Pristupi Nametanju Točnih Tipova u TypeScriptu

Iako pravi "točni tipovi" nisu izravno dostupni u TypeScriptu, evo nekoliko tehnika za postizanje sličnih rezultata i nametanje strožeg podudaranja oblika objekata:

1. Korištenje Tvrdnji o Tipu (Type Assertions) s `Omit`

`Omit` pomoćni tip omogućuje stvaranje novog tipa isključivanjem određenih svojstava iz postojećeg tipa. U kombinaciji s tvrdnjom o tipu, ovo može pomoći u sprječavanju viška svojstava.

interface Point {
  x: number;
  y: number;
}

const myPoint = { x: 10, y: 20, z: 30 };

// Stvori tip koji uključuje samo svojstva iz Pointa
const exactPoint: Point = myPoint as Omit & Point;

// Greška: Tip '{ x: number; y: number; z: number; }' nije dodjeljiv tipu 'Point'.
// Objektni literal smije specificirati samo poznata svojstva, a 'z' ne postoji u tipu 'Point'.

function printPoint(point: Point) {
  console.log(`X: ${point.x}, Y: ${point.y}`);
}


//Ispravak
const myPointCorrect = { x: 10, y: 20 };
const exactPointCorrect: Point = myPointCorrect as Omit & Point;
printPoint(exactPointCorrect);

Ovaj pristup baca grešku ako `myPoint` ima svojstva koja nisu definirana u sučelju `Point`.

Objašnjenje: `Omit` stvara tip koji izostavlja sve ključeve prisutne u `Point` iz tipa `myPoint`. `& Point` zatim presijeca ovaj tip s tipom `Point`, čime se u suštini zahtijeva da objekt odgovara tipu `Point`. Tvrdnjom da je objekt ovog kombiniranog tipa, kompajler provjerava dodatna svojstva i baca grešku ako ih pronađe. To nas prisiljava da deklariramo ispravan oblik pri početnom definiranju našeg objekta.

2. Korištenje Funkcije za Stvaranje Objekata

Možete stvoriti tvorničku funkciju (factory function) koja prihvaća samo svojstva definirana u sučelju. Ovaj pristup pruža snažnu provjeru tipova u trenutku stvaranja objekta.

interface Config {
  apiUrl: string;
  timeout: number;
}

function createConfig(config: Config): Config {
  return {
    apiUrl: config.apiUrl,
    timeout: config.timeout,
  };
}

const myConfig = createConfig({ apiUrl: "https://api.example.com", timeout: 5000 });

//Ovo se neće kompajlirati:
//const myConfigError = createConfig({ apiUrl: "https://api.example.com", timeout: 5000, typo: true });
//Argument tipa '{ apiUrl: string; timeout: number; typo: true; }' nije dodjeljiv parametru tipa 'Config'.
// Objektni literal smije specificirati samo poznata svojstva, a 'typo' ne postoji u tipu 'Config'.

Vraćanjem objekta konstruiranog samo sa svojstvima definiranim u sučelju `Config`, osiguravate da se ne mogu provući dodatna svojstva. To čini stvaranje konfiguracije sigurnijim.

3. Korištenje Čuvara Tipova (Type Guards)

Čuvari tipova su funkcije koje sužavaju tip varijable unutar određenog opsega. Iako ne sprječavaju izravno višak svojstava, mogu vam pomoći da ih eksplicitno provjerite i poduzmete odgovarajuće mjere.

interface User {
  id: number;
  name: string;
}

function isUser(obj: any): obj is User {
  return (
    typeof obj === 'object' &&
    obj !== null &&
    'id' in obj && typeof obj.id === 'number' &&
    'name' in obj && typeof obj.name === 'string' &&
    Object.keys(obj).length === 2 //provjera broja ključeva. Napomena: krhko i ovisi o točnom broju ključeva u Useru.
  );
}

const potentialUser1 = { id: 123, name: "Alice" };
const potentialUser2 = { id: 456, name: "Bob", extra: true };

if (isUser(potentialUser1)) {
  console.log("Valid User:", potentialUser1.name);
} else {
  console.log("Invalid User");
}

if (isUser(potentialUser2)) {
  console.log("Valid User:", potentialUser2.name); // Ovdje se neće izvršiti
} else {
  console.log("Invalid User");
}

U ovom primjeru, čuvar tipa `isUser` provjerava ne samo prisutnost potrebnih svojstava, već i njihove tipove i *točan* broj svojstava. Ovaj pristup je eksplicitniji i omogućuje vam elegantno rukovanje nevažećim objektima. Međutim, provjera broja svojstava je krhka. Kad god `User` dobije/izgubi svojstva, provjeru je potrebno ažurirati.

4. Korištenje `Readonly` i `as const`

Dok `Readonly` sprječava izmjenu postojećih svojstava, a `as const` stvara n-torku ili objekt samo za čitanje gdje su sva svojstva duboko 'read-only' i imaju literalne tipove, mogu se koristiti za stvaranje strože definicije i provjere tipova u kombinaciji s drugim metodama. Međutim, nijedno samo po sebi ne sprječava višak svojstava.

interface Options {
  width: number;
  height: number;
}

//Stvori Readonly tip
type ReadonlyOptions = Readonly;

const options: ReadonlyOptions = { width: 100, height: 200 };

//options.width = 300; //greška: Nije moguće dodijeliti vrijednost 'width' jer je to svojstvo samo za čitanje.

//Korištenje as const
const config = { api_url: "https://example.com", timeout: 3000 } as const;

//config.timeout = 5000; //greška: Nije moguće dodijeliti vrijednost 'timeout' jer je to svojstvo samo za čitanje.

//Međutim, višak svojstava je i dalje dopušten:
const invalidOptions: ReadonlyOptions = { width: 100, height: 200, depth: 300 }; //nema greške. I dalje dopušta višak svojstava.


interface StrictOptions {
  readonly width: number;
  readonly height: number;
}

//Ovo će sada javiti grešku:
//const invalidStrictOptions: StrictOptions = { width: 100, height: 200, depth: 300 };
//Tip '{ width: number; height: number; depth: number; }' nije dodjeljiv tipu 'StrictOptions'.
//  Objektni literal smije specificirati samo poznata svojstva, a 'depth' ne postoji u tipu 'StrictOptions'.

Ovo poboljšava nepromjenjivost, ali sprječava samo mutaciju, a ne postojanje dodatnih svojstava. U kombinaciji s `Omit` ili funkcijskim pristupom, postaje učinkovitije.

5. Korištenje Biblioteka (npr. Zod, io-ts)

Biblioteke poput Zoda i io-ts nude moćne mogućnosti validacije tipova u vremenu izvođenja i definiranja shema. Ove biblioteke vam omogućuju definiranje shema koje precizno opisuju očekivani oblik vaših podataka, uključujući sprječavanje viška svojstava. Iako dodaju ovisnost u vremenu izvođenja, nude vrlo robusno i fleksibilno rješenje.

Primjer sa Zodom:

import { z } from 'zod';

const UserSchema = z.object({
  id: z.number(),
  name: z.string(),
});

type User = z.infer;

const validUser = { id: 1, name: "John" };
const invalidUser = { id: 2, name: "Jane", extra: true };

const parsedValidUser = UserSchema.parse(validUser);
console.log("Parsed Valid User:", parsedValidUser);

try {
  const parsedInvalidUser = UserSchema.parse(invalidUser);
  console.log("Parsed Invalid User:", parsedInvalidUser); // Ovo se neće izvršiti
} catch (error) {
  console.error("Validation Error:", error.errors);
}

Zodova metoda `parse` će baciti grešku ako ulazni podaci ne odgovaraju shemi, čime se učinkovito sprječavaju višak svojstava. To pruža validaciju u vremenu izvođenja i također generira TypeScript tipove iz sheme, osiguravajući dosljednost između vaših definicija tipova i logike validacije u vremenu izvođenja.

Najbolje Prakse za Nametanje Točnih Tipova

Evo nekoliko najboljih praksi koje treba uzeti u obzir pri nametanju strožeg podudaranja oblika objekata u TypeScriptu:

• Odaberite pravu tehniku: Najbolji pristup ovisi o vašim specifičnim potrebama i zahtjevima projekta. Za jednostavne slučajeve, tvrdnje o tipu s `Omit` ili tvorničke funkcije mogu biti dovoljne. Za složenije scenarije ili kada je potrebna validacija u vremenu izvođenja, razmislite o korištenju biblioteka poput Zoda ili io-ts.
• Budite dosljedni: Primjenjujte odabrani pristup dosljedno kroz cijelu kodnu bazu kako biste održali ujednačenu razinu sigurnosti tipova.
• Dokumentirajte svoje tipove: Jasno dokumentirajte svoja sučelja i tipove kako biste drugim developerima komunicirali očekivani oblik vaših podataka.
• Testirajte svoj kôd: Pišite jedinične testove kako biste provjerili da vaša ograničenja tipova rade kako se očekuje i da vaš kôd elegantno rukuje nevažećim podacima.
• Uzmite u obzir kompromise: Nametanje strožeg podudaranja oblika objekata može učiniti vaš kôd robusnijim, ali također može povećati vrijeme razvoja. Odvažite prednosti u odnosu na troškove i odaberite pristup koji ima najviše smisla za vaš projekt.
• Postupno usvajanje: Ako radite na velikoj postojećoj kodnoj bazi, razmislite o postupnom usvajanju ovih tehnika, počevši od najkritičnijih dijelova vaše aplikacije.
• Preferirajte sučelja u odnosu na aliase tipova pri definiranju oblika objekata: Sučelja su općenito preferirana jer podržavaju spajanje deklaracija, što može biti korisno za proširivanje tipova kroz različite datoteke.

Primjeri iz Stvarnog Svijeta

Pogledajmo neke stvarne scenarije u kojima točni tipovi mogu biti korisni:

• Sadržaj API zahtjeva (payloads): Prilikom slanja podataka API-ju, ključno je osigurati da sadržaj odgovara očekivanoj shemi. Nametanje točnih tipova može spriječiti greške uzrokovane slanjem neočekivanih svojstava. Na primjer, mnogi API-ji za obradu plaćanja izuzetno su osjetljivi na neočekivane podatke.
• Konfiguracijske datoteke: Konfiguracijske datoteke često sadrže velik broj svojstava, a tipfeleri mogu biti česti. Korištenje točnih tipova može pomoći u hvatanju tih tipfelera u ranoj fazi. Ako postavljate lokacije poslužitelja u cloud okruženju, tipfeler u postavkama lokacije (npr. eu-west-1 naspram eu-wet-1) postat će izuzetno teško za debugirati ako se ne uhvati unaprijed.
• Cjevovodi za transformaciju podataka: Prilikom transformacije podataka iz jednog formata u drugi, važno je osigurati da izlazni podaci odgovaraju očekivanoj shemi.
• Redovi poruka (Message queues): Prilikom slanja poruka kroz red poruka, važno je osigurati da je sadržaj poruke valjan i da sadrži ispravna svojstva.

Primjer: Konfiguracija za Internacionalizaciju (i18n)

Zamislite da upravljate prijevodima za višejezičnu aplikaciju. Mogli biste imati konfiguracijski objekt poput ovog:

interface Translation {
  greeting: string;
  farewell: string;
}

interface I18nConfig {
  locale: string;
  translations: Translation;
}

const englishConfig: I18nConfig = {
  locale: "en-US",
  translations: {
    greeting: "Hello",
    farewell: "Goodbye"
  }
};


//Ovo će biti problem, jer postoji višak svojstva, što tiho uvodi bug.
const spanishConfig: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós",
    typo: "unintentional translation"
  }
};

//Rješenje: Korištenje Omit
const spanishConfigCorrect: I18nConfig = {
  locale: "es-ES",
  translations: {
    greeting: "Hola",
    farewell: "Adiós"
  } as Omit & Translation
};

Bez točnih tipova, tipfeler u ključu prijevoda (poput dodavanja polja `typo`) mogao bi proći nezapaženo, što bi dovelo do nedostatka prijevoda u korisničkom sučelju. Nametanjem strožeg podudaranja oblika objekata, možete uhvatiti te greške tijekom razvoja i spriječiti ih da dođu u produkciju.

Zaključak

Iako TypeScript nema ugrađene "točne tipove", slične rezultate možete postići korištenjem kombinacije TypeScript značajki i tehnika kao što su tvrdnje o tipu s `Omit`, tvorničke funkcije, čuvari tipova, `Readonly`, `as const` i vanjske biblioteke poput Zoda i io-ts. Nametanjem strožeg podudaranja oblika objekata, možete poboljšati robusnost svog koda, spriječiti uobičajene greške i učiniti svoje aplikacije pouzdanijima. Ne zaboravite odabrati pristup koji najbolje odgovara vašim potrebama i biti dosljedni u njegovoj primjeni kroz cijelu kodnu bazu. Pažljivim razmatranjem ovih pristupa, možete preuzeti veću kontrolu nad tipovima svoje aplikacije i povećati dugoročnu održivost.