Exclusif à TypeScript, les énumérations nous permettent de définir une liste de constantes nommées. Cela peut faciliter la compréhension du code lorsque nous documentons des cas distincts.
Les projets créés par Angular CLI utilisent TypeScript. Cela signifie que nous écrivons notre code de projet Angular en TypeScript.
TypeScript est un sur-ensemble de JavaScript. Il inclut et est compatible avec les fonctionnalités JavaScript. De plus, TypeScript inclut des énumérations en tant que fonctionnalité intégrée.
Les énumérations sont exclusives à TypeScript. Nous pouvons les utiliser pour définir une liste de constantes nommées. Cela nous permet de créer un code plus facile à comprendre en documentant des cas distincts. TypeScript inclut des énumérations numériques et basées sur des chaînes.
Dans cet article, nous verrons comment utiliser les énumérations TypeScript dans nos applications Angular.
Énumérations TypeScript
Avant de pouvoir travailler avec des énumérations dans notre application Angular, nous devons apprendre à définir et à utiliser des énumérations dans notre code TypeScript.
Nous définissons les énumérations avec les enum mot-clé. Par exemple, nous écrivons :
enum Answer {
No = 0,
Yes = 1,
}
pour définir le Answer enum qui a le No et Yes valeurs. No est mis à 0 et Yes est fixé à 1.
Nous pouvons définir des énumérations sans affecter chaque membre à une valeur. Alors on peut écrire :
enum Answer {
No,
Yes,
}
pour définir des énumérations. Alors No est mappé à 0 et Yes est automatiquement mappé à 1.
De plus, nous pouvons attribuer la première valeur au nombre que nous voulons, puis le reste des membres sera attribué aux nombres qui suivent le premier nombre.
Par exemple, si nous avons :
enum E {
X = 1,
Y,
Z,
}
Y est fixé à 2 et Z est défini sur 3 car le compilateur TypeScript attribuera automatiquement les valeurs supérieures d’une unité à la valeur précédemment attribuée si nous attribuons le premier membre à la valeur souhaitée.
Nous pouvons également définir chaque membre sur une valeur renvoyée par une fonction. Par exemple, nous écrivons :
const getSomeValue = (val: number) => val;
enum Answer {
No = getSomeValue(0),
Yes = getSomeValue(1),
}
pour définir le getSomeValue fonction qui prend un nombre et le renvoie.
Puis nous appelons getSomeValue pour renvoyer l’argument qui a été transmis et utiliser la valeur renvoyée comme valeur du cas enum.
Nous pouvons également attribuer des valeurs de chaîne aux membres enum. Par exemple, nous écrivons :
enum Answer {
No = "No",
Yes = "Yes",
}
mettre en place No à "No" et Yes à "Yes".
Les énumérations de chaînes n’ont pas de comportement d’auto-incrémentation pour attribuer des valeurs à chaque cas comme le font les énumérations numériques.
Nous pouvons également attribuer des expressions enum aux membres enum. Par exemple, nous écrivons :
enum E {
X = 1,
Y = 2,
Z = "abc".length,
}
définir un membre Z à "abc".lengthqui renvoie 3.
Pour accéder aux valeurs enum, nous utilisons la notation par points. Par exemple, nous écrivons :
enum E {
X = 1,
Y = 2,
Z = "abc".length,
}
console.log(E.X);
pour accéder à la valeur de E.X. Ainsi, la console enregistrerait 1 si nous exécutons le code.
Nous pouvons utiliser les membres enum comme types. Par exemple, nous écrivons :
enum Fruit {
Orange,
Banana,
}
interface Orange {
kind: Fruit.Orange;
color: string;
}
Nous utilisons le Fruit.Orange valeur comme type pour le kind propriété dans le Orange interface.
Alors kindla seule valeur possible est Fruit.Orange.
TypeScript a également const énumérations. const les énumérations sont des énumérations qui ne peuvent pas avoir de membres calculés.
Nous pouvons donc écrire quelque chose comme :
const enum Enum {
X = 1,
Y = X * 2,
}
où la valeur de Y est dérivé du membre X.
const les énumérations ne peuvent pas avoir de membres calculés car aucun code supplémentaire n’est généré pour calculer les valeurs des énumérations au moment de la compilation.
Utiliser les énumérations TypeScript dans Angular
Étant donné que les projets Angular utilisent TypeScript, nous pouvons ajouter des énumérations dans notre code de projet.
Pour ce faire, nous définissons simplement une énumération TypeScript comme nous le faisons dans la section précédente. Par exemple, nous écrivons :
app.component.ts
import { Component } from "@angular/core";
enum MyEnum {
FirstValue,
SecondValue,
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
foo = MyEnum.FirstValue;
bar = MyEnum.SecondValue;
}
définir MyEnum dans notre composante.
Puis nous fixons foo et bar aux valeurs des membres de la MyEnum énumération.
Ensuite, dans app.component.html, nous écrivons :
<div>
<p>{{ foo }}</p>
<p>{{ bar }}</p>
</div>
pour interpoler les valeurs de foo et bar pour afficher leurs valeurs sur la page.
Nous devrions voir 0 pour foo et 1 pour bar puisque le premier membre enum se voit attribuer 0 par défaut si nous ne lui attribuons aucune valeur.
Et les membres suivants ont des valeurs qui sont incrémentées à partir du membre précédent.
Les genres pour foo et bar sont déduites directement des valeurs que nous leur avons attribuées. Ainsi, le compilateur TypeScript sait qu’il s’agit de nombres.
Nous pouvons également utiliser l’énumération directement dans notre modèle.
Par exemple, dans app.component.ts, nous écrivons :
import { Component } from "@angular/core";
enum MyEnum {
FirstValue,
SecondValue,
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
enum: typeof MyEnum = MyEnum;
}
Puis dans app.component.html, on écrit :
<div>
<p>{{ enum.FirstValue }}</p>
<p>{{ enum.SecondValue }}</p>
</div>
Nous attribuons le type pour enum au type pour MyEnumque nous obtenons de typeof MyEnum. Et nous attribuons MyEnum à enum comme valeur.
Puis on montre les valeurs de enum.FirstValue et enum.SecondValue directement. Et donc, nous devrions voir 0 et 1 comme leurs valeurs respectivement.
Nous pouvons également utiliser des énumérations dans les méthodes de composants. Par exemple, nous écrivons :
import { Component } from "@angular/core";
enum MyEnum {
FirstValue,
SecondValue,
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
enum: typeof MyEnum = MyEnum;
ngOnInit() {
console.log(this.enum.FirstValue);
}
}
pour enregistrer la valeur de this.enum.FirstValue dans le ngOnInit méthode.
Nous devrions alors voir 0 enregistré lors du chargement du composant.
De plus, nous pouvons utiliser des énumérations dans les directives. Par exemple, nous écrivons :
app.component.ts
import { Component } from "@angular/core";
enum MyEnum {
FirstValue,
SecondValue,
}
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
enum: typeof MyEnum = MyEnum;
val: number = MyEnum.FirstValue;
onClick() {
this.val =
this.val === MyEnum.FirstValue ? MyEnum.SecondValue : MyEnum.FirstValue;
}
}
pour ajouter le val variable d’instance dans AppComponent.
Puis nous ajoutons le onClick méthode qui définit le val variable d’instance à MyEnum.SecondValue si sa valeur d’origine est MyEnum.FirstValue et vice versa.
Ensuite, dans app.component.html, nous écrivons :
<div>
<button (click)="onClick()">click me</button>
<p *ngIf="val === enum.FirstValue">foo</p>
<p *ngIf="val === enum.SecondValue">bar</p>
</div>
pour ajouter un bouton qui définit le gestionnaire d’événements de clic du bouton sur onClick méthode.
Et puis on ajoute deux p éléments qui s’affichent si val est égal à enum.FirstValue et enum.SecondValuerespectivement.
Par conséquent, lorsque nous cliquons sur le bouton, nous basculons entre foo et bar.
Depuis val et le MyEnum les valeurs des membres sont tous des nombres, nous pouvons les comparer avec === directement.
Nous pouvons réécrire le fichier app.component.html en remplaçant *ngIf avec [ngSwitch]
et *ngSwitchCase.
Pour ce faire, nous écrivons :
app.component.html
<div>
<button (click)="onClick()">click me</button>
<div [ngSwitch]="val">
<p *ngSwitchCase="enum.FirstValue">foo</p>
<p *ngSwitchCase="enum.SecondValue">bar</p>
</div>
</div>
utiliser le [ngSwitch] directive de comparer val avec le enum valeurs de membre spécifiées en tant que *ngSwitchCase valeurs directives.
Et nous gardons app.component.ts le même.
On obtient le même résultat que précédemment puisque l’on fait les mêmes comparaisons avec les mêmes variables. Nous n’avons fait que remplacer *ngIf avec [ngSwitch] et *ngSwitchCase pour réduire les répétitions.
Nous pouvons utiliser du code comme tout ce que nous avons ci-dessus dans n’importe quel autre type de fichiers de code angulaire comme des directives, des tests, des modules, etc.
Conclusion
Étant donné que les projets créés par Angular CLI utilisent TypeScript, nous écrivons notre code de projet Angular en TypeScript. TypeScript est un sur-ensemble de JavaScript qui inclut toutes les fonctionnalités JavaScript modernes avec de nombreuses fonctionnalités exclusives à TypeScript qui facilitent la programmation.
Les énumérations sont l’une des fonctionnalités exclusives à TypeScript. Nous pouvons les utiliser pour définir une liste de constantes nommées, ce qui nous permet de créer un code plus facile à comprendre en documentant des cas distincts.
TypeScript inclut des énumérations numériques et basées sur des chaînes. Et nous pouvons également attribuer des valeurs calculées à des énumérations non constantes.
Nous pouvons facilement incorporer des énumérations dans le code angulaire comme des composants et les utiliser comme valeurs pour les directives.
En savoir plus sur les directives, en commençant par NgPour dans notre Bases angulaires série.
Source link