TypeScript Enum-alternativ: Navigera konstanta asserteringar och unionstyper för robust kod

TypeScript, en kraftfull övermängd av JavaScript, introducerar statisk typning till webbutvecklingens dynamiska värld. Bland dess många funktioner har nyckelordet enum länge varit en standard för att definiera en uppsättning namngivna konstanter. Enums erbjuder ett tydligt sätt att representera en fast samling relaterade värden, vilket förbättrar läsbarheten och typsäkerheten.

Men i takt med att TypeScript-ekosystemet mognar och projekt växer i komplexitet och omfattning, ifrågasätter utvecklare globalt alltmer enums traditionella nytta. Även om de är okomplicerade för enkla fall, introducerar enums vissa beteenden och körtidsegenskaper som ibland kan leda till oväntade problem, påverka paketstorleken eller komplicera tree-shaking-optimeringar. Detta har lett till en omfattande utforskning av alternativ.

Denna omfattande guide granskar djupt två framstående och mycket effektiva alternativ till TypeScript enums: Unionstyper med Sträng-/Numeriska Literaler och Konstanta Asserteringar (as const). Vi kommer att utforska deras mekanismer, praktiska tillämpningar, fördelar och avvägningar, vilket ger dig kunskapen att fatta välgrundade designbeslut för dina projekt, oavsett deras storlek eller det globala team som arbetar med dem. Vårt mål är att ge dig möjlighet att skriva mer robust, underhållbar och effektiv TypeScript-kod.

TypeScript Enum: En snabb återblick

Innan vi dyker in i alternativen, låt oss kort återbesöka den traditionella TypeScript enum. Enums låter utvecklare definiera en uppsättning namngivna konstanter, vilket gör koden mer läsbar och förhindrar att "magiska strängar" eller "magiska nummer" sprids ut i en applikation. De finns i två primära former: numeriska och sträng-enums.

Numeriska Enums

Som standard är TypeScript-enums numeriska. Det första medlemmen initieras med 0, och varje efterföljande medlem auto-inkrementeras.

            enum Direction {
  Up,
  Down,
  Left,
  Right,
}

let currentDirection: Direction = Direction.Up;
console.log(currentDirection); // Utdata: 0
console.log(Direction.Left);    // Utdata: 2

            

              
                Copy
              
            
          

Du kan också manuellt initiera numeriska enum-medlemmar:

            enum StatusCode {
  Success = 200,
  NotFound = 404,
  ServerError = 500,
}

let status: StatusCode = StatusCode.NotFound;
console.log(status); // Utdata: 404

            

              
                Copy
              
            
          

En speciell egenskap hos numeriska enums är omvänd mappning. Vid körtid kompileras en numerisk enum till ett JavaScript-objekt som mappar både namn till värden och värden tillbaka till namn.

            enum UserRole {
  Admin = 1,
  Editor,
  Viewer,
}

console.log(UserRole[1]); // Utdata: "Admin"
console.log(UserRole.Editor); // Utdata: 2
console.log(UserRole[2]); // Utdata: "Editor"

/*
Kompileras till JavaScript:
var UserRole;
(function (UserRole) {
    UserRole[UserRole["Admin"] = 1] = "Admin";
    UserRole[UserRole["Editor"] = 2] = "Editor";
    UserRole[UserRole["Viewer"] = 3] = "Viewer";
})(UserRole || (UserRole = {}));
*/

            

              
                Copy
              
            
          

Sträng-Enums

Sträng-enums föredras ofta för sin läsbarhet vid körtid, eftersom de inte förlitar sig på auto-inkrementerande nummer. Varje medlem måste initieras med en strängliteral.

            enum UserPermission {
  Read = "READ_PERMISSION",
  Write = "WRITE_PERMISSION",
  Delete = "DELETE_PERMISSION",
}

let permission: UserPermission = UserPermission.Write;
console.log(permission); // Utdata: "WRITE_PERMISSION"

            

              
                Copy
              
            
          

Sträng-enums får inte en omvänd mappning, vilket generellt är bra för att undvika oväntat körtidsbeteende och minska den genererade JavaScript-utdata.

Viktiga överväganden och potentiella fallgropar med Enums

Även om enums erbjuder bekvämlighet, kommer de med vissa egenskaper som kräver noggrann övervägning:

• Körtidsobjekt: Både numeriska och sträng-enums genererar JavaScript-objekt vid körtid. Detta innebär att de bidrar till applikationens paketstorlek, även om du bara använder dem för typkontroll. För små projekt kan detta vara försumbart, men i storskaliga applikationer med många enums kan det ackumuleras.
• Brist på Tree-Shaking: Eftersom enums är körtidsobjekt, tree-shakas de ofta inte effektivt av moderna paketerare som Webpack eller Rollup. Om du definierar en enum men bara använder en eller två av dess medlemmar, kan hela enum-objektet fortfarande inkluderas i ditt slutliga paket. Detta kan leda till större filstorlekar än nödvändigt.
• Omvänd mappning (Numeriska Enums): Funktionen för omvänd mappning i numeriska enums, även om den ibland är användbar, kan också vara en källa till förvirring och oväntat beteende. Den lägger till extra kod till JavaScript-utdata och kanske inte alltid är den önskade funktionaliteten. Till exempel kan serialisering av numeriska enums ibland leda till att endast numret lagras, vilket kanske inte är lika beskrivande som en sträng.
• Transpileringskostnad: Kompileringen av enums till JavaScript-objekt medför en liten extra kostnad för byggprocessen jämfört med att bara definiera konstanta variabler.
• Begränsad Iteration: Att direkt iterera över enum-värden kan vara icke-trivialt, särskilt med numeriska enums på grund av den omvända mappningen. Du behöver ofta hjälpfunktioner eller specifika loopar för att få bara de önskade värdena.

Dessa punkter belyser varför många globala utvecklingsteam, särskilt de som fokuserar på prestanda och paketstorlek, söker alternativ som ger liknande typsäkerhet utan körtidsavtrycket eller andra komplexiteter.

Alternativ 1: Unionstyper med Literaler

Ett av de mest raka och kraftfulla alternativen till enums i TypeScript är användningen av Unionstyper med Sträng- eller Numeriska Literaler. Denna metod utnyttjar TypeScripts robusta typsystem för att definiera en uppsättning specifika, tillåtna värden vid kompileringstid, utan att introducera några nya konstruktioner vid körtid.

Vad är Unionstyper?

En unionstyp beskriver ett värde som kan vara en av flera typer. Till exempel betyder string | number att en variabel kan innehålla antingen en sträng eller ett nummer. När den kombineras med litteraltyper (t.ex. "success", 404), kan du definiera en typ som endast kan innehålla en specifik uppsättning fördefinierade värden.

Praktiskt Exempel: Definiera statusar med Unionstyper

Låt oss överväga ett vanligt scenario: att definiera en uppsättning möjliga statusar för ett databehandlingsjobb eller ett användarkonto. Med unionstyper ser detta rent och koncist ut:

            type JobStatus = "PENDING" | "IN_PROGRESS" | "COMPLETED" | "FAILED";

function processJob(status: JobStatus): void {
  if (status === "COMPLETED") {
    console.log("Job finished successfully.");
  } else if (status === "FAILED") {
    console.log("Job encountered an error.");
  } else {
    console.log(`Job is currently ${status}.`);
  }
}

let currentJobStatus: JobStatus = "IN_PROGRESS";
processJob(currentJobStatus);

// Detta skulle resultera i ett kompileringstidsfel:
// let invalidStatus: JobStatus = "CANCELLED"; // Fel: Typen '"CANCELLED"' kan inte tilldelas typen 'JobStatus'.

            

              
                Copy
              
            
          

För numeriska värden är mönstret identiskt:

            type HttpCode = 200 | 400 | 404 | 500;

function handleResponse(code: HttpCode): void {
  if (code === 200) {
    console.log("Operation successful.");
  } else if (code === 404) {
    console.log("Resource not found.");
  }
}

let responseStatus: HttpCode = 200;
handleResponse(responseStatus);

            

              
                Copy
              
            
          

Lägg märke till hur vi definierar ett type-alias här. Detta är en rent kompileringstids-konstruktion. När den kompileras till JavaScript, försvinner JobStatus helt enkelt, och sträng-/nummerliteralerna används direkt.

Fördelar med Unionstyper med Literaler

Denna metod erbjuder flera övertygande fördelar:

• Rent Kompileringstid: Unionstyper raderas helt under kompileringen. De genererar ingen JavaScript-kod vid körtid, vilket leder till mindre paketstorlekar och snabbare applikationsstarttider. Detta är en betydande fördel för prestandakritiska applikationer och de som distribueras globalt där varje kilobyte räknas.
• Utmärkt Typsäkerhet: TypeScript kontrollerar rigoröst tilldelningar mot de definierade litteraltyperna, vilket ger starka garantier för att endast giltiga värden används. Detta förhindrar vanliga buggar associerade med stavfel eller felaktiga värden.
• Optimal Tree-Shaking: Eftersom det inte finns något körtidsobjekt, stöder unionstyper i sig tree-shaking. Din paketerare inkluderar endast de faktiska sträng- eller numeriska literalerna du använder, inte ett helt objekt.
• Läsbarhet: För en fast uppsättning enkla, distinkta värden är typdefinitionen ofta mycket tydlig och lätt att förstå.
• Enkelhet: Inga nya språkkonstruktioner eller komplexa kompileringsartefakter introduceras. Det handlar bara om att utnyttja grundläggande TypeScript-typfunktioner.
• Direkt Värdeåtkomst: Du arbetar direkt med sträng- eller nummer-värdena, vilket förenklar serialisering och deserialisering, särskilt vid interaktion med API:er eller databaser som förväntar sig specifika strängidentifierare.

Nackdelar med Unionstyper med Literaler

Även om unionstyper är kraftfulla har de också vissa begränsningar:

• Repetition för associerad data: Om du behöver associera ytterligare data eller metadata med varje "enum"-medlem (t.ex. en visningsetikett, en ikon, en färg), kan du inte göra detta direkt inom unionstypdefinitionen. Du skulle vanligtvis behöva ett separat mappningsobjekt.
• Ingen direkt iteration av alla värden: Det finns inget inbyggt sätt att få en array av alla möjliga värden från en unionstyp vid körtid. Till exempel kan du inte enkelt få ["PENDING", "IN_PROGRESS", "COMPLETED", "FAILED"] direkt från JobStatus. Detta kräver ofta att man underhåller en separat array av värden om du behöver visa dem i ett användargränssnitt (t.ex. en rullgardinsmeny).
• Mindre centraliserat: Om uppsättningen av värden behövs både som en typ och som en array av körtidsvärden, kan du behöva definiera listan två gånger (en gång som en typ, en gång som en körtidsarray), vilket kan introducera potential för osynkronisering.

Trots dessa nackdelar, för många scenarier, tillhandahåller unionstyper en ren, prestandaeffektiv och typsäker lösning som väl överensstämmer med moderna JavaScript-utvecklingsmetoder.

Alternativ 2: Konstanta Asserteringar (as const)

as const-asserteringen, introducerad i TypeScript 3.4, är ett annat otroligt kraftfullt verktyg som erbjuder ett utmärkt alternativ till enums, särskilt när du behöver ett körtidsobjekt och robust typinferens. Det låter TypeScript härleda den snävaste möjliga typen för literala uttryck.

Vad är Konstanta Asserteringar?

När du tillämpar as const på en variabel, en array eller ett objektliteral, behandlar TypeScript alla egenskaper inom den literalen som readonly och härleder deras litteraltyper istället för bredare typer (t.ex. "foo" istället för string, 123 istället för number). Detta gör det möjligt att härleda mycket specifika unionstyper från körtidsdatastrukturer.

Praktiskt Exempel: Skapa ett "Pseudo-Enum"-objekt med as const

Låt oss återbesöka vårt jobbstatus-exempel. Med as const kan vi definiera en enda källa för våra statusar, som fungerar både som ett körtidsobjekt och en grund för typdefinitioner.

            const JobStatuses = {
  PENDING: "PENDING",
  IN_PROGRESS: "IN_PROGRESS",
  COMPLETED: "COMPLETED",
  FAILED: "FAILED",
} as const;

// JobStatuses.PENDING infereras nu som typen "PENDING" (inte bara string)
// JobStatuses infereras som typen {
//   readonly PENDING: "PENDING";
//   readonly IN_PROGRESS: "IN_PROGRESS";
//   readonly COMPLETED: "COMPLETED";
//   readonly FAILED: "FAILED";
// }

            

              
                Copy
              
            
          

Vid denna punkt är JobStatuses ett JavaScript-objekt vid körtid, precis som en vanlig enum. Dock är dess typinferens mycket mer exakt.

Kombinera med typeof och keyof för Unionstyper

Den verkliga kraften uppstår när vi kombinerar as const med TypeScripts operatorer typeof och keyof för att härleda en unionstyp från objektets värden eller nycklar.

            const JobStatuses = {
  PENDING: "PENDING",
  IN_PROGRESS: "IN_PROGRESS",
  COMPLETED: "COMPLETED",
  FAILED: "FAILED",
} as const;

// Typ som representerar nycklarna (t.ex. "PENDING" | "IN_PROGRESS" | ...)
type JobStatusKeys = keyof typeof JobStatuses;

// Typ som representerar värdena (t.ex. "PENDING" | "IN_PROGRESS" | ...)
type JobStatusValues = typeof JobStatuses[keyof typeof JobStatuses];

function processJobWithConstAssertion(status: JobStatusValues): void {
  if (status === JobStatuses.COMPLETED) {
    console.log("Job finished successfully.");
  } else if (status === JobStatuses.FAILED) {
    console.log("Job encountered an error.");
  } else {
    console.log(`Job is currently ${status}.`);
  }
}

let currentJobStatusFromObject: JobStatusValues = JobStatuses.IN_PROGRESS;
processJobWithConstAssertion(currentJobStatusFromObject);

// Detta skulle resultera i ett kompileringstidsfel:
// let invalidStatusFromObject: JobStatusValues = "CANCELLED"; // Fel!

            

              
                Copy
              
            
          

Detta mönster ger det bästa av två världar: ett körtidsobjekt för iteration eller direkt egendomsåtkomst, och en kompileringstids-unionstyp för strikt typkontroll.

Fördelar med Konstanta Asserteringar med Härledda Unionstyper

• Enkel källa till sanning: Du definierar dina konstanter en gång i ett rent JavaScript-objekt och härleder både körtidsåtkomst och kompileringstidstyper från det. Detta minskar avsevärt duplicering och förbättrar underhållbarheten i olika utvecklingsteam.
• Typsäkerhet: Liknande rena unionstyper får du utmärkt typsäkerhet, vilket säkerställer att endast fördefinierade värden används.
• Itererbarhet vid körtid: Eftersom JobStatuses är ett rent JavaScript-objekt kan du enkelt iterera över dess nycklar eller värden med standard JavaScript-metoder som Object.keys(), Object.values() eller Object.entries(). Detta är ovärderligt för dynamiska användargränssnitt (t.ex. att fylla i rullgardinsmenyer) eller loggning.
• Associerad data: Detta mönster stöder naturligt att associera ytterligare data med varje "enum"-medlem.
• Bättre potential för Tree-Shaking (jämfört med Enums): Även om as const skapar ett körtidsobjekt, är det ett standard JavaScript-objekt. Moderna paketerare är generellt mer effektiva på att tree-shaka oanvända egenskaper eller till och med hela objekt om de inte refereras, jämfört med TypeScripts genererade enum-kompileringsutdata. Men om objektet är stort och endast ett fåtal egenskaper används, kan hela objektet fortfarande inkluderas om det importeras på ett sätt som förhindrar granulär tree-shaking.
• Flexibilitet: Du kan definiera värden som inte bara är strängar eller nummer utan mer komplexa objekt om det behövs, vilket gör detta till ett mycket flexibelt mönster.

            const FileOperations = {
  UPLOAD: {
    label: "Upload File",
    icon: "upload-icon.svg",
    permission: "can_upload"
  },
  DOWNLOAD: {
    label: "Download File",
    icon: "download-icon.svg",
    permission: "can_download"
  },
  DELETE: {
    label: "Delete File",
    icon: "delete-icon.svg",
    permission: "can_delete"
  },
} as const;

type FileOperationType = keyof typeof FileOperations; // "UPLOAD" | "DOWNLOAD" | "DELETE"
type FileOperationDetail = typeof FileOperations[keyof typeof FileOperations]; // { label: string; icon: string; permission: string; }

function performOperation(opType: FileOperationType) {
  const details = FileOperations[opType];
  console.log(`Performing: ${details.label} (Permission: ${details.permission})`);
}

performOperation("UPLOAD");

            

              
                Copy
              
            
          

Nackdelar med Konstanta Asserteringar

• Närvaro av körtidsobjekt: Till skillnad från rena unionstyper skapar detta tillvägagångssätt fortfarande ett JavaScript-objekt vid körtid. Även om det är ett standardobjekt och ofta bättre för tree-shaking än enums, raderas det inte helt.
• Något mer utförlig typdefinition: Att härleda unionstypen (keyof typeof ... eller typeof ...[keyof typeof ...]) kräver lite mer syntax än att bara lista literaler för en unionstyp.
• Potential för missbruk: Om det inte används noggrant, kan ett mycket stort as const-objekt fortfarande bidra betydligt till paketstorleken om dess innehåll inte effektivt tree-shakas över modulgränser.

För scenarier där du behöver både robust kompileringstids-typkontroll och en körtidssamling av värden som kan itereras över eller tillhandahålla associerad data, är as const ofta det föredragna valet bland TypeScript-utvecklare världen över.

Jämföra alternativen: När ska man använda vad?

Valet mellan unionstyper och konstanta asserteringar beror till stor del på dina specifika krav gällande körtidsnärvaro, itererbarhet och om du behöver associera ytterligare data med dina konstanter. Låt oss bryta ner beslutsfattande faktorerna.

Enkelhet kontra Robusthet

• Unionstyper: Erbjuder ultimat enkelhet när du endast behöver en typsäker uppsättning distinkta sträng- eller numeriska värden vid kompileringstid. De är det mest lättviktiga alternativet.
• Konstanta Asserteringar: Tillhandahåller ett mer robust mönster när du behöver både typsäkerhet vid kompileringstid och ett körtidsobjekt som kan frågas, itereras eller utökas med ytterligare metadata. Den initiala installationen är något mer utförlig, men det lönar sig i funktioner.

Körtid kontra Kompileringstidsnärvaro

• Unionstyper: Är rena kompileringstidskonstruktioner. De genererar absolut ingen JavaScript-kod. Detta är idealiskt för applikationer där minimering av paketstorlek är av yttersta vikt, och värdena i sig är tillräckliga utan att behöva åtkomst till dem som ett objekt vid körtid.
• Konstanta Asserteringar: Genererar ett rent JavaScript-objekt vid körtid. Detta objekt är tillgängligt och användbart i din JavaScript-kod. Även om det bidrar till paketstorleken, är det generellt effektivare än TypeScript enums och bättre kandidater för tree-shaking.

Krav på itererbarhet

• Unionstyper: Erbjuder inte ett direkt sätt att iterera över alla möjliga värden vid körtid. Om du behöver fylla en rullgardinsmeny eller visa alla alternativ, måste du definiera en separat array av dessa värden, vilket potentiellt kan leda till duplicering.
• Konstanta Asserteringar: Utmärker sig här. Eftersom du arbetar med ett standard JavaScript-objekt, kan du enkelt använda Object.keys(), Object.values() eller Object.entries() för att få en array av nycklar, värden eller nyckel-värdepar, respektive. Detta gör dem perfekta för dynamiska användargränssnitt eller andra scenarier som kräver körningsuppräkning.

            const PaymentMethods = {
  CREDIT_CARD: "Credit Card",
  PAYPAL: "PayPal",
  BANK_TRANSFER: "Bank Transfer",
} as const;

type PaymentMethodType = keyof typeof PaymentMethods;

// Få alla nycklar (t.ex. för intern logik)
const methodKeys = Object.keys(PaymentMethods) as PaymentMethodType[];
console.log(methodKeys); // ["CREDIT_CARD", "PAYPAL", "BANK_TRANSFER"]

// Få alla värden (t.ex. för visning i en rullgardinsmeny)
const methodLabels = Object.values(PaymentMethods);
console.log(methodLabels); // ["Credit Card", "PayPal", "Bank Transfer"]

// Få nyckel-värdepar (t.ex. för mappning)
const methodEntries = Object.entries(PaymentMethods);
console.log(methodEntries); // [["CREDIT_CARD", "Credit Card"], ...]

            

              
                Copy
              
            
          

Tree-Shaking Implikationer

• Unionstyper: Är i sig tree-shakeable eftersom de endast är vid kompileringstid.
• Konstanta Asserteringar: Även om de skapar ett körtidsobjekt, kan moderna paketerare ofta tree-shaka oanvända egenskaper i detta objekt mer effektivt än med TypeScripts genererade enum-objekt. Men om hela objektet importeras och refereras, kommer det sannolikt att inkluderas. Noggrann moduldesign kan hjälpa.

Bästa praxis och hybridlösningar

Det är inte alltid en "antingen/eller"-situation. Ofta involverar den bästa lösningen en hybridmetod, särskilt i stora, internationaliserade applikationer:

• För enkla, rent interna flaggor eller identifierare som aldrig behöver itereras eller har associerad data, är Unionstyper generellt det mest prestandaorienterade och renaste valet.
• För uppsättningar av konstanter som behöver itereras över, visas i användargränssnitt eller har rika associerade metadata (som etiketter, ikoner eller behörigheter), är mönstret för Konstanta Asserteringar överlägset.
• Kombinera för läsbarhet och lokalisering: Många team använder as const för de interna identifierarna och härleder sedan lokaliserade visningsetiketter från ett separat internationaliseringssystem (i18n).

            // src/constants/order-status.ts
const OrderStatuses = {
  PENDING: "PENDING",
  PROCESSING: "PROCESSING",
  SHIPPED: "SHIPPED",
  DELIVERED: "DELIVERED",
  CANCELLED: "CANCELLED",
} as const;

type OrderStatus = typeof OrderStatuses[keyof typeof OrderStatuses];

export { OrderStatuses, type OrderStatus };

// src/i18n/en.json
{
  "orderStatus": {
    "PENDING": "Pending Confirmation",
    "PROCESSING": "Processing Order",
    "SHIPPED": "Shipped",
    "DELIVERED": "Delivered",
    "CANCELLED": "Cancelled"
  }
}

// src/components/OrderStatusDisplay.tsx
import { OrderStatuses, type OrderStatus } from "../constants/order-status";
import { useTranslation } from "react-i18next"; // Exempel i18n-bibliotek

interface OrderStatusDisplayProps {
  status: OrderStatus;
}

function OrderStatusDisplay({ status }: OrderStatusDisplayProps) {
  const { t } = useTranslation();
  const displayLabel = t(`orderStatus.${status}`);
  return <span>Status: {displayLabel}</span>;
}

// Användning:
// <OrderStatusDisplay status={OrderStatuses.DELIVERED} />

            

              
                Copy
              
            
          

Denna hybridmetod utnyttjar typsäkerheten och körtidsitererbarheten hos as const samtidigt som lokaliserade visningssträngar hålls separata och hanterbara, en kritisk aspekt för globala applikationer.

Avancerade Mönster och Överväganden

Utöver den grundläggande användningen kan både unionstyper och konstanta asserteringar integreras i mer sofistikerade mönster för att ytterligare förbättra kodkvalitet och underhållbarhet.

Använda Typguards med Unionstyper

När man arbetar med unionstyper, särskilt när unionen inkluderar olika typer (inte bara literaler), blir typguards avgörande för att snäva ner typer. Med litterala unionstyper erbjuder diskriminerade unioner enorm kraft.

            type SuccessEvent = { type: "SUCCESS"; data: any; };
type ErrorEvent = { type: "ERROR"; message: string; code: number; };

type SystemEvent = SuccessEvent | ErrorEvent;

function handleSystemEvent(event: SystemEvent) {
  if (event.type === "SUCCESS") {
    console.log("Data received:", event.data);
    // event är nu snävare till SuccessEvent
  } else {
    console.log("Error occurred:", event.message, "Code:", event.code);
    // event är nu snävare till ErrorEvent
  }
}

handleSystemEvent({ type: "SUCCESS", data: { user: "Alice" } });
handleSystemEvent({ type: "ERROR", message: "Network failure", code: 503 });

            

              
                Copy
              
            
          

Detta mönster, ofta kallat "diskriminerade unioner", är otroligt robust och typsäkert, och ger kompileringstidsgarantier om strukturen på din data baserat på en gemensam litteral egenskap (diskriminatorn).

Object.values() med as const och Typer Asserteringar

När du använder as const-mönstret kan Object.values() vara mycket användbart. TypeScripts standardinferens för Object.values() kan dock vara bredare än önskat (t.ex. string[] istället för en specifik union av literaler). Du kan behöva en typassertering för strikthet.

            const Statuses = {
  ACTIVE: "Active",
  INACTIVE: "Inactive",
  PENDING: "Pending",
} as const;

type StatusValue = typeof Statuses[keyof typeof Statuses]; // "Active" | "Inactive" | "Pending"

// Object.values(Statuses) infereras som (string | "Active" | "Inactive" | "Pending")[]
// Vi kan assertera den snävare vid behov:
const allStatusValues: StatusValue[] = Object.values(Statuses);

console.log(allStatusValues); // ["Active", "Inactive", "Pending"]

// För en rullgardinsmeny kan du para ihop värden med etiketter om de skiljer sig åt
const statusOptions = Object.entries(Statuses).map(([key, value]) => ({
  value: key, // Använd nyckeln som den faktiska identifieraren
  label: value // Använd värdet som visningsetikett
}));
console.log(statusOptions);
/*
[
  { value: "ACTIVE", label: "Active" },
  { value: "INACTIVE", label: "Inactive" },
  { value: "PENDING", label: "Pending" }
]
*/

            

              
                Copy
              
            
          

Detta visar hur man får en starkt typad array av värden som är lämpliga för användargränssnittselement samtidigt som litteraltyperna bibehålls.

Internationalisering (i18n) och lokaliserade etiketter

För globala applikationer är hantering av lokaliserade strängar av yttersta vikt. Medan TypeScript-enums och deras alternativ tillhandahåller interna identifierare, behöver visningsetiketter ofta separeras för i18n. Mönstret as const kompletterar vackert i18n-system.

Du definierar dina interna, oföränderliga identifierare med as const. Dessa identifierare är konsekventa över alla lokaler och fungerar som nycklar för dina översättningsfiler. De faktiska visningssträngarna hämtas sedan från ett i18n-bibliotek (t.ex. react-i18next, vue-i18n, FormatJS) baserat på användarens valda språk.

            // app/features/product/constants.ts
export const ProductCategories = {
  ELECTRONICS: "ELECTRONICS",
  APPAREL: "APPAREL",
  HOME_GOODS: "HOME_GOODS",
  BOOKS: "BOOKS",
} as const;

export type ProductCategory = typeof ProductCategories[keyof typeof ProductCategories];

// app/i18n/locales/en.json
{
  "productCategories": {
    "ELECTRONICS": "Electronics",
    "APPAREL": "Apparel & Accessories",
    "HOME_GOODS": "Home Goods",
    "BOOKS": "Books"
  }
}

// app/i18n/locales/es.json
{
  "productCategories": {
    "ELECTRONICS": "Electrónica",
    "APPAREL": "Ropa y Accesorios",
    "HOME_GOODS": "Artículos para el hogar",
    "BOOKS": "Libros"
  }
}

// app/components/ProductCategorySelector.tsx
import { ProductCategories, type ProductCategory } from "../features/product/constants";
import { useTranslation } from "react-i18next";

function ProductCategorySelector() {
  const { t } = useTranslation();

  return (
    <select>
      {Object.values(ProductCategories).map(categoryKey => (
        <option key={categoryKey} value={categoryKey}>
          {t(`productCategories.${categoryKey}`)}
        </option>
      ))}
    </select>
  );
}

            

              
                Copy
              
            
          

Denna separation av oro är avgörande för skalbara, globala applikationer. TypeScript-typerna säkerställer att du alltid använder giltiga nycklar, och i18n-systemet hanterar presentationslagret baserat på användarens lokala inställningar. Detta undviker att språkberoende strängar är direkt inbäddade i din kärnapplikationslogik, ett vanligt anti-mönster för internationella team.

Slutsats: Stärk dina TypeScript-designval

I takt med att TypeScript fortsätter att utvecklas och stärka utvecklare över hela världen att bygga mer robusta och skalbara applikationer, blir förståelsen för dess nyanserade funktioner och alternativ allt viktigare. Även om TypeScripts nyckelord enum erbjuder ett bekvämt sätt att definiera namngivna konstanter, gör dess körtidsavtryck, begränsningar för tree-shaking och komplexiteten med omvänd mappning ofta moderna alternativ mer tilltalande för prestandakänsliga eller storskaliga projekt.

Unionstyper med Sträng-/Numeriska Literaler sticker ut som den tunnaste och mest kompileringstidscentrerade lösningen. De ger kompromisslös typsäkerhet utan att generera någon JavaScript vid körtid, vilket gör dem idealiska för scenarier där minimal paketstorlek och maximal tree-shaking är prioriteringar, och körtidsuppräkning inte är ett bekymmer.

Å andra sidan erbjuder Konstanta Asserteringar (as const) kombinerat med typeof och keyof ett mycket flexibelt och kraftfullt mönster. De ger en enda källa till sanning för dina konstanter, stark typsäkerhet vid kompileringstid, och den kritiska förmågan att iterera över värden vid körtid. Detta tillvägagångssätt är särskilt väl lämpat för situationer där du behöver associera ytterligare data med dina konstanter, fylla dynamiska användargränssnitt eller integrera sömlöst med internationaliseringssystem.

Genom att noggrant överväga avvägningarna – körtidsavtryck, behov av itererbarhet och komplexitet av associerad data – kan du fatta välgrundade beslut som leder till renare, effektivare och mer underhållbar TypeScript-kod. Att omfamna dessa alternativ handlar inte bara om att skriva "modern" TypeScript; det handlar om att fatta medvetna arkitektoniska val som förbättrar din applikations prestanda, utvecklarupplevelse och långsiktiga hållbarhet för en global publik.

Stärk din TypeScript-utveckling genom att välja rätt verktyg för rätt jobb, och gå bortom standard-enum när bättre alternativ finns tillgängliga.