Nyckeln till kodtydlighet

TypeScript enums är en fras som kommer att stöta på mycket när man hanterar TypeScript-språk.

TypeScript är bland de yngsta men rankas också som ett av utvecklarnas mest populära programmeringsspråk. TypeScript är en förlängning (superset) av JavaScript. Således är all giltig JavaScript-kod också giltig i TypeScript. Men TypeScript introducerar statiska skrivfunktioner (en funktion som saknas i JavaScript).

Vad är TypeScript Enums, deras användningsfall och hur kan du skapa dem? Den här artikeln kommer att täcka allt du behöver veta om Enums.

Vad är TypeScript Enums?

Enums (uppräknade typer) är datastrukturer med konstant längd som innehåller en uppsättning oföränderliga värden (konstanter). TypeScript är inte det enda språket som använder Enums, eftersom de är tillgängliga i objektorienterade språk som C# och Java.

I TypeScript tillåter enums utvecklare att skapa en uppsättning distinkta fall eller dokumentavsikter. De är också viktiga för att sätta värden eller egenskaper som bara kan vara ett visst antal värden. Till exempel kan det bara finnas sju kontinenter i världen.

Sammanfattningsvis är TypeScript enums viktiga på följande sätt;

  • De är flexibla eftersom de tillåter utvecklare att enkelt dokumentera och uttrycka avsikter och använda fall
  • Enums tillåter utvecklare att skapa energieffektiva anpassade konstanter i JavaScript
  • Sparar kompilering och körtid vid kompilering av TypeScript-kod till JavaScript-kod

TypeScript Enums kan antingen vara strängar eller i numerisk form. Dessa enums är dock förbehandlade och testas inte under testfasen. TypeScript översätter/konverterar enums till JavaScript-kod.

Olika enums i TypeScript

Nu när du förstår Enums är det dags att se dem fungera i TypeScript. Du kan ställa in en utvecklingsserver genom att ladda ner TypeScript och Node.js på din lokala dator eller använda onlinelösningar. Vi kommer att använda TypeScript lekplats för att visa olika TypeScript-uppräkningar.

Dessa är de olika Enum-typerna i TypeScript;

#1. Numeriska uppräkningar

Du måste använda nyckelordet ’enum’ och följ det med namnet på den enum du vill skapa. Efter det skapar du curryparenteser som kommer att specificera medlemmarna i enumet. Detta är ett exempel på en numerisk uppräkning;

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

Ovanstående representerar en uppräkning som heter CardinalDirections som har fyra medlemmar. I det här fallet kan det bara finnas fyra värden (nord, öst, syd och väst), vilket gör enum till ett utmärkt val för att hålla data.

Jag har tilldelat CardinalDirections.North värde 5. Jag har dock inte tilldelat de andra värdena eftersom TypeScript gör resten automatiskt. Till exempel kommer värdet för CardinalDirections.East att vara 6 eftersom TypeScript ökar det föregående värdet med 1.

CardinalDirections.West blir 8.

Vad händer om vi inte tilldelar ett värde till det första föremålet inom curryparenteserna? Vår uppräkning kommer att vara;

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

TypeScript tilldelar automatiskt North-värdet 0. Om du knappar in något som CardinalDirections.West får du 3

#2. Stränguppräkningar

Varje medlem i en strängenum måste initialiseras med en annan strängenum-medlem eller en strängliteral. Detta är ett exempel på en stränguppräkning;

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

Denna uppräkning ökar inte som vad som händer i numeriska uppräkningar. Om du kör den här koden;

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

Det här är vad du får;

”HÖGER”

#3. Heterogena uppräkningar

Du kan blanda numeriska och strängmedlemmar för att bilda en heterogen enum. Detta är ett exempel;

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

#4. Konstanta och beräknade enummedlemmar

Enum-medlemmar har värden associerade med dem, som kan vara ”konstanta” eller ”beräknade”.

Detta är ett exempel på en konstant uppräkning;

enum E1 {
  X,
  Y,
  Z,
}

I det här fallet har den första medlemmen av enum inte en initialiserare, och TypeScript tilldelar den värdet 0.

Du kan också överväga detta exempel;

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

Detta är också en konstant uppräkning, eftersom den första medlemmen tilldelas ett värde och den inkrementella regeln tillämpas på resten.

Beräknade enums blandar konstanta och beräknade medlemmar. Kolla in det här exemplet;

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

Enum-medlemmen ’Blå’ är en konstant medlem. Å andra sidan är enum-medlemmen ’Green’ en enum som beräknas med Math.random()-funktionen vid körning.

#5. Const enums

const enums används för att öka prestandan för numeriska enums. I det här fallet deklarerar vi enummet som en konst.

Tänk på den här koden som visar veckodagarna;

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

Om vi ​​kör console.log(Weekday.Thursday) får vi vårt svar som 4. Men om vi kontrollerar JavaScript som genereras vid kompilering får vi detta;

"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 ändra denna kod och deklarera ’Veckodag’ som en konstant;

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

Om vi ​​kör den här koden console.log(Weekday.Thursday), kommer JavaScriptet som kommer att genereras vid kompilering att vara;

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

Du kan se att JavaScript-koden vid kompileringstillfället är optimerad när du deklarerar din enum som en const.

#6. Ambient enums

Ambient enums använder nyckelordet ”declare” för att beskriva formen på redan existerande enumtyper. Betrakta detta exempel;

declare enum Color {
  Red,
  Green,
  Blue
}

Ambient enums deklareras utanför alla moduler och kan användas för att skapa återanvändbara typer. Som sådan kan du alltid importera omgivande enums och använda dem i dina komponenter så länge de deklareras globalt.

Du förstår nu de olika enumtyperna i TypeScript. Vi kan nu visa hur du kan använda enums på olika sätt. Detta kommer att vara vår referenskod;

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

Det här är några användningsfall;

  • Extrahera enum-medlemmar. Till exempel, om vi vill komma åt norr, kan vi använda

console.log(Direction.North); // Utgångar: ’N’

  • Använd enum-medlemmar: Du kan välja en viss enum-medlem för att representera en specifik riktning. Till exempel,
const currentDirection = Direction.East;
console.log(`The current direction is ${currentDirection}`);

Detta kommer att ge denna utgång ”Den nuvarande riktningen är E”

Enums kontra objektkartor i TypeScript

Enums används för att representera en ändlig uppsättning värden. Till exempel regnbågens färger eller veckodagar. Enums är starkt skrivna, vilket betyder att de fångar upp eventuella fel under utvecklingen. Detta är ett exempel på en TypeScript enum;

enum Color {
  Red,
  Green,
  Blue,
}

Objektkartor/ordböcker/nyckel-värdepar lagrar och hämtar värden associerade med specifika nycklar. Du kan använda TypeScript Object Maps för att lagra alla typer av data. De är dock inte strikt skrivna, vilket innebär att typfel kanske inte fångas upp under utvecklingen. Detta är ett exempel på en objektkarta med samma färger;

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

De stora skillnaderna mellan enums och objektkartor i TypeScript är;

  • Enums är strikt skrivna, medan objektkartor inte är det
  • Enums är en ”Typ”, medan objektkartor är en datastruktur
  • Enums är inte flexibla, medan objektkartor är flexibla

Bästa metoder för att använda Enums i TypeScript

Vi har redan sagt att TypeScript inte är det enda programmeringsspråket med enums-funktionen. Att följa de bästa metoderna säkerställer att du skriver ren, optimerad och felfri kod. Det här är några av de bästa metoderna när du skriver/använder TypeScript-uppräkningar;

  • Sätt upp enum-namn med stora bokstäver: Använd alltid det första ordet med versaler när du namnger en enum. Till exempel är det alltid lämpligt att ha en enum ’Number’ istället för ’number’.
  • Använd enums för konstanter: Enums används bäst för att deklarera en fast uppsättning relaterade poster. Till exempel kan det bara vara 7 dagar i veckan. Uppräkningsmedlemmarna bör aldrig ändras under utförande.
  • Undvik att överanvända uppräkningar: Du kanske precis har lärt dig ett nytt koncept och vill använda det nästan överallt i ditt TypeScript-projekt. Använd dock alltid TypeScript-uppräkningar med måtta. TypeScript enums är ett bra val när du vill bibehålla kodläsbarhet.
  • Betrakta enums som enums: Du kan använda TypeScript-enums för olika ändamål. Det bästa alternativet är dock att använda dem för att endast representera uppräkningar och inte andra datastrukturer.
  • Undvik automatiska enums: TypeScript tilldelar värden till enum-medlemmarna om du inte tilldelar dem explicit. Ge dina enums värden och undvik oväntat beteende när du kör din kod.
  • Dokumentuppteckningar: Dokumentera eller kommentera alltid din kod om du avser att den ska konsumeras av allmänheten. Förklara vad varje enum gör och varför är det bästa användningsfallet.

Du kan också utforska de bästa TypeScript-biblioteken och körtiden för att känna till som utvecklare.

Slutsats

Du kan definiera enums i TypeScript och förklara de olika typerna och deras användningsfall. TypeScript kommer väl till pass när du vill ha kodtydlighet. Det finns dock även vissa fall där du bör undvika dem och använda föremål istället.

Till exempel bör du inte använda enums när du hanterar dynamiska värden. Du kan inte heller använda enums som variabler; ditt program kommer att returnera fel.

Du kan lära dig mer om skillnaderna mellan TypeScript och JavaScript om du fortfarande är förvirrad av de två.