Enums vs Object typing u typescript-u

1. Što su TypeScript Enums?

Enums u TypeScript-u vam omogućuju definiranje niza imenovanih konstanti. Iako to može zvučati praktično, enums često uključuju skrivene složenosti koje mogu utjecati na performanse i debugging.

12345enum Environment {
  PRODUCTION = "PRODUCTION",
  DEVELOP = "DEVELOP",
  STAGE = "STAGE"
}

Na prvi pogled, ovaj jednostavan isječak koda može izgledati bezopasno. Međutim, enumi mogu generirati dodatni JavaScript kod tijekom procesa transpilacije, što može rezultirati složenim problemima s otklanjanjem pogrešaka i razlikama u različitim build okruženjima.

123456export var Environment;
(function (Environment) {
    Environment["PRODUCTION"] = "PRODUCTION";
    Environment["DEVELOP"] = "DEVELOP";
    Environment["STAGE"] = "STAGE";
})(Environment || (Environment = {}));

To je ono u što se kompajlira typecript enum. Zašto ovako? Da bismo odgovorili na ovo pitanje, moramo ići dublje od ovog primjera. Što bi se dogodilo kada bismo ovo imali kao enum?

12345enum Environment {
  PRODUCTION,
  DEVELOP,
  STAGE
}

Što mislite da bi se dogodilo kada se ovo kompajlira?

1234567"use strict";
var Environment;
(function (Environment) {
    Environment[Environment["PRODUCTION"] = 0] = "PRODUCTION";
    Environment[Environment["DEVELOP"] = 1] = "DEVELOP";
    Environment[Environment["STAGE"] = 2] = "STAGE";
})(Environment || (Environment = {}));

Nije ono što ste očekivali, zar ne? Ovaj bi vas output mogao još više zbuniti, ali kada enum okruženja pretvorite u objekt, dobit ćete ovaj output

12345678{
  "0": "PRODUCTION",
  "1": "DEVELOP",
  "2": "STAGE",
  "PRODUCTION": 0,
  "DEVELOP": 1,
  "STAGE": 2
} 

Zato postoje dodjele brojeva, ti brojevi predstavljaju indeks unutar enuma.

Kako koristite enum kao tip?

12345678const getEnvironmentData = (env: Environment)=>{}

// Radi ✅
getEnvironmentData(0)
getEnvironmentData(Environment.PRODUCTION)

// Ne radi ❌
getEnvironmentData("PRODUCTION")

Postoji način za uklanjanje dodatnog koda korištenjem

12345const enum Environment {
  PRODUCTION = "PRODUCTION",
  DEVELOP = "DEVELOP",
  STAGE = "STAGE"
}

Ali ovo uvodi dodatne probleme s rubnim slučajem jer uklanja cijeli objekt u vremenu izvođenja.

2. Introducing Typed Objects

Tipizirani objekti koriste značajku as const u TypeScriptu, osiguravajući da vrijednosti ostanu literalne vrste. Ovaj pristup nudi jasnoću i održava vaš JavaScript output predvidljivim.

12345const Environment = {
  PRODUCTION: "PRODUCTION",
  DEVELOPMENT: "DEVELOPMENT",
  STAGE: "STAGE"
} as const;

Korištenjem ove as const anotacije, svaka se vrijednost u objektu tretira kao literalni tip, održavajući sigurnost tipa bez dodatnih troškova koji dolaze s enumima. Kada se kompajlira, ovo je output, bez dodatnog koda.

Iako ovo uklanja dodatnu složenost krajnjeg kompajliranog koda, raw objekt ne može se izravno koristiti kao tip, moramo napraviti neke manipulacije tipom. Za korištenje kao tipa na način na koji se koristi enum potreban je dodatni kod.

123456789const Environment = {
  PRODUCTION: "PRODUCTION",
  DEVELOPMENT: "DEVELOPMENT",
  STAGE: "STAGE"
} as const;

type TEnviroment =  typeof Environment[keyof typeof Environment]

const getEnvironmentData = (env:  TEnviroment)=>{}

Ovako možemo izvući tip iz objekta, kako ćemo ga sada koristiti?

1234const getEnvironmentData = (env:  TEnviroment)=>{}

getEnvironmentData('PRODUCTION')
getEnvironmentData(Environment.PRODUCTION)

Kao što vidite, možete ga upisati kao enum, ali opet mu možete dati string verziju vrijednosti jer je u ovom slučaju "PRODUCTION" također valjan tip. To znači da vam nije potreban dodatni import samo da biste dobili enum vrijednost.

Zaključak

To ne znači da više ne možete ili ne biste trebali koristiti enume. Ovaj post na blogu želi vam pokazati da postoje druga, bolja rješenja.

Korištenjem tipiziranih objekata umjesto enuma, dobivate:

• Čišći završni kod
• Lakše debuggirnje
• Bolji type safety
• Lakše održavanje koda

U AS Agency, vjerujemo da ove prednosti pridonose izgradnji skalabilnih, pouzdanih aplikacija spremnih na budućnost. Tipizirani objekti samo su jedan primjer kako ostajemo na vrhuncu najboljih praksi TypeScripta kako bismo svojim klijentima pružili usluge web-razvoja vrhunske kvalitete.

Napisao Antonio Šumak

Osnivač AS Agency. Dizajniram i izrađujem brze web stranice za male tvrtke — i zapisujem ono što naučim usput.

— Antonio