Cheia pentru claritatea codului

Enumerările TypeScript sunt o expresie care se va întâlni cu multe atunci când ai de-a face cu limbajul TypeScript.

TypeScript este printre cele mai tinere, dar este, de asemenea, clasat drept unul dintre cele mai populare limbaje de programare ale dezvoltatorilor. TypeScript este o extensie (superset) a JavaScript. Astfel, orice cod JavaScript valid este valabil și în TypeScript. Cu toate acestea, TypeScript introduce capabilități de tastare statică (o caracteristică lipsă din JavaScript).

Ce sunt Enumerările TypeScript, cazurile lor de utilizare și cum le puteți crea? Acest articol va acoperi tot ce trebuie să știți despre Enums.

Ce sunt enumerările TypeScript?

Enumările (tipurile enumerate) sunt structuri de date de lungime constantă care dețin un set de valori neschimbate (constante). TypeScript nu este singurul limbaj care utilizează Enums, deoarece acestea sunt disponibile în limbaje orientate pe obiecte precum C# și Java.

În TypeScript, enumerarile permit dezvoltatorilor să creeze un set de cazuri distincte sau intenții de document. Ele sunt, de asemenea, importante în setarea valorilor sau proprietăților care pot fi doar un anumit număr de valori. De exemplu, în lume pot exista doar șapte continente.

În rezumat, enumerările TypeScript sunt importante în următoarele moduri;

  • Sunt flexibile, deoarece permit dezvoltatorilor să documenteze și să exprime intențiile și cazurile de utilizare cu ușurință
  • Enumerările permit dezvoltatorilor să creeze constante personalizate eficiente din punct de vedere energetic în JavaScript
  • Salvează compilarea și timpul de execuție la compilarea codului TypeScript în cod JavaScript

Enumerările TypeScript pot fi fie șiruri, fie sub formă numerică. Cu toate acestea, aceste enumerari sunt preprocesate și nu sunt supuse testării în timpul fazei de testare. TypeScript traduce/ convertește enumerările în cod JavaScript.

Enumări diferite în TypeScript

Acum că înțelegeți Enums-urile, este timpul să le vedeți funcționând în TypeScript. Puteți configura un server de dezvoltare descărcând TypeScript și Node.js pe computerul dvs. local sau folosind soluții online. Vom folosi Locul de joacă TypeScript pentru a demonstra diferite enumerari TypeScript.

Acestea sunt diferitele tipuri de enumerare în TypeScript;

  Cum să downgradezi software-ul pe Ubuntu

#1. Enumerări numerice

Trebuie să utilizați cuvântul cheie „enum” și să îl urmați cu numele enumerarii pe care doriți să o creați. După aceea, creați paranteze curry care vor specifica membrii enumerarii. Acesta este un exemplu de enumerare numerică;

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

Cele de mai sus reprezintă o enumerare numită CardinalDirections care are patru membri. În acest caz, pot exista doar patru valori (Nord, Est, Sud și Vest), ceea ce face enum o alegere excelentă pentru a păstra date.

Am atribuit CardinalDirections.North valoarea 5. Cu toate acestea, nu le-am atribuit celorlalte valori deoarece TypeScript va face restul automat. De exemplu, valoarea pentru CardinalDirections.East va fi 6, deoarece TypeScript incrementează valoarea anterioară cu 1.

CardinalDirections.Vest va fi 8.

Ce se întâmplă dacă nu atribuim o valoare primului articol din parantezele curry? enumerarea noastră va fi;

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

TypeScript va atribui automat valoarea Nordului 0. Dacă introduceți ceva de genul CardinalDirections.West, veți obține 3

#2. Enumări șiruri

Fiecare membru dintr-un șir de enumerare trebuie inițializat cu un alt membru șir de enumerare sau un șir literal. Acesta este un exemplu de enumerare de șir;

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

Această enumerare nu crește ca ceea ce se întâmplă în enumerarea numerică. Dacă rulați acest cod;

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

Asta este ceea ce obțineți;

„DREAPTA”

#3. Enumări eterogene

Puteți amesteca membri numerici și șir pentru a forma o enumerare eterogenă. Acesta este un exemplu;

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

#4. Membrii enum constanți și calculați

Membrii Enum au valori asociate cu ei, care pot fi „constante” sau „calculate”.

Acesta este un exemplu de enumerare constantă;

enum E1 {
  X,
  Y,
  Z,
}

În acest caz, primul membru al enumerarii nu are un inițializator, iar TypeScript îi atribuie valoarea 0.

Puteți lua în considerare și acest exemplu;

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

Aceasta este, de asemenea, o enumerare constantă, deoarece primului membru i se atribuie o valoare, iar regula incrementală este aplicată restului.

Enumerările calculate amestecă membrii constanti și calculați. Consultați acest exemplu;

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

Membrul Enum „Albastru” este un membru constant. Pe de altă parte, membrul enumerare „Verde” este o enumerare calculată cu funcția Math.random() în timpul execuției.

#5. Const enumerari

const enums sunt folosite pentru a spori performanța numerelor numerice. În acest caz, declarăm enumerarea ca o const.

  Cum să utilizați componentele Loop în Microsoft Teams pentru a ușura colaborările

Luați în considerare acest cod care arată zilele săptămânii;

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

Dacă rulăm console.log(Weekday.Thursday), primim răspunsul nostru ca fiind 4. Totuși, dacă verificăm JavaScript generat în timpul compilării, obținem acest lucru;

"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);

Putem schimba acest cod și declara „Ziua săptămânii” ca o constantă;

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

Dacă rulăm acest cod console.log(Weekday.Thursday), JavaScript care va fi generat în timpul compilării va fi;

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

Puteți vedea că codul JavaScript la momentul compilării este optimizat atunci când vă declarați enumerarea ca const.

#6. Enumări ambientale

Enumerările ambientale folosesc cuvântul cheie „declare” pentru a descrie forma tipurilor de enumerare deja existente. Luați în considerare acest exemplu;

declare enum Color {
  Red,
  Green,
  Blue
}

Enumerările ambientale sunt declarate în afara oricărui modul și pot fi folosite pentru a crea tipuri reutilizabile. Ca atare, puteți oricând să importați enumerari ambientale și să le utilizați în componentele dvs., atâta timp cât sunt declarate la nivel global.

Acum înțelegeți diferitele tipuri de enumerare în TypeScript. Acum putem arăta cum puteți utiliza enumerarea în moduri diferite. Acesta va fi codul nostru de referință;

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

Acestea sunt câteva cazuri de utilizare;

  • Extrageți membrii enumerați. De exemplu, dacă vrem să accesăm North, putem folosi

console.log(Direction.North); // Ieșiri: „N”

  • Utilizați membrii enumerare: puteți alege un anumit membru al enumerației pentru a reprezenta o direcție specifică. De exemplu,
const currentDirection = Direction.East;
console.log(`The current direction is ${currentDirection}`);

Aceasta va da această ieșire „Direcția curentă este E”

Enums vs. Object Maps în TypeScript

Enumerările sunt folosite pentru a reprezenta un set finit de valori. De exemplu, culorile curcubeului sau zilele săptămânii. Enumerările sunt puternic tastate, ceea ce înseamnă că captează orice erori în timpul dezvoltării. Acesta este un exemplu de enumerare TypeScript;

enum Color {
  Red,
  Green,
  Blue,
}

Hărți obiecte/ dicționare/ perechi cheie-valoare stochează și preiau valori asociate cu anumite chei. Puteți folosi TypeScript Object Maps pentru a stoca orice tip de date. Cu toate acestea, ele nu sunt strict scrise, ceea ce înseamnă că erorile de tip ar putea să nu fie capturate în timpul dezvoltării. Acesta este un exemplu de hartă obiect de aceleași culori;

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

Diferențele majore dintre enumerari și hărțile obiectelor din TypeScript sunt;

  • Enumerările sunt strict tastate, în timp ce hărțile obiectelor nu
  • Enumerările sunt un „Tip”, în timp ce hărțile de obiecte sunt o structură de date
  • Enumerările nu sunt flexibile, în timp ce hărțile obiectelor sunt flexibile
  Cum să vă vedeți statisticile pe Spotify

Cele mai bune practici de utilizare a enumerarilor în TypeScript

Am afirmat deja că TypeScript nu este singurul limbaj de programare cu caracteristica enums. Respectarea celor mai bune practici vă asigură că scrieți cod curat, optimizat și fără erori. Acestea sunt câteva dintre cele mai bune practici atunci când scrieți/utilizați enumerări TypeScript;

  • Scrieți cu majuscule numerele enumerate: scrieți întotdeauna cu majuscule primul cuvânt când denumiți o enumerare. De exemplu, este întotdeauna recomandabil să aveți o enumerare „Număr” în loc de „număr”.
  • Utilizați enumări pentru constante: enumările sunt cel mai bine folosite pentru a declara un set fix de elemente înrudite. De exemplu, într-o săptămână pot fi doar 7 zile. Membrii enumerarii nu ar trebui să se schimbe niciodată în timpul execuției.
  • Evitați suprautilizarea enumărilor: poate că tocmai ați învățat un concept nou și doriți să îl utilizați aproape peste tot în proiectul TypeScript. Cu toate acestea, utilizați întotdeauna enumerarea TypeScript cu moderație. Enumerările TypeScript sunt o alegere bună atunci când doriți să mențineți lizibilitatea codului.
  • Considerați enumerarile ca enumerari: puteți utiliza enumări TypeScript în scopuri diferite. Cu toate acestea, cea mai bună opțiune este să le folosiți pentru a reprezenta doar enumerari și nu alte structuri de date.
  • Evitați enumerarea automată: TypeScript atribuie valori membrilor enumerației dacă nu le atribuiți în mod explicit. Dați valorile enumerarilor dvs. și evitați comportamentul neașteptat atunci când executați codul.
  • Enumări documente: documentați sau comentați întotdeauna codul dvs. dacă intenționați să fie consumat de publicul larg. Explicați ce face fiecare enumerare și de ce este cel mai bun caz de utilizare.

De asemenea, puteți explora biblioteci TypeScript de top și runtime pentru a le cunoaște în calitate de dezvoltator.

Concluzie

Puteți defini enumări în TypeScript și puteți explica diferitele tipuri și cazurile de utilizare ale acestora. TypeScript vă va fi util atunci când doriți să aveți claritatea codului. Cu toate acestea, există și unele cazuri în care ar trebui să le evitați și să utilizați în schimb obiecte.

De exemplu, nu ar trebui să utilizați enumări atunci când aveți de-a face cu valori dinamice. De asemenea, nu puteți utiliza enumerarea ca variabile; programul dvs. va returna erori.

Puteți afla mai multe despre diferențele dintre TypeScript și JavaScript dacă încă sunteți confuz de cele două.