Merge pull request #638 from svenson95/add-challenge-typescript-enums-vs-union-types

feat(challenge 47): typescript enums vs union types

README.md

@@ -24,7 +24,7 @@ If you would like to propose a challenge, this project is open source, so feel f
 
 ## Challenges
 
-Check [all 46 challenges](https://angular-challenges.vercel.app/)
+Check [all 47 challenges](https://angular-challenges.vercel.app/)
 
 ## Contributors ✨
 

apps/typescript/enums-vs-union-types/.eslintrc.json

@@ -0,0 +1,36 @@
+{
+  "extends": ["../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}

apps/typescript/enums-vs-union-types/README.md

@@ -0,0 +1,13 @@
+# Enums vs Union Types
+
+> author: thomas-laforge
+
+### Run Application
+
+```bash
+npx nx serve typescript-enums-vs-union-types
+```
+
+### Documentation and Instruction
+
+Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/typescript/47-enums-vs-union-types/).

apps/typescript/enums-vs-union-types/project.json

@@ -0,0 +1,73 @@
+{
+  "name": "typescript-enums-vs-union-types",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "projectType": "application",
+  "prefix": "app",
+  "sourceRoot": "apps/typescript/enums-vs-union-types/src",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@angular-devkit/build-angular:application",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/apps/typescript/enums-vs-union-types",
+        "index": "apps/typescript/enums-vs-union-types/src/index.html",
+        "browser": "apps/typescript/enums-vs-union-types/src/main.ts",
+        "polyfills": ["zone.js"],
+        "tsConfig": "apps/typescript/enums-vs-union-types/tsconfig.app.json",
+        "inlineStyleLanguage": "scss",
+        "assets": [
+          "apps/typescript/enums-vs-union-types/src/favicon.ico",
+          "apps/typescript/enums-vs-union-types/src/assets"
+        ],
+        "styles": ["apps/typescript/enums-vs-union-types/src/styles.scss"],
+        "scripts": []
+      },
+      "configurations": {
+        "production": {
+          "budgets": [
+            {
+              "type": "initial",
+              "maximumWarning": "500kb",
+              "maximumError": "1mb"
+            },
+            {
+              "type": "anyComponentStyle",
+              "maximumWarning": "2kb",
+              "maximumError": "4kb"
+            }
+          ],
+          "outputHashing": "all"
+        },
+        "development": {
+          "optimization": false,
+          "extractLicenses": false,
+          "sourceMap": true
+        }
+      },
+      "defaultConfiguration": "production"
+    },
+    "serve": {
+      "executor": "@angular-devkit/build-angular:dev-server",
+      "configurations": {
+        "production": {
+          "buildTarget": "typescript-enums-vs-union-types:build:production"
+        },
+        "development": {
+          "buildTarget": "typescript-enums-vs-union-types:build:development"
+        }
+      },
+      "defaultConfiguration": "development"
+    },
+    "extract-i18n": {
+      "executor": "@angular-devkit/build-angular:extract-i18n",
+      "options": {
+        "buildTarget": "typescript-enums-vs-union-types:build"
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    }
+  }
+}

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

@@ -0,0 +1,83 @@
+import { Component, computed, signal } from '@angular/core';
+
+enum Difficulty {
+  EASY = 'easy',
+  NORMAL = 'normal',
+}
+
+enum Direction {
+  LEFT = 'left',
+  RIGHT = 'right',
+}
+
+@Component({
+  standalone: true,
+  imports: [],
+  selector: 'app-root',
+  template: `
+    <section>
+      <div>
+        <button mat-stroked-button (click)="difficulty.set(Difficulty.EASY)">
+          Easy
+        </button>
+        <button mat-stroked-button (click)="difficulty.set(Difficulty.NORMAL)">
+          Normal
+        </button>
+      </div>
+      <p>Selected Difficulty: {{ difficultyLabel() }}</p>
+    </section>
+
+    <section>
+      <div>
+        <button mat-stroked-button (click)="direction.set(Direction.LEFT)">
+          Left
+        </button>
+        <button mat-stroked-button (click)="direction.set(Direction.RIGHT)">
+          Right
+        </button>
+      </div>
+      <p>{{ directionLabel() }}</p>
+    </section>
+  `,
+  styles: `
+    section {
+      @apply flex flex-col mx-auto my-5 w-fit gap-2 items-center;
+
+      > div {
+        @apply flex w-fit gap-5;
+      }
+    }
+
+     button {
+      @apply rounded-md border px-4 py-2;
+     }
+  `,
+})
+export class AppComponent {
+  readonly Difficulty = Difficulty;
+  readonly difficulty = signal<Difficulty>(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 directionLabel = computed<string>(() => {
+    const prefix = 'You choosed to go';
+    switch (this.direction()) {
+      case Direction.LEFT:
+        return `${prefix} ${Direction.LEFT}`;
+      case Direction.RIGHT:
+        return `${prefix} ${Direction.RIGHT}`;
+      default:
+        return 'Choose a direction!';
+    }
+  });
+}

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

@@ -0,0 +1,5 @@
+import { ApplicationConfig } from '@angular/core';
+
+export const appConfig: ApplicationConfig = {
+  providers: [],
+};

apps/typescript/enums-vs-union-types/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>typescript-enums-vs-union-types</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+</html>

apps/typescript/enums-vs-union-types/src/main.ts

@@ -0,0 +1,7 @@
+import { bootstrapApplication } from '@angular/platform-browser';
+import { AppComponent } from './app/app.component';
+import { appConfig } from './app/app.config';
+
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err),
+);

apps/typescript/enums-vs-union-types/src/styles.scss

@@ -0,0 +1,5 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+/* You can add global styles to this file, and also import other style files */

apps/typescript/enums-vs-union-types/tailwind.config.js

@@ -0,0 +1,14 @@
+const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(__dirname, 'src/**/!(*.stories|*.spec).{ts,html}'),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

apps/typescript/enums-vs-union-types/tsconfig.app.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts"],
+  "include": ["src/**/*.d.ts"],
+  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+}

apps/typescript/enums-vs-union-types/tsconfig.editor.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["src/**/*.ts"],
+  "compilerOptions": {
+    "types": []
+  }
+}

apps/typescript/enums-vs-union-types/tsconfig.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "target": "es2022",
+    "useDefineForClassFields": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json",
+    },
+    {
+      "path": "./tsconfig.editor.json",
+    },
+  ],
+  "extends": "../../../tsconfig.base.json",
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true,
+  },
+}

challenge-number.json

@@ -1,6 +1,6 @@
 {
-  "total": 46,
-  "🟢": 17,
+  "total": 47,
+  "🟢": 18,
   "🟠": 120,
   "🔴": 209
 }

docs/src/content/docs/challenges/angular/46-simple-animations.md

@@ -6,7 +6,6 @@ challengeNumber: 46
 command: angular-simple-animations
 sidebar:
   order: 17
-  badge: New
 ---
 
 ## Information
@@ -45,4 +44,3 @@ Add a stagger animation for the list on the right side.
 
 <video controls src="https://github.com/svenson95/angular-challenges/assets/46655156/7b5e770f-38bb-43a2-9dd1-cc1329cab82f">
 </video>
-

docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md

@@ -0,0 +1,77 @@
+---
+title: 🟢 Enums vs Union Types
+description: Challenge 47 is about the comparison between enums and union types
+author: sven-brodny
+challengeNumber: 47
+command: typescript-enums-vs-union-types
+sidebar:
+  order: 18
+  badge: New
+---
+
+## Information
+
+[Enums](https://www.typescriptlang.org/docs/handbook/enums.html) allow developers to define a set of named constants that represent a specific type. TypeScript provides both numeric and string-based enums.
+
+```typescript
+enum Difficulty {
+  EASY = 'EASY',
+  NORMAL = 'NORMAL',
+}
+```
+
+On the other hand, [Union Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#union-types) are simpler than enums, as they don't require any additional runtime or compilation overhead.
+
+```typescript
+type Difficulty = 'EASY' | 'NORMAL';
+```
+
+### Reasons to use Union Types
+
+Enums are a concept borrowed from languages like C# and Java. TypeScript Enums are compiled into JavaScript objects with keys for both the names and values of the Enum members. This results in larger output files and additional memory consumption, which can be particularly problematic in performance-critical applications.
+
+Enums have some more pitfalls as well:
+
+- Non-const enums do not fit to the concept "a typed superset of JavaScript". They violate the concept by emitting JavaScript objects that live in runtime with a syntax that is not compatible with JavaScript.
+- Const enums in contrast cannot be transpiled with Babel. But there are workarounds for this issue, e. g. using `babel-plugin-const-enum` plugin. The TypeScript documentation about [const enums](https://www.typescriptlang.org/docs/handbook/enums.html#const-enums) says "_Do not use const enums at all_".
+- To use enums you have to import them, if you want to use enum values in a template, you'll need to declare a variable in your component too.
+- Numeric enums are not type safe ...
+
+```typescript
+enum Difficulty {
+  EASY = 0,
+  NORMAL = 1,
+}
+const hard: Difficulty = 2; // no error
+```
+
+### Reasons to use Enums
+
+Enums are the best option for code refactoring, it is much easier to find all usages of a value in a project, thus refactoring & maintaining is extremly easy. If you stick to assigning strings to the enum keys all the time, you can avoid a lot of issues.
+
+It's true that enums produces larger output files, but that's not always a real problem. As long as the enum do it's job without any problems, it shouldn't be something you care that much about.
+
+Another good thing is that the necessary enum prefix add meaning to otherwise meaningless values, so they can improve readability. For example `HttpStatus.Forbidden` gives more information than `Forbidden`.
+
+### Mapped types
+
+A [mapped type](https://learntypescript.dev/08/l2-mapped-type) is the process of creating a new type by mapping type information from an existing type.
+
+```typescript
+type Difficulty = { [K in 'EASY' | 'NORMAL']: string };
+```
+
+### Conclusion
+
+Enums are not redundant, but in most cases union types are preferred. Unless you care a lot about maintainability, where Enums maybe fit a little bit better. Here are some more interesing articles discussing this subject:
+
+- [Should You Use Enums or Union Types in Typescript?](https://www.bam.tech/article/should-you-use-enums-or-union-types-in-typescript)
+- [Typescript has unions, so are enums redundant?](https://stackoverflow.com/questions/40275832/typescript-has-unions-so-are-enums-redundant)
+- [Tidy TypeScript: Prefer union types over enums](https://fettblog.eu/tidy-typescript-avoid-enums/)
+
+## Statement
+
+The goal of this challenge is to refactor the enums `Difficulty` & `Direction`.
+
+- Refactor `Difficulty` enum to **union type**.
+- Refactor `Direction` enum to **mapped type**.

docs/src/content/docs/es/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Ir al Desafío más reciente
-      link: /es/challenges/angular/46-simple-animations/
+      link: /es/challenges/typescript/47-enums-vs-union-types/
       icon: rocket
     - text: Dar una estrella
       link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
 import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="46 Desafíos">
-  Este repositorio contiene 46 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
+<Card title="47 Desafíos">
+  Este repositorio contiene 47 Desafíos relacionados con <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> y <b>Typescript</b>.
   Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
 </Card>
 

docs/src/content/docs/fr/index.mdx

@@ -15,7 +15,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Aller au dernier Challenge
-      link: /fr/challenges/angular/46-simple-animations/
+      link: /fr/challenges/typescript/47-enums-vs-union-types/
       icon: rocket
     - text: Donne une étoile
       link: https://github.com/tomalaforge/angular-challenges
@@ -28,8 +28,8 @@ import MyIcon from '../../../components/MyIcon.astro';
 import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="46 Défis">
-    Ce répertoire rassemble 46 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+<Card title="47 Défis">
+    Ce répertoire rassemble 47 Défis liés à <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> et <b>Typescript</b>. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
 </Card>
 
 <Card title="Subscribe to get notify of latest challenges">

docs/src/content/docs/index.mdx

@@ -27,8 +27,8 @@ import MyIcon from '../../components/MyIcon.astro';
 import SubscriptionForm from '../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="46 Challenges">
-    This repository gathers 46 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
+<Card title="47 Challenges">
+    This repository gathers 47 Challenges related to <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
     These challenges resolve around real-life issues or specific features to elevate your skills.
 </Card>
 

docs/src/content/docs/pt/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Ir para o desafio mais recente
-      link: /pt/challenges/angular/46-simple-animations/
+      link: /pt/challenges/typescript/47-enums-vs-union-types/
       icon: rocket
     - text: Dar uma estrela
       link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
 import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-  <Card title="46 Desafios">
-    Este repositório possui 46 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
+  <Card title="47 Desafios">
+    Este repositório possui 47 Desafios relacionados a <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>,
     <b>Ngrx</b> e <b>Typescript</b>.
     Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
     melhorar suas habilidades.

docs/src/content/docs/ru/index.mdx

@@ -13,7 +13,7 @@ hero:
       icon: right-arrow
       variant: primary
     - text: Перейти к последней задаче
-      link: /ru/challenges/angular/46-simple-animations/
+      link: /ru/challenges/typescript/47-enums-vs-union-types/
       icon: rocket
     - text: Добавить звезду
       link: https://github.com/tomalaforge/angular-challenges
@@ -26,8 +26,8 @@ import MyIcon from '../../../components/MyIcon.astro';
 import SubscriptionForm from '../../../components/SubscriptionForm.astro';
 
 <CardGrid>
-<Card title="46 Испытания">
-  Этот репозиторий содержит 46 Испытания, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
+<Card title="47 Испытания">
+  Этот репозиторий содержит 47 Испытания, связанных с <b>Angular</b>, <b>Nx</b>, <b>RxJS</b>, <b>Ngrx</b> and <b>Typescript</b>.
   Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас.
 </Card>