När man arbetar med TypeScript, kommer man ofta att stöta på begreppet ”enums”, en viktig del av språket.
TypeScript är ett relativt nytt, men snabbt växande, populärt programmeringsspråk. Det är en utökning av JavaScript, vilket innebär att all giltig JavaScript-kod även är giltig i TypeScript. En av de stora nyheterna i TypeScript är införandet av statisk typning, något som saknas i JavaScript.
Vad är egentligen TypeScript Enums? Hur används de, och hur skapar man dem? Den här artikeln går igenom allt du behöver veta om uppräkningstyper.
Vad är TypeScript Enums?
Enums, eller uppräkningstyper, är strukturer som innehåller en begränsad och fast uppsättning av oföränderliga värden, så kallade konstanter. TypeScript är inte ensamt om att använda enums; de finns också i objektorienterade språk som C# och Java.
I TypeScript låter enums utvecklare skapa en tydlig uppsättning av fall eller syften. De är speciellt användbara när man vill definiera värden eller egenskaper som bara kan anta ett visst antal specifika värden, till exempel antalet kontinenter.
Sammanfattningsvis är TypeScript enums viktiga av följande skäl:
- De är flexibla och ger utvecklare möjlighet att dokumentera och uttrycka syften och användningsområden på ett enkelt sätt.
- De gör det möjligt att skapa anpassade, effektiva konstanter i JavaScript-kod.
- De minskar kompileringstiden när TypeScript-kod omvandlas till JavaScript.
TypeScript Enums kan definieras antingen som strängar eller som numeriska värden. Dessa enums förbehandlas och testas inte under testfasen. TypeScript översätter enums till vanlig JavaScript-kod.
Olika typer av enums i TypeScript
Nu när du vet vad enums är, är det dags att se hur de fungerar i TypeScript. Du kan sätta upp en utvecklingsmiljö med TypeScript och Node.js på din lokala dator, eller använda onlineverktyg. Vi kommer att använda TypeScript lekplats för att visa olika uppräkningstyper i TypeScript.
Följande är de olika typerna av enums i TypeScript:
#1. Numeriska enums
För att skapa en enum använder du nyckelordet ”enum”, följt av namnet på din enum. Därefter specificerar du enum-medlemmarna inom måsvingar. Här är ett exempel på en numerisk enum:
enum CardinalDirections {
North = 5,
East,
South,
West,
};
Exemplet ovan definierar en enum som heter ”CardinalDirections” med fyra medlemmar. I detta fall finns endast fyra möjliga värden (norr, öst, syd och väst), vilket gör enums perfekta för att hantera begränsade datauppsättningar.
I koden har vi explicit tilldelat värdet 5 till `CardinalDirections.North`. TypeScript tilldelar automatiskt inkrementella värden till de andra medlemmarna. `CardinalDirections.East` kommer att ha värdet 6, eftersom TypeScript ökar det föregående värdet med 1.
På samma sätt kommer `CardinalDirections.West` att få värdet 8.
Vad händer om vi inte tilldelar något värde till den första medlemmen? Vår enum ser då ut så här:
enum CardinalDirections {
North,
East,
South,
West,
};
I det här fallet kommer TypeScript automatiskt att tilldela värdet 0 till `North`. Om du nu skriver `CardinalDirections.West` får du värdet 3.
#2. Sträng-enums
Varje medlem i en sträng-enum måste initialiseras med antingen en annan sträng-enum-medlem eller en strängliteral. Här är ett exempel på en sträng-enum:
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
Denna enum ökar inte automatiskt värden som numeriska enums. Om vi kör följande kod:
enum Direction {
Up = "UP",
Down = "DOWN",
Left = "LEFT",
Right = "RIGHT",
}
console.log(Direction.Right)
kommer resultatet att vara:
”RIGHT”
#3. Heterogena enums
Man kan blanda numeriska och strängmedlemmar för att skapa en heterogen enum. Här är ett exempel:
enum HeterogeneousEnum {
No = 0,
Yes = "YES",
}
#4. Konstanta och beräknade enum-medlemmar
Enum-medlemmar har associerade värden, som kan vara antingen ”konstanta” eller ”beräknade”.
Här är ett exempel på en konstant enum:
enum E1 {
X,
Y,
Z,
}
I det här fallet har den första medlemmen ingen initialiserare, och TypeScript tilldelar den värdet 0.
Betrakta även detta exempel:
enum E1 {
X=1,
Y,
Z,
}
Detta är också en konstant enum, eftersom den första medlemmen tilldelas ett värde och inkrementeringsregeln tillämpas på de andra medlemmarna.
Beräknade enums blandar konstanta och beräknade medlemmar. Titta på följande exempel:
enum Color {
Red = 100,
Green = (Math.random() * 100),
Blue = 200
}
Enum-medlemmen ’Blå’ är en konstant medlem. Å andra sidan är enum-medlemmen ’Grön’ en enum som beräknas med funktionen `Math.random()` vid körning.
#5. Const enums
Const enums används för att öka prestandan hos numeriska enums. I det här fallet deklarerar vi enumen som en konstant.
Tänk på följande kod som visar veckodagarna:
enum Weekday {
Monday = 1,
Tuesday,
Wednesday,
Thursday,
Friday
}
Om vi kör `console.log(Weekday.Thursday)` får vi svaret 4. Men om vi inspekterar JavaScript-koden som genereras vid kompileringen, ser 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 optimera koden genom att deklarera `Weekday` som en konstant:
const enum Weekday {
Monday = 1,
Tuesday,
Wednesday,
Thursday,
Friday
}
Om vi kör samma kod `console.log(Weekday.Thursday)`, kommer JavaScript-koden som genereras att vara:
"use strict"; console.log(4 /* Weekday.Thursday */);
Som du ser är JavaScript-koden optimerad vid kompileringen när du deklarerar din enum som `const`.
#6. Ambient enums
Ambient enums använder nyckelordet ”declare” för att beskriva formen på existerande enum-typer. Här är ett 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. Du kan importera och använda ambient enums i dina komponenter så länge de är globalt deklarerade.
Du känner nu till de olika typerna av enums i TypeScript. Låt oss se hur vi kan använda enums på olika sätt. Här är vår referensenum:
enum Direction {
North="N",
East="E",
South="S",
West="W",
};
Här är några exempel på hur du kan använda dem:
- Hämta enum-medlemmar: Om vi vill hämta värdet för ”norr” kan vi använda
console.log(Direction.North); // Utskrift: ’N’
- Använd enum-medlemmar: Du kan välja en specifik enum-medlem för att representera en specifik riktning. Till exempel:
const currentDirection = Direction.East;
console.log(`Den nuvarande riktningen är ${currentDirection}`);
Detta ger utskriften ”Den nuvarande riktningen är E”
Enums jämfört med objektkartor i TypeScript
Enums används för att representera en begränsad uppsättning värden, till exempel regnbågens färger eller veckodagarna. Enums är starkt typade, vilket innebär att eventuella fel upptäcks under utvecklingen. Här är ett exempel på en TypeScript-enum:
enum Color {
Red,
Green,
Blue,
}
Objektkartor, ordböcker eller nyckel-värde-par lagrar och hämtar värden som är kopplade till specifika nycklar. Du kan använda TypeScript Object Maps för att lagra alla typer av data. De är dock inte strikt typade, vilket innebär att typfel kanske inte fångas under utvecklingen. Här är ett exempel på en objektkarta med samma färger:
const colors = {
red: "FF0000",
green: "00FF00",
blue: "0000FF",
};
De största skillnaderna mellan enums och objektkartor i TypeScript är:
- Enums är starkt typade, medan objektkartor inte är det.
- Enums är en ”typ”, medan objektkartor är en datastruktur.
- Enums är inte flexibla, medan objektkartor är det.
Bästa praxis för att använda Enums i TypeScript
Vi har redan konstaterat att TypeScript inte är det enda programmeringsspråket som har stöd för enums. Genom att följa bästa praxis säkerställer du att du skriver ren, optimerad och felfri kod. Här är några av de bästa metoderna när du skriver/använder TypeScript enums:
- Använd stor bokstav i enum-namn: Använd alltid stor bokstav i det första ordet när du namnger en enum. Det är till exempel bättre att använda en enum som heter `Number` istället för `number`.
- Använd enums för konstanter: Enums är bäst lämpade för att deklarera en fast uppsättning relaterade värden. Det kan till exempel bara finnas 7 dagar i veckan. Enum-medlemmarna ska inte ändras under körning.
- Undvik överanvändning av enums: Om du precis har lärt dig ett nytt koncept, kanske du känner dig frestad att använda det i alla delar av ditt TypeScript-projekt. Använd dock alltid TypeScript enums med måtta. TypeScript enums är ett bra val när du vill upprätthålla läsbar kod.
- Se enums som enums: Du kan använda TypeScript enums för olika ändamål, men det är bäst 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.
- Dokumentera uppräkningarna: Dokumentera eller kommentera alltid din kod om du planerar att den ska användas av andra. Förklara vad varje enum gör och varför det är bästa användningsområde.
Du kan också undersöka de bästa TypeScript-biblioteken och körningsmiljöerna för att hålla dig uppdaterad som utvecklare.
Slutsats
I den här artikeln har du lärt dig hur du definierar enums i TypeScript, och hur de olika typerna och deras användningsområden fungerar. TypeScript är användbart när du vill ha tydlig och välstrukturerad kod. Det finns dock tillfällen när du bör undvika att använda dem och istället välja objekt.
Du bör till exempel 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 känner dig osäker på hur de båda språken fungerar.