DEV Community

Jelena Petkovic
Jelena Petkovic

Posted on

Kada koristiti type, a kada interface u TypeScript-u?

#javascript #typescript #webdev

U TypeScript-u, i type i interface omogućavaju definisanje struktura podataka, ali postoje suptilne razlike između njih. U zavisnosti od zahteva aplikacije, jedan od njih može biti bolji izbor. U ovom blogu, istražićemo ključne razlike i dati smernice o tome kada koristiti type, a kada interface.

1. Proširivanje (Extending)

  • interface podržava nativno proširivanje. Možeš koristiti ključnu reč extends kako bi kreirao nove interfejse na osnovu postojećih. 
   interface IAnimal {
     name: string;
   }

   interface IDog extends IAnimal {
     breed: string;
   }
Enter fullscreen mode Exit fullscreen mode
  • type takođe podržava proširivanje, ali koristi drugačiji sintaksu (kombinovanje & operatorom). 
   type Animal = {
     name: string;
   };

   type Dog = Animal & {
     breed: string;
   };
Enter fullscreen mode Exit fullscreen mode

Kada koristiti?

Ako planiraš da kreiraš složenije strukture koje ćeš često proširivati, interface je prirodniji izbor. Za jednostavno kombinovanje nekoliko tipova, type može biti efikasniji.

2. Deklaracija sa istim imenom

  • interface dozvoljava višestruke deklaracije sa istim imenom, a TypeScript će ih automatski spajati. 
   interface IUser {
     name: string;
   }

   interface IUser {
     age: number;
   }

   const user: IUser = {
     name: "Jelena",
     age: 25,
   };
Enter fullscreen mode Exit fullscreen mode

Ove dve deklaracije se kombinuju u jedan interfejs sa oba polja (name i age).

  • type ne dozvoljava višestruke deklaracije istog imena. Svaki pokušaj deklarisanja istog tipa više puta prikazuje grešku. 
   type User = {
     name: string;
   };

   type User = {
     age: number;  // Greška - Duplicate identifier 'User'
   };
Enter fullscreen mode Exit fullscreen mode

Kada koristiti?

Ako želiš da možeš kasnije proširiti definiciju nekog tipa u različitim fajlovima, interface ti daje tu fleksibilnost.

3. Unije i tipovi koji nisu objekti

  • type podržava definisanje kompleksnijih tipova, poput unija (unions), primitivnih tipova (npr. string, number), tuple-ova itd. 
   type Status = "success" | "error" | "loading";
Enter fullscreen mode Exit fullscreen mode
  • interface se uglavnom koristi za definisanje objekata i nije pogodan za definisanje unija ili primitivnih tipova.

Kada koristiti?

Ako treba da definišeš unije, tuple-ove ili kombinacije primitivnih tipova, koristi type. Za rad sa objektima ili složenim strukturama podataka, koristi interface.

4. Reakcija zajednice

  • interface je dugo bio preporučivani pristup u TypeScript zajednici, posebno za tipiziranje objekata i klasa, jer je semantički jasnije da se radi o objektu. Takođe, React zajednica često preferira interface za definisanje props i state.

  • type je fleksibilniji i često se koristi kada je potrebno tipizirati unije, funkcije, ili kada treba kombinovati više tipova sa operatorom & (intersekcije).

Kada koristiti?

interface je bolji izbor za konzistentnost i eksplicitnost pri radu sa objektima i složenim strukturama. type je odličan kada ti treba fleksibilnost za definiranje tipova koji nisu objekti.

Ukratko: interface vs. type

Osobina interface type
Proširivanje (extends) Da Da (& operator)
Merging (spajanje definicija) Da Ne
Definisanje unija i primitivnih tipova Ne Da
Koristi se za Objekte i klase Unije, primitive, funkcije
Fleksibilnost Više za strukture objekata Više za fleksibilne tipove
Reakcija zajednice Preporučen za React props i state Fleksibilniji za kompleksne tipove

Kada koristiti type?

  • Kada treba da definišeš unije tipova (npr. "success" | "error" | "loading").
  • Kada treba da kreiraš tuple ili kombinaciju primitivnih tipova.
  • Kada koristiš funkcije i želiš da tipizuješ kompleksne povratne vrednosti.

Kada koristiti interface?

  • Kada definišeš objekte, posebno kada očekuješ da ćeš ih proširivati.
  • Kada radiš sa React props i state (zbog čitanosti i konvencije).
  • Kada ti je potrebno spajanje (merging) definicija sa istim imenom u različitim fajlovima.

Zaključak

type i interface imaju svoja mesta u TypeScript-u, i oba alata nude fleksibilnost u različitim situacijama. Ako radiš sa strukturama objekata i očekuješ njihovo proširivanje, interface je prirodniji izbor. Za fleksibilnije tipove, unije, i tuple-ove, type je bolji alat. Razumevanje ovih razlika pomaže ti da praviš čiste i održive TypeScript aplikacije.

Top comments (0)