Forem: David BILONGO

Les Décorateurs en TypeScript

David BILONGO — Tue, 03 Dec 2024 10:23:46 +0000

Les décorateurs en TypeScript sont une fonctionnalité puissante qui permet d'ajouter des métadonnées ou de modifier le comportement des classes, des méthodes, des propriétés ou des paramètres. Ils sont souvent utilisés dans des frameworks comme Angular pour enrichir les composants et les services. Que vous soyez débutant ou développeur expérimenté, cet article vous guide pas à pas dans la création de vos propres décorateurs pour enrichir vos applications TypeScript.

Pré-requis

Avant de commencer, assurez-vous de disposer des éléments suivants :

Une compréhension de base de TypeScript.
TypeScript configuré avec l'option experimentalDecorators activée dans votre fichier tsconfig.json :

{
  "compilerOptions": {
    "experimentalDecorators": true
  }
}

Qu'est-ce qu'un décorateur ?

Un décorateur est une fonction appliquée à une classe, une méthode, une propriété ou un paramètre. Précédé du symbole @, un décorateur peut modifier ou enrichir l'élément auquel il est attaché. Ses principales utilisations incluent :

Ajouter des métadonnées : utile pour fournir des informations supplémentaires sur une classe ou une propriété.
Modifier le comportement : permet de changer dynamiquement le fonctionnement d'une méthode ou d'une classe.
Injecter des dépendances : pratique dans les architectures modulaires.

Création d'un Décorateur de Composant

Étape 1 : Définir le Décorateur

Nous allons créer un décorateur qui ajoute une propriété componentName à une classe.

function Component(name: string) {
    return function (constructor: Function) {
        constructor.prototype.componentName = name;
    };
}

Explication :

Ce décorateur reçoit une chaîne name et l'ajoute comme propriété sur le prototype de la classe. Toutes les instances de cette classe auront accès à cette propriété.

Étape 2 : Appliquer le Décorateur

Appliquons le décorateur à une classe.

@Component('MonComposant')
class MonComposant {
    constructor() {
        console.log(`Le nom du composant est : ${this.componentName}`);
    }
}

Étape 3 : Tester le Décorateur

Créons une instance de la classe pour vérifier son fonctionnement.

const composant = new MonComposant(); 
// Affiche : Le nom du composant est : MonComposant

Création d'un Décorateur d'Input

Étape 1 : Définir le Décorateur d'Input

Ce décorateur surveille et journalise les modifications d'une propriété.

function Input() {
    return function (target: any, propertyKey: string) {
        let value: any;

        const getter = () => {
            return value;
        };

        const setter = (newValue: any) => {
            console.log(`La valeur de ${propertyKey} a été mise à jour : ${newValue}`);
            value = newValue;
        };

        Object.defineProperty(target, propertyKey, {
            get: getter,
            set: setter,
            enumerable: true,
            configurable: true,
        });
    };
}

Explication :

Le décorateur utilise Object.defineProperty pour intercepter les modifications de la propriété. Cela permet d’ajouter une logique personnalisée, comme la journalisation des changements.

Étape 2 : Appliquer le Décorateur d'Input

Appliquons-le à une propriété.

class MonComposant {
    @Input()
    public nom: string;

    constructor(nom: string) {
        this.nom = nom;
    }
}

Étape 3 : Tester le Décorateur d'Input

Modifiez la propriété pour observer l'effet.

const composant = new MonComposant('Composant Initial');
composant.nom = 'Nouveau Composant'; 
// Affiche : La valeur de nom a été mise à jour : Nouveau Composant

Conclusion

Les décorateurs en TypeScript offrent une manière élégante et puissante d'ajouter des fonctionnalités et des métadonnées à vos classes et propriétés. En suivant cet article, vous avez appris à :

Créer un décorateur de composant pour enrichir une classe.
Implémenter un décorateur d'input pour surveiller les modifications des propriétés.

Ces exemples simples montrent comment les décorateurs peuvent améliorer la lisibilité et la maintenabilité de votre code. Explorez davantage la documentation officielle TypeScript pour découvrir des applications encore plus avancées, comme l'utilisation des métadonnées réfléchies avec Reflect.metadata.

Docker et ses Commandes de Base

David BILONGO — Tue, 03 Dec 2024 09:59:51 +0000

Cet article présente un aperçu des commandes de base de Docker, un outil essentiel pour la conteneurisation d'applications. Docker permet aux développeurs de créer, déployer et exécuter des applications dans des conteneurs, offrant ainsi une solution efficace pour la gestion des environnements de développement et de production. Nous allons explorer les commandes fondamentales qui vous aideront à démarrer avec Docker.

Installation de Docker

Avant de pouvoir utiliser Docker, vous devez l'installer sur votre système. Vous pouvez télécharger Docker Desktop pour Windows ou macOS, ou installer Docker Engine sur Linux. Suivez les instructions sur le site officiel de Docker pour votre système d'exploitation.

Commandes de Base

1. Vérifier l'installation de Docker

Pour vérifier que Docker est installé correctement, utilisez la commande suivante :

docker --version

2. Exécuter un conteneur

Pour exécuter un conteneur, vous pouvez utiliser la commande docker run. Par exemple, pour exécuter un conteneur basé sur l'image hello-world, utilisez :

docker run hello-world

3. Lister les conteneurs

Pour voir tous les conteneurs en cours d'exécution, utilisez :

docker ps

Pour voir tous les conteneurs, y compris ceux qui sont arrêtés, ajoutez l'option -a :

docker ps -a

4. Arrêter un conteneur

Pour arrêter un conteneur en cours d'exécution, utilisez la commande docker stop suivie de l'ID ou du nom du conteneur :

docker stop <container_id>

5. Supprimer un conteneur

Pour supprimer un conteneur, utilisez la commande docker rm :

docker rm <container_id>

6. Lister les images

Pour voir toutes les images Docker sur votre machine, utilisez :

docker images

7. Supprimer une image

Pour supprimer une image, utilisez la commande docker rmi :

docker rmi <image_id>

8. Construire une image

Pour construire une image à partir d'un Dockerfile, utilisez :

docker build -t <nom_image>:<tag> .

9. Exécuter un conteneur en mode interactif

Pour exécuter un conteneur en mode interactif, utilisez l'option -it :

docker run -it <image_id> /bin/bash

10. Accéder aux logs d'un conteneur

Pour voir les logs d'un conteneur, utilisez :


docker logs <container_id>

Conclusion

Docker est un outil puissant qui facilite la gestion des applications conteneurisées. En maîtrisant ces commandes de base, vous serez en mesure de créer, gérer et déployer vos applications de manière efficace. N'hésitez pas à explorer davantage la documentation officielle de Docker pour approfondir vos connaissances et découvrir des fonctionnalités avancées.

Découvrez @codedav/datetime-helper - Simplifiez la gestion des dates et heures en Node.js !

David BILONGO — Sun, 04 Aug 2024 20:28:18 +0000

🎉 Nous sommes ravis de vous présenter @codedav/datetime-helper – un package Node.js puissant conçu pour simplifier le formatage des dates et heures ! Que vous utilisiez CommonJS ou ES Modules, notre package offre une gamme de fonctionnalités pour formater et manipuler les dates en toute simplicité.

🔹 Fonctionnalités principales :

Formatage flexible des dates et heures
Fonctions faciles à utiliser pour la manipulation des dates
Compatible avec CommonJS et ES Modules

Commencez dès aujourd'hui et facilitez-vous la vie avec la gestion des dates ! 🚀

📥 Installez maintenant via npm : npm install @codedav/datetime-helper
📚 En savoir plus : datetime-helper

Guard dans Angular

David BILONGO — Tue, 09 Jul 2024 12:20:32 +0000

Introduction

Dans cet article, nous allons explorer comment utiliser les gardes (guards) avec Angular 17. Les gardes permettent de protéger les routes et de vérifier certaines conditions avant de permettre l'accès à une route spécifique.

Qu'est-ce qu'un Garde Fonctionnel ?

Un garde fonctionnel dans Angular est une fonction utilisée pour intercepter et potentiellement bloquer la navigation vers une route. Avec Angular 17, vous utilisez CanActivateFn pour créer des gardes fonctionnels.

Exemple de Code

Voici un exemple de garde fonctionnel authGuard :

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = (route, state) => {
  const authService = inject(AuthService);
  const router = inject(Router);

  if (authService.isLoggedIn()) {
    return true;
  } else {
    router.navigate(['/login']);
    return false;
  }
};

Utilisation du Garde

Pour utiliser ce garde, vous devez le configurer dans votre module de routage en utilisant provideRouter et withGuards :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideRouter, withGuards } from '@angular/router';
import { AppComponent } from './app/app.component';
import { authGuard } from './app/guards/auth.guard';

const routes = [
  { path: 'protected', component: ProtectedComponent, canActivate: [authGuard] }
];

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes, withGuards())
  ]
}).catch(err => console.error(err));

Explication du Code

CanActivateFn : Un type représentant une fonction de garde.
inject : Fonction pour injecter des dépendances comme des services.
Router : Service de routage pour naviguer vers d'autres routes.
authGuard : Fonction de garde vérifiant si l'utilisateur est authentifié.

Conclusion

Les gardes fonctionnels dans Angular 17 offrent une manière flexible et puissante de protéger les routes et de gérer les autorisations. Ils sont particulièrement utiles pour des tâches telles que l'authentification et le contrôle d'accès.

Pour plus de détails, consultez la documentation officielle d'Angular sur les gardes【20†source】【22†source】【23†source】.

Intercepteurs dans Angular

David BILONGO — Tue, 09 Jul 2024 12:12:57 +0000

Introduction

Dans cet article, nous allons explorer comment utiliser les intercepteurs HTTP fonctionnels avec Angular 17. Les intercepteurs permettent de manipuler les requêtes et réponses HTTP, facilitant des fonctionnalités telles que l'ajout d'en-têtes, le logging, l'authentification, et bien plus encore.

Qu'est-ce qu'un Intercepteur HTTP Fonctionnel ?

Un intercepteur HTTP fonctionnel dans Angular est une fonction middleware utilisée pour intercepter et potentiellement transformer les requêtes sortantes et les réponses entrantes. Avec Angular 17, vous pouvez utiliser HttpInterceptorFn pour créer des intercepteurs fonctionnels.

Exemple de Code

Voici un exemple simple pour illustrer comment créer un intercepteur HTTP fonctionnel :

import { HttpRequest, HttpHandlerFn, HttpInterceptorFn } from '@angular/common/http';

export const loggingInterceptor: HttpInterceptorFn = (req: HttpRequest<unknown>, next: HttpHandlerFn) => {
  console.log(`Outgoing request to URL: ${req.url}`);
  return next(req).pipe(
    tap(event => {
      if (event instanceof HttpResponse) {
        console.log(`Response received from URL: ${req.url} with status: ${event.status}`);
      }
    })
  );
};

Dans cet exemple, l'intercepteur logue l'URL de chaque requête sortante et la réponse correspondante.

Utilisation de l'Intercepteur

Pour utiliser cet intercepteur, vous devez le configurer lors de l'initialisation de l'application en utilisant provideHttpClient et withInterceptors :

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { AppComponent } from './app/app.component';
import { loggingInterceptor } from './app/http-interceptors/logging-interceptor';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(withInterceptors([loggingInterceptor]))
  ]
}).catch(err => console.error(err));

Explication du Code

HttpInterceptorFn : Un type qui représente une fonction intercepteur.
HttpRequest : Représente la requête HTTP.
HttpHandlerFn : Représente la fonction de gestionnaire de requêtes suivante dans la chaîne d'intercepteurs.
next(req) : Appelle le prochain intercepteur dans la chaîne ou envoie la requête si c'est le dernier intercepteur.

Conclusion

Les intercepteurs fonctionnels dans Angular 17 offrent une manière flexible et puissante de gérer les requêtes et réponses HTTP. Ils sont particulièrement utiles pour des tâches transversales comme l'authentification, le logging, et la gestion des erreurs.

Pour plus de détails, consultez la documentation officielle d'Angular sur les intercepteurs【13†source】【14†source】.

Interceptors en NestJS

David BILONGO — Mon, 08 Jul 2024 12:59:34 +0000

Introduction

Dans cet article, nous allons plonger dans le concept des intercepteurs dans Nest.js. Les intercepteurs permettent de transformer les données entrantes ou sortantes, d'effectuer des tâches supplémentaires avant ou après l'exécution d'une méthode de route, et bien plus encore. Ils sont un outil puissant pour gérer les aspects transversaux de vos applications.

Qu'est-ce qu'un Intercepteur ?

Les intercepteurs dans Nest.js sont des classes annotées avec @Injectable() qui implémentent l'interface NestInterceptor. Ils interviennent dans le cycle de requête/réponse et peuvent transformer ou manipuler les données à différentes étapes.

Exemple de Code

Voici un exemple simple pour illustrer comment créer un intercepteur dans Nest.js :

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class TransformInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    console.log('Before...');
    const now = Date.now();

    return next
      .handle()
      .pipe(
        map(data => ({
          data,
          timestamp: new Date().toISOString(),
          duration: `${Date.now() - now}ms`,
        })),
      );
  }
}

Explication du Code

TransformInterceptor implémente NestInterceptor.
La méthode intercept reçoit le contexte d'exécution (ExecutionContext) et le gestionnaire d'appel (CallHandler).
Nous ajoutons une logique pour mesurer la durée de l'exécution et ajouter un timestamp aux données de réponse.
next.handle() continue le traitement de la requête et nous utilisons l'opérateur map de RxJS pour transformer les données de la réponse.

Utilisation dans un Contrôleur

Pour utiliser cet intercepteur dans un contrôleur, vous pouvez l'appliquer à une route spécifique ou globalement :

import { Controller, Get, UseInterceptors } from '@nestjs/common';
import { TransformInterceptor } from './transform.interceptor';

@Controller('users')
@UseInterceptors(TransformInterceptor)
export class UsersController {
  @Get()
  findAll(): string {
    return 'This action returns all users';
  }
}

Conclusion

Les intercepteurs sont extrêmement utiles pour implémenter des fonctionnalités transversales telles que la transformation des réponses, le logging, et bien plus encore. En utilisant les intercepteurs, vous pouvez centraliser et réutiliser ces fonctionnalités à travers votre application.

Prochaines Étapes

Explorez d'autres types d'intercepteurs pour des cas d'utilisation spécifiques comme le logging, la gestion des erreurs, et la mise en cache.
Combinez les intercepteurs avec d'autres fonctionnalités avancées de Nest.js comme les guards et les pipes pour une gestion complète des requêtes et des réponses.

Ressources Additionnelles

Documentation officielle Nest.js sur les intercepteurs

Nest JS Guard

David BILONGO — Mon, 08 Jul 2024 12:36:04 +0000

Introduction

Dans cette publication, nous explorerons le concept des guards dans Nest.js et comment les utiliser pour sécuriser vos applications backend. Les guards jouent un rôle crucial en permettant ou en refusant l'accès aux routes de manière conditionnelle, en fonction des règles que vous définissez.

Qu'est-ce qu'un Guard ?

Les guards dans Nest.js sont des classes annotées avec @Injectable() qui implémentent l'interface CanActivate. Ils sont utilisés pour protéger l'accès aux routes en fonction de certains critères comme les autorisations de l'utilisateur, l'authentification, ou d'autres conditions métier.

Exemple de Code

Voici un exemple de base pour illustrer comment créer un guard simple dans Nest.js :

import { Injectable, CanActivate, ExecutionContext } from '@nestjs/common';
import { Observable } from 'rxjs';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    context: ExecutionContext,
  ): boolean | Promise<boolean> | Observable<boolean> {
    // Logic to determine if user is authenticated
    const request = context.switchToHttp().getRequest();
    return !!request.user;
  }
}

Explication du Code

Nous créons une classe AuthGuard qui implémente CanActivate.
Dans la méthode canActivate, nous accédons à l'exécution du contexte pour vérifier si l'utilisateur est authentifié (request.user).
Si l'utilisateur est authentifié, canActivate retourne true, sinon false.

Utilisation dans un Contrôleur

Pour utiliser ce guard dans un contrôleur, vous pouvez l'appliquer à une route spécifique comme ceci :

import { Controller, Get, UseGuards } from '@nestjs/common';
import { AuthGuard } from './auth.guard';

@Controller('products')
export class ProductsController {
  @Get()
  @UseGuards(AuthGuard)
  findAll(): string {
    return 'This action returns all products';
  }
}

Conclusion

Les guards sont essentiels pour sécuriser vos applications Nest.js, en offrant un contrôle d'accès flexible et basé sur des règles. En utilisant les guards, vous pouvez facilement implémenter des stratégies d'autorisation et d'authentification dans vos APIs.

Prochaines Étapes

Explorez d'autres types de guards comme AuthGuard, RolesGuard, ou créez des guards personnalisés pour répondre à des besoins spécifiques.
Intégrez des guards avec des stratégies d'autorisation plus complexes basées sur des rôles ou des permissions.

Ressources Additionnelles

Documentation officielle Nest.js sur les guards