TypeScript Enum Alternatieven: Const Assertions vs. Union Types

TypeScript's enum is een krachtige functie voor het definiëren van een set benoemde constanten. Het is echter niet altijd de beste keuze. Dit artikel verkent alternatieven voor enums, specifiek const assertions en union types, en biedt richtlijnen over wanneer je ze gebruikt voor optimale code kwaliteit, onderhoudbaarheid en prestaties. We duiken in de nuances van elke benadering, bieden praktische voorbeelden en adresseren veelvoorkomende zorgen.

Understanding TypeScript Enums

Voordat we in alternatieven duiken, laten we snel TypeScript enums bekijken. Een enum is een manier om een set benoemde numerieke constanten te definiëren. Standaard krijgt het eerste enum-lid de waarde 0 en worden de volgende leden met 1 verhoogd.

            
enum Status {
  Pending,
  InProgress,
  Completed,
  Rejected,
}

const currentStatus: Status = Status.InProgress; // currentStatus will be 1

            

              
                Copy
              
            
          

Je kunt ook expliciet waarden toewijzen aan enum-leden:

            
enum HTTPStatus {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  Forbidden = 403,
  NotFound = 404,
}

const serverResponse: HTTPStatus = HTTPStatus.OK; // serverResponse will be 200

            

              
                Copy
              
            
          

Benefits of Enums

• Readability: Enums verbeteren de leesbaarheid van de code door betekenisvolle namen te geven aan numerieke constanten.
• Type Safety: Ze dwingen type veiligheid af door waarden te beperken tot de gedefinieerde enum-leden.
• Autocompletion: IDE's bieden autocompletion suggesties voor enum-leden, waardoor fouten worden verminderd.

Drawbacks of Enums

• Runtime Overhead: Enums worden gecompileerd naar JavaScript-objecten, wat runtime overhead kan introduceren, vooral in grote applicaties.
• Mutation: Enums zijn standaard mutable. Hoewel TypeScript const enum biedt om mutatie te voorkomen, heeft het beperkingen.
• Reverse Mapping: Numerieke enums creëren een reverse mapping (bijv. Status[1] retourneert "InProgress"), wat vaak onnodig is en de bundelgrootte kan vergroten.

Alternative 1: Const Assertions

Const assertions bieden een manier om immutable, readonly datastructuren te creëren. Ze kunnen in veel gevallen worden gebruikt als alternatief voor enums, vooral wanneer je een eenvoudige set string- of numerieke constanten nodig hebt.

            
const Status = {
  Pending: 'pending',
  InProgress: 'in_progress',
  Completed: 'completed',
  Rejected: 'rejected',
} as const;

// Typescript infers the following type:
// {
//    readonly Pending: "pending";
//    readonly InProgress: "in_progress";
//    readonly Completed: "completed";
//    readonly Rejected: "rejected";
// }

type StatusType = typeof Status[keyof typeof Status]; // 'pending' | 'in_progress' | 'completed' | 'rejected'

function processStatus(status: StatusType) {
  console.log(`Processing status: ${status}`);
}

processStatus(Status.InProgress); // Valid
// processStatus('invalid'); // Error: Argument of type '"invalid"' is not assignable to parameter of type 'StatusType'.

            

              
                Copy
              
            
          

In dit voorbeeld definiëren we een gewoon JavaScript-object met string-waarden. De as const assertion vertelt TypeScript om dit object als readonly te behandelen en de meest specifieke types voor de eigenschappen af te leiden. We extraheren vervolgens een union type uit de keys. Deze benadering biedt verschillende voordelen:

Benefits of Const Assertions

• Immutability: Const assertions creëren immutable datastructuren, waardoor accidentele wijzigingen worden voorkomen.
• No Runtime Overhead: Het zijn eenvoudige JavaScript-objecten, dus er is geen runtime overhead verbonden aan enums.
• Type Safety: Ze bieden sterke type veiligheid door waarden te beperken tot de gedefinieerde constanten.
• Tree-shaking friendly: Moderne bundelaars kunnen eenvoudig ongebruikte waarden tree-shaken, waardoor de bundelgrootte wordt verkleind.

Considerations for Const Assertions

• More verbose: Het definiëren en typen kan iets uitgebreider zijn dan enums, vooral voor eenvoudige gevallen.
• No Reverse Mapping: Ze bieden geen reverse mapping, maar dit is vaak een voordeel in plaats van een nadeel.

Alternative 2: Union Types

Union types stellen je in staat om een variabele te definiëren die een van de verschillende mogelijke types kan bevatten. Ze zijn een meer directe manier om de toegestane waarden te definiëren zonder een object, wat handig is wanneer je de key-value relatie van een enum of const assertion niet nodig hebt.

            
type Status = 'pending' | 'in_progress' | 'completed' | 'rejected';

function processStatus(status: Status) {
  console.log(`Processing status: ${status}`);
}

processStatus('in_progress'); // Valid
// processStatus('invalid'); // Error: Argument of type '"invalid"' is not assignable to parameter of type 'Status'.

            

              
                Copy
              
            
          

Dit is een beknopte en type-veilige manier om een set toegestane waarden te definiëren.

Benefits of Union Types

• Conciseness: Union types zijn de meest beknopte benadering, vooral voor eenvoudige sets string- of numerieke constanten.
• Type Safety: Ze bieden sterke type veiligheid door waarden te beperken tot de gedefinieerde opties.
• No Runtime Overhead: Union types bestaan alleen tijdens compileertijd en hebben geen runtime representatie.

Considerations for Union Types

• No Key-Value Association: Ze bieden geen key-value relatie zoals enums of const assertions. Dit betekent dat je niet gemakkelijk een waarde kunt opzoeken op naam.
• String Literal Repetition: Je moet mogelijk string literals herhalen als je dezelfde set waarden op meerdere plaatsen gebruikt. Dit kan worden verzacht met een gedeelde type definitie.

When to Use Which?

De beste benadering hangt af van je specifieke behoeften en prioriteiten. Hier is een gids om je te helpen kiezen:

• Use Enums When:
  • Je hebt een eenvoudige set numerieke constanten nodig met impliciete incrementering.
  • Je hebt reverse mapping nodig (hoewel dit zelden nodig is).
  • Je werkt met legacy code die al veelvuldig enums gebruikt en je hebt geen dringende behoefte om het te veranderen.
• Use Const Assertions When:
  • Je hebt een set string- of numerieke constanten nodig die immutable moet zijn.
  • Je hebt een key-value relatie nodig en wilt runtime overhead vermijden.
  • Tree-shaking en bundelgrootte zijn belangrijke overwegingen.
• Use Union Types When:
  • Je hebt een eenvoudige, beknopte manier nodig om een set toegestane waarden te definiëren.
  • Je hebt geen key-value relatie nodig.
  • Prestaties en bundelgrootte zijn kritiek.

Example Scenario: Defining User Roles

Laten we een scenario bekijken waarin je gebruikersrollen in een applicatie moet definiëren. Je kunt rollen hebben zoals "Admin", "Editor" en "Viewer".

Using Enums:

            
enum UserRole {
  Admin,
  Editor,
  Viewer,
}

function authorize(role: UserRole) {
  // ...
}

            

              
                Copy
              
            
          

Using Const Assertions:

            
const UserRole = {
  Admin: 'admin',
  Editor: 'editor',
  Viewer: 'viewer',
} as const;

type UserRoleType = typeof UserRole[keyof typeof UserRole];

function authorize(role: UserRoleType) {
  // ...
}

            

              
                Copy
              
            
          

Using Union Types:

            
type UserRole = 'admin' | 'editor' | 'viewer';

function authorize(role: UserRole) {
  // ...
}

            

              
                Copy
              
            
          

In dit scenario bieden union types de meest beknopte en efficiënte oplossing. Const assertions zijn een goed alternatief als je de voorkeur geeft aan een key-value relatie, bijvoorbeeld voor het opzoeken van beschrijvingen van elke rol. Enums worden hier over het algemeen niet aanbevolen, tenzij je een specifieke behoefte hebt aan numerieke waarden of reverse mapping.

Example Scenario: Defining API Endpoint Status Codes

Laten we een scenario bekijken waarin je API endpoint statuscodes moet definiëren. Je kunt codes hebben zoals 200 (OK), 400 (Bad Request), 401 (Unauthorized) en 500 (Internal Server Error).

Using Enums:

            
enum StatusCode {
  OK = 200,
  BadRequest = 400,
  Unauthorized = 401,
  InternalServerError = 500
}

function processStatus(code: StatusCode) {
  // ...
}

            

              
                Copy
              
            
          

Using Const Assertions:

            
const StatusCode = {
  OK: 200,
  BadRequest: 400,
  Unauthorized: 401,
  InternalServerError: 500
} as const;

type StatusCodeType = typeof StatusCode[keyof typeof StatusCode];

function processStatus(code: StatusCodeType) {
  // ...
}

            

              
                Copy
              
            
          

Using Union Types:

            
type StatusCode = 200 | 400 | 401 | 500;

function processStatus(code: StatusCode) {
  // ...
}

            

              
                Copy
              
            
          

Nogmaals, union types bieden de meest beknopte en efficiënte oplossing. Const assertions zijn een sterk alternatief en kunnen de voorkeur hebben omdat het een meer uitgebreide beschrijving geeft voor een bepaalde statuscode. Enums kunnen handig zijn als externe bibliotheken of API's integer-gebaseerde statuscodes verwachten en je een naadloze integratie wilt garanderen. De numerieke waarden komen overeen met standaard HTTP-codes, wat de interactie met bestaande systemen mogelijk vereenvoudigt.

Performance Considerations

In de meeste gevallen is het prestatieverschil tussen enums, const assertions en union types verwaarloosbaar. In prestatie-kritische applicaties is het echter belangrijk om je bewust te zijn van de mogelijke verschillen.

• Enums: Enums introduceren runtime overhead vanwege de creatie van JavaScript-objecten. Deze overhead kan significant zijn in grote applicaties met veel enums.
• Const Assertions: Const assertions hebben geen runtime overhead. Het zijn eenvoudige JavaScript-objecten die door TypeScript als readonly worden behandeld.
• Union Types: Union types hebben geen runtime overhead. Ze bestaan alleen tijdens compileertijd en worden tijdens het compileren verwijderd.

Als prestatie een belangrijke zorg is, zijn union types over het algemeen de beste keuze. Const assertions zijn ook een goede optie, vooral als je een key-value relatie nodig hebt. Vermijd het gebruik van enums in prestatie-kritische secties van je code, tenzij je een specifieke reden hebt om dit te doen.

Global Implications and Best Practices

Wanneer je aan projecten werkt met internationale teams of globale gebruikers, is het cruciaal om rekening te houden met lokalisatie en internationalisatie. Hier zijn enkele best practices voor het gebruik van enums en hun alternatieven in een globale context:

• Use descriptive names: Kies enum-lidnamen (of const assertion keys) die duidelijk en ondubbelzinnig zijn, zelfs voor niet-native Engels sprekenden. Vermijd jargon of slang.
• Consider localization: Als je enum-lidnamen aan gebruikers moet tonen, overweeg dan het gebruik van een lokalisatiebibliotheek om vertalingen voor verschillende talen te bieden. In plaats van rechtstreeks Status.InProgress weer te geven, kun je bijvoorbeeld i18n.t('status.in_progress') weergeven.
• Avoid culture-specific assumptions: Wees bewust van culturele verschillen bij het definiëren van enum-waarden. Datumnotaties, valutasymbolen en meeteenheden kunnen bijvoorbeeld sterk verschillen per cultuur. Als je deze waarden moet weergeven, overweeg dan het gebruik van een bibliotheek die lokalisatie en internationalisatie afhandelt.
• Document your code: Bied duidelijke en beknopte documentatie voor je enums en hun alternatieven, waarin hun doel en gebruik worden uitgelegd. Dit helpt andere ontwikkelaars je code te begrijpen, ongeacht hun achtergrond of ervaring.

Example: Localizing User Roles

Laten we het voorbeeld van gebruikersrollen opnieuw bekijken en overwegen hoe we de rolnamen voor verschillende talen kunnen lokaliseren.

            
// Using Const Assertions with Localization
const UserRole = {
  Admin: 'admin',
  Editor: 'editor',
  Viewer: 'viewer',
} as const;

type UserRoleType = typeof UserRole[keyof typeof UserRole];

// Localization function (using a hypothetical i18n library)
function getLocalizedRoleName(role: UserRoleType, locale: string): string {
  switch (role) {
    case UserRole.Admin:
      return i18n.t('user_role.admin', { locale });
    case UserRole.Editor:
      return i18n.t('user_role.editor', { locale });
    case UserRole.Viewer:
      return i18n.t('user_role.viewer', { locale });
    default:
      return 'Unknown Role';
  }
}

// Example usage
const currentRole: UserRoleType = UserRole.Editor;
const localizedRoleName = getLocalizedRoleName(currentRole, 'fr-CA'); // Returns localized "Éditeur" for French Canadian.
console.log(`Current role: ${localizedRoleName}`);

            

              
                Copy
              
            
          

In dit voorbeeld gebruiken we een lokalisatiefunctie om de vertaalde rolnaam op te halen op basis van de locale van de gebruiker. Dit zorgt ervoor dat de rolnamen worden weergegeven in de voorkeurstaal van de gebruiker.

Conclusion

TypeScript enums zijn een handige functie, maar ze zijn niet altijd de beste keuze. Const assertions en union types bieden haalbare alternatieven die betere prestaties, immutability en code onderhoudbaarheid kunnen bieden. Door de voordelen en nadelen van elke benadering te begrijpen, kun je weloverwogen beslissingen nemen over welke je in je projecten wilt gebruiken. Overweeg de specifieke behoeften van je applicatie, de voorkeuren van je team en de lange termijn onderhoudbaarheid van je code. Door deze factoren zorgvuldig af te wegen, kun je de beste benadering kiezen voor het definiëren van constanten in je TypeScript-projecten, wat leidt tot schonere, efficiëntere en beter onderhoudbare codebases.