TypeScript Enums: Den komplette guiden for utviklere

by
Tweet
Share
Share
Pin
0 Shares

Forstå TypeScript Enums: En Dypdykk

Når du jobber med TypeScript, vil du ofte støte på begrepet «enums», eller oppregninger. TypeScript har raskt blitt et populært programmeringsspråk, og regnes av mange utviklere som et av de beste. Det er en utvidelse av JavaScript, noe som betyr at all gyldig JavaScript-kode også er gyldig i TypeScript. En av de store fordelene med TypeScript er at det introduserer statiske typer, noe som mangler i JavaScript.

Men hva er egentlig TypeScript Enums? Når bør de brukes, og hvordan oppretter du dem? Denne artikkelen vil gi deg en komplett oversikt over alt du trenger å vite om Enums i TypeScript.

Hva er TypeScript Enums?

Enums er datastrukturer med en fast lengde som består av et sett med konstante og uforanderlige verdier. De finnes ikke bare i TypeScript, men også i mange andre objektorienterte språk som C# og Java. I TypeScript brukes enums til å definere et sett med ulike verdier, situasjoner eller formål. De er spesielt nyttige når du vil spesifisere egenskaper eller verdier som bare kan ha et begrenset antall muligheter, som for eksempel antall kontinenter i verden.

Kort oppsummert er TypeScript Enums viktige av flere årsaker:

  • De er fleksible og lar utviklere tydelig uttrykke intensjoner og bruke ulike tilfeller.
  • De gir utviklere mulighet til å skape effektive, tilpassede konstanter i JavaScript.
  • De optimaliserer kompilering og kjøretid når TypeScript-kode oversettes til JavaScript.

TypeScript Enums kan være numeriske eller strengbaserte, men de forbehandles og testes ikke i testfasen. TypeScript konverterer enums til vanlig JavaScript-kode.

Ulike Typer Enums i TypeScript

Nå som du har en grunnleggende forståelse av Enums, er det på tide å se hvordan de fungerer i praksis. Du kan sette opp et utviklingsmiljø ved å laste ned TypeScript og Node.js, eller bruke en online løsning. Vi skal benytte TypeScript Playground for å demonstrere de ulike Enum-typene.

Her er en oversikt over de ulike Enum-typene i TypeScript:

#1. Numeriske Enums

For å lage en enum må du bruke nøkkelordet «enum» etterfulgt av navnet du ønsker å gi den. Deretter angir du medlemmene i enumen innenfor krøllparenteser. Her er et eksempel på en numerisk enum:

enum CardinalDirections {
    North = 5,
    East,
    South,
    West,
}

Denne koden definerer en enum kalt CardinalDirections med fire medlemmer. I dette tilfellet kan en variabel bare ha fire verdier (nord, øst, sør og vest), noe som gjør enum til et ideelt valg for å lagre denne type data. Vi har tilordnet verdien 5 til CardinalDirections.North, men ikke til de andre. TypeScript vil automatisk fortsette å øke verdien for de neste medlemmene. CardinalDirections.East vil få verdien 6, CardinalDirections.South vil ha 7 og CardinalDirections.West vil ha verdien 8.

Hva om vi ikke tilordner en verdi til det første elementet? Enumen vil se slik ut:

enum CardinalDirections {
    North,
    East,
    South,
    West,
}

I dette tilfellet vil TypeScript automatisk tilordne North verdien 0. Hvis du prøver å hente verdien til for eksempel CardinalDirections.West vil du få 3.

#2. Streng Enums

Hvert medlem i en strengbasert enum må initialiseres med enten et annet medlem av samme enum eller en strengliteral. Her er et eksempel på en strengbasert enum:

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}

I motsetning til numeriske enums, øker ikke verdiene i strengbaserte enums automatisk. Hvis du kjører følgende kode:

enum Direction {
    Up = "UP",
    Down = "DOWN",
    Left = "LEFT",
    Right = "RIGHT",
}
console.log(Direction.Right)

Du vil få følgende utskrift:

«RIGHT»

#3. Heterogene Enums

Du kan blande numeriske og strengbaserte medlemmer for å skape en heterogen enum. Her er et eksempel:

enum HeterogeneousEnum {
    No = 0,
    Yes = "YES",
}

#4. Konstante og Beregnede Enum-Medlemmer

Hvert medlem av en enum har en tilhørende verdi, som kan være enten «konstant» eller «beregnet».

Her er et eksempel på en konstant enum:

enum E1 {
    X,
    Y,
    Z,
}

I dette eksemplet har ikke det første medlemmet av enumen noen initialverdi, og TypeScript vil derfor tilordne verdien 0. Du kan også se på dette eksemplet:

enum E1 {
    X=1,
    Y,
    Z,
}

Dette er også en konstant enum, siden det første medlemmet har en initialverdi, og de resterende medlemmene følger inkrementeringsregelen.

Beregnede enums blander konstante og beregnede medlemmer. Her er et eksempel:

enum Color {
    Red = 100,
    Green = (Math.random() * 100),
    Blue = 200
}

Enum-medlemmet «Blue» er et konstant medlem. Derimot er «Green» et beregnet medlem, der verdien bestemmes ved hjelp av Math.random()-funksjonen under kjøretid.

#5. Const Enums

Const enums brukes for å forbedre ytelsen til numeriske enums. Her deklareres enumen som en konstant. Tenk på denne koden som viser ukedagene:

enum Weekday {
    Monday = 1,
    Tuesday,
    Wednesday,
    Thursday,
    Friday
}

Hvis vi kjører console.log(Weekday.Thursday), får vi svaret 4. Hvis vi undersøker JavaScript-koden som genereres under kompilering, ser vi følgende:

"use strict";
var Weekday;
(function (Weekday) {
    Weekday[Weekday["Monday"] = 1] = "Monday";
    Weekday[Weekday["Tuesday"] = 2] = "Tuesday";
    Weekday[Weekday["Wednesday"] = 3] = "Wednesday";
    Weekday[Weekday["Thursday"] = 4] = "Thursday";
    Weekday[Weekday["Friday"] = 5] = "Friday";
})(Weekday || (Weekday = {}));
console.log(Weekday.Thursday);

Vi kan endre koden og deklarere «Weekday» som en konstant:

const enum Weekday {
    Monday = 1,
    Tuesday,
    Wednesday,
    Thursday,
    Friday
}

Hvis vi kjører console.log(Weekday.Thursday) vil JavaScript-koden som genereres ved kompilering være slik:

"use strict";
console.log(4 /* Weekday.Thursday */);

Du kan se at JavaScript-koden er mer optimalisert når enumen deklareres som en konstant.

#6. Ambient Enums

Ambient enums, eller omgivelses-enums, bruker nøkkelordet «declare» for å beskrive strukturen til allerede eksisterende enum-typer. Her er et eksempel:

declare enum Color {
    Red,
    Green,
    Blue
}

Ambient enums deklareres utenfor enhver modul og kan brukes til å lage gjenbrukbare typer. Du kan importere dem og bruke dem i dine komponenter så lenge de er deklarert globalt.

Nå som du har sett de ulike enum-typene, kan vi vise hvordan de kan brukes i praksis. Vi vil bruke denne koden som referanse:

enum Direction {
    North="N",
    East="E",
    South="S",
    West="W",
};

Her er noen typiske bruksområder:

  • Hente ut enum-medlemmer: Hvis vi ønsker å hente ut verdien for «North», kan vi bruke console.log(Direction.North); // Output: "N"
  • Bruke enum-medlemmer: Vi kan bruke et spesifikt enum-medlem til å representere en bestemt retning. For eksempel:
const currentDirection = Direction.East;
console.log(`The current direction is ${currentDirection}`);

Dette vil generere følgende output: «Gjeldende retning er E»

Enums vs. Object Maps i TypeScript

Enums brukes til å representere et begrenset sett med verdier, som for eksempel farger i regnbuen eller ukedager. Enums har sterk typing, som betyr at de fanger opp feil i utviklingsfasen. Her er et eksempel på en TypeScript enum:

enum Color {
    Red,
    Green,
    Blue,
}

Object Maps, også kjent som ordbøker eller nøkkel-verdi-par, brukes til å lagre og hente verdier knyttet til bestemte nøkler. Du kan bruke TypeScript Object Maps for å lagre alle typer data. De er imidlertid ikke strengt typet, noe som betyr at typefeil ikke nødvendigvis fanges opp under utvikling. Her er et eksempel på en Object Map med de samme fargene:

const colors = {
    red: "FF0000",
    green: "00FF00",
    blue: "0000FF",
};

De viktigste forskjellene mellom enums og object maps i TypeScript er:

  • Enums er strengt typet, mens object maps ikke er det.
  • Enums er en «Type», mens object maps er en datastruktur.
  • Enums er ikke fleksible, mens object maps er fleksible.

Beste Praksis for Bruk av Enums i TypeScript

Som nevnt, er TypeScript ikke det eneste programmeringsspråket som bruker enums. Ved å følge beste praksis sikrer du at koden din er ren, optimalisert og feilfri. Her er noen anbefalinger når du jobber med TypeScript-enums:

  • Bruk store bokstaver: Start alltid det første ordet i enum-navnet med stor bokstav. Bruk for eksempel «Nummer» i stedet for «nummer».
  • Bruk enums for konstanter: Enums er best egnet for å definere et fast sett med relaterte elementer. For eksempel er det kun 7 dager i en uke. Enum-medlemmene skal aldri endres under kjøretid.
  • Unngå overbruk: Det er lett å bli ivrig etter å bruke et nytt konsept overalt. Bruk derfor TypeScript-enums med måte. De er et godt valg når du ønsker å opprettholde kodelesbarheten.
  • Betrakt enums som enums: Du kan bruke dem til flere formål, men det er best å bruke dem til å representere enums og ikke andre datastrukturer.
  • Unngå automatiske enums: TypeScript tilordner verdier til enum-medlemmene hvis du ikke tilordner dem eksplisitt. Angi verdier selv for å unngå uventet oppførsel.
  • Dokumenter oppslag: Hvis koden din skal brukes av andre, er det viktig å dokumentere den. Forklar hva hver enum gjør og hvorfor det er den beste bruksmåten.

Du kan også utforske de beste TypeScript-bibliotekene og -kjøretidene for å utvide kunnskapen din som utvikler.

Konklusjon

Denne artikkelen har definert enums i TypeScript, forklart de ulike typene og sett på bruksområdene deres. TypeScript kan være nyttig for å forbedre kodeklarheten. Det er likevel tilfeller hvor du bør unngå enums og heller bruke objekter.

For eksempel bør du ikke bruke enums når du arbeider med dynamiske verdier. Du kan heller ikke bruke enums som variabler, da programmet vil returnere feil.

Hvis du fortsatt er usikker på forskjellene mellom TypeScript og JavaScript, kan du lese mer om dette emnet for å få en bedre forståelse.