refactor: use union and mapped types

Author: soliyn

apps/typescript/47-enums-vs-union-types/src/app/app.component.ts

@@ -1,25 +1,28 @@
 import { Component, computed, signal } from '@angular/core';
 
-enum Difficulty {
-  EASY = 'easy',
-  NORMAL = 'normal',
-}
+type Difficulty = keyof typeof difficulty;
+const difficulty = {
+  easy: 'easy',
+  normal: 'normal',
+};
 
-enum Direction {
-  LEFT = 'left',
-  RIGHT = 'right',
-}
+type Direction = 'left' | 'right';
+type DirectionMap = { [key in Direction]: string };
+const directions: DirectionMap = {
+  left: 'left',
+  right: 'right',
+};
 
 @Component({
   imports: [],
   selector: 'app-root',
   template: `
     <section>
       <div>
-        <button mat-stroked-button (click)="difficulty.set(Difficulty.EASY)">
+        <button mat-stroked-button (click)="difficulty.set('easy')">
           Easy
         </button>
-        <button mat-stroked-button (click)="difficulty.set(Difficulty.NORMAL)">
+        <button mat-stroked-button (click)="difficulty.set('normal')">
           Normal
         </button>
       </div>
@@ -28,10 +31,8 @@ enum Direction {
 
     <section>
       <div>
-        <button mat-stroked-button (click)="direction.set(Direction.LEFT)">
-          Left
-        </button>
-        <button mat-stroked-button (click)="direction.set(Direction.RIGHT)">
+        <button mat-stroked-button (click)="direction.set('left')">Left</button>
+        <button mat-stroked-button (click)="direction.set('right')">
           Right
         </button>
       </div>
@@ -53,30 +54,17 @@ enum Direction {
   `,
 })
 export class AppComponent {
-  readonly Difficulty = Difficulty;
-  readonly difficulty = signal<Difficulty>(Difficulty.EASY);
+  readonly difficulty = signal<Difficulty>('easy');
 
-  readonly Direction = Direction;
   readonly direction = signal<Direction | undefined>(undefined);
 
-  readonly difficultyLabel = computed<string>(() => {
-    switch (this.difficulty()) {
-      case Difficulty.EASY:
-        return Difficulty.EASY;
-      case Difficulty.NORMAL:
-        return Difficulty.NORMAL;
-    }
-  });
+  readonly difficultyLabel = computed<string>(
+    () => difficulty[this.difficulty()],
+  );
 
-  readonly directionLabel = computed<string>(() => {
-    const prefix = 'You chose to go';
-    switch (this.direction()) {
-      case Direction.LEFT:
-        return `${prefix} ${Direction.LEFT}`;
-      case Direction.RIGHT:
-        return `${prefix} ${Direction.RIGHT}`;
-      default:
-        return 'Choose a direction!';
-    }
-  });
+  readonly directionLabel = computed(() =>
+    this.direction()
+      ? `You chose to go ${directions[this.direction()!]}`
+      : 'Choose a direction',
+  );
 }