+
+ `,
+ 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.EASY);
+
+ readonly Direction = Direction;
+ readonly direction = signal(undefined);
+
+ readonly difficultyLabel = computed(() => {
+ switch (this.difficulty()) {
+ case Difficulty.EASY:
+ return Difficulty.EASY;
+ case Difficulty.NORMAL:
+ return Difficulty.NORMAL;
+ }
+ });
+
+ readonly directionLabel = computed(() => {
+ 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!';
+ }
+ });
+}
diff --git a/apps/typescript/enums-vs-union-types/src/app/app.config.ts b/apps/typescript/enums-vs-union-types/src/app/app.config.ts
new file mode 100644
index 0000000..81a6edd
--- /dev/null
+++ b/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: [],
+};
diff --git a/apps/typescript/enums-vs-union-types/src/assets/.gitkeep b/apps/typescript/enums-vs-union-types/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/apps/typescript/enums-vs-union-types/src/favicon.ico b/apps/typescript/enums-vs-union-types/src/favicon.ico
new file mode 100644
index 0000000..317ebcb
Binary files /dev/null and b/apps/typescript/enums-vs-union-types/src/favicon.ico differ
diff --git a/apps/typescript/enums-vs-union-types/src/index.html b/apps/typescript/enums-vs-union-types/src/index.html
new file mode 100644
index 0000000..1b677a0
--- /dev/null
+++ b/apps/typescript/enums-vs-union-types/src/index.html
@@ -0,0 +1,13 @@
+
+
+
+
+ typescript-enums-vs-union-types
+
+
+
+
+
+
+
+
diff --git a/apps/typescript/enums-vs-union-types/src/main.ts b/apps/typescript/enums-vs-union-types/src/main.ts
new file mode 100644
index 0000000..f3a7223
--- /dev/null
+++ b/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),
+);
diff --git a/apps/typescript/enums-vs-union-types/src/styles.scss b/apps/typescript/enums-vs-union-types/src/styles.scss
new file mode 100644
index 0000000..77e408a
--- /dev/null
+++ b/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 */
diff --git a/apps/typescript/enums-vs-union-types/tailwind.config.js b/apps/typescript/enums-vs-union-types/tailwind.config.js
new file mode 100644
index 0000000..38183db
--- /dev/null
+++ b/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: [],
+};
diff --git a/apps/typescript/enums-vs-union-types/tsconfig.app.json b/apps/typescript/enums-vs-union-types/tsconfig.app.json
new file mode 100644
index 0000000..5822042
--- /dev/null
+++ b/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"]
+}
diff --git a/apps/typescript/enums-vs-union-types/tsconfig.editor.json b/apps/typescript/enums-vs-union-types/tsconfig.editor.json
new file mode 100644
index 0000000..4ee6393
--- /dev/null
+++ b/apps/typescript/enums-vs-union-types/tsconfig.editor.json
@@ -0,0 +1,7 @@
+{
+ "extends": "./tsconfig.json",
+ "include": ["src/**/*.ts"],
+ "compilerOptions": {
+ "types": []
+ }
+}
diff --git a/apps/typescript/enums-vs-union-types/tsconfig.json b/apps/typescript/enums-vs-union-types/tsconfig.json
new file mode 100644
index 0000000..db0ec0f
--- /dev/null
+++ b/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,
+ },
+}
diff --git a/challenge-number.json b/challenge-number.json
index bba17af..fee6a96 100644
--- a/challenge-number.json
+++ b/challenge-number.json
@@ -1,6 +1,6 @@
{
- "total": 46,
- "🟢": 17,
+ "total": 47,
+ "🟢": 18,
"🟠": 120,
"🔴": 209
}
diff --git a/docs/src/content/docs/challenges/angular/46-simple-animations.md b/docs/src/content/docs/challenges/angular/46-simple-animations.md
index f7c197a..9a92e89 100644
--- a/docs/src/content/docs/challenges/angular/46-simple-animations.md
+++ b/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.
-
diff --git a/docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md b/docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md
new file mode 100644
index 0000000..c214be2
--- /dev/null
+++ b/docs/src/content/docs/challenges/typescript/47-enums-vs-union-types.md
@@ -0,0 +1,67 @@
+---
+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 conecpt 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 conect "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.
+- 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
+
+With an enum, 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.
+
+Another good thing is that they add meaning to otherwise meaningless values, so they can improve readability. For example `HttpStatus.Forbidden` gives more information than `Forbidden`.
+
+### Conclusion
+
+Enums are not redundant, but in most cases union is preferred. Unless you care a lot about maintainability, where Enums 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` to const enum
+- Refacotr `Direction` to union type
diff --git a/docs/src/content/docs/es/index.mdx b/docs/src/content/docs/es/index.mdx
index deb8340..f6b752c 100644
--- a/docs/src/content/docs/es/index.mdx
+++ b/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';
-
- Este repositorio contiene 46 Desafíos relacionados con Angular, Nx, RxJS, Ngrx y Typescript.
+
+ Este repositorio contiene 47 Desafíos relacionados con Angular, Nx, RxJS, Ngrx y Typescript.
Estos desafíos se resuelven en torno a problemas de la vida real o características específicas para mejorar tus habilidades.
diff --git a/docs/src/content/docs/fr/index.mdx b/docs/src/content/docs/fr/index.mdx
index d24f92a..ffd0c6e 100644
--- a/docs/src/content/docs/fr/index.mdx
+++ b/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';
-
- Ce répertoire rassemble 46 Défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
+
+ Ce répertoire rassemble 47 Défis liés à Angular, Nx, RxJS, Ngrx et Typescript. Ces défis portent sur des problèmes réels ou des fonctionnalités spécifiques pour améliorer vos compétences.
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index a172533..1e1d132 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -27,8 +27,8 @@ import MyIcon from '../../components/MyIcon.astro';
import SubscriptionForm from '../../components/SubscriptionForm.astro';
-
- This repository gathers 46 Challenges related to Angular, Nx, RxJS, Ngrx and Typescript.
+
+ This repository gathers 47 Challenges related to Angular, Nx, RxJS, Ngrx and Typescript.
These challenges resolve around real-life issues or specific features to elevate your skills.
diff --git a/docs/src/content/docs/pt/index.mdx b/docs/src/content/docs/pt/index.mdx
index 1c6de9b..068c538 100644
--- a/docs/src/content/docs/pt/index.mdx
+++ b/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';
-
- Este repositório possui 46 Desafios relacionados a Angular, Nx, RxJS,
+
+ Este repositório possui 47 Desafios relacionados a Angular, Nx, RxJS,
Ngrx e Typescript.
Esses desafios são voltados para problemas reais ou funcionalidades específicas afim de
melhorar suas habilidades.
diff --git a/docs/src/content/docs/ru/index.mdx b/docs/src/content/docs/ru/index.mdx
index 77b9f61..35fe566 100644
--- a/docs/src/content/docs/ru/index.mdx
+++ b/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';
-
- Этот репозиторий содержит 46 Испытания, связанных с Angular, Nx, RxJS, Ngrx and Typescript.
+
+ Этот репозиторий содержит 47 Испытания, связанных с Angular, Nx, RxJS, Ngrx and Typescript.
Испытания основаны на реальных задачах или инструментах для того, чтобы прокачать вас.