DEV Community: Fabien

Interface et type quand les utiliser ?

Fabien — Fri, 18 Mar 2022 18:43:46 +0000

La différence entre interface et type dans TypeScript est assez difficile à cerner et c'est normal ! Ils sont tellement similaires, qu'il est possible de les interchanger sans que ça ne soit problématique.

Alors quand utiliser l'un et quand utiliser l'autre ?

Cela dépend de vous, il n'y a pas de règle bien définie.

Le seul conseil valable serait de bien définir les conventions d'usage que vous souhaitez mettre en place dans vos projets et de les respecter.

🤜 Une petite note en passant, on parle de type mais ça n'est pas tout à fait correcte, ce que nous créons est un alias de type.

Un exemple simple qui permettrait de mieux comprendre serait de définir un alias de type qui correspondrait à un type primitif (string, boolean, number, ...)

type MonAliasDeType = string;

type MonAutreAliasDeType = {
   maPropriete: MonAliasDeType,
   ...
}

Nous faisons référence à un type.

Mon point de vue

Personnellement j'ai beaucoup utilisé les interfaces, tellement, qu'il était très rare que j'en vienne à utiliser les types.

Mais après avoir feuilleté la documentation TypeScript, lu quelques articles et révisé mes cours, j'ai maintenant une idée plus claire des subtilités de chacun d’eux.

les types ne sont pas ouverts, c'est à dire qu'ils ne peuvent pas être modifiés après avoir été définis.

Contrairement aux interfaces qui, quant à elles, permettent la fusion, c'est à dire que si l'on déclare deux fois, ou plus, une interface avec le même nom, ça ne sera pas considéré comme une erreur et aura pour effet de fusionner les interfaces.

interface MonInterface {
  a: string;
}

interface MonInterface {
  b: string;
}

let maVariable: MonInterface;

maVariable.a
maVariable.b

A utiliser les interfaces on prendrait donc le risque de fusionner celles qui ont le même nom. Même si ça ne semble pas être un problème courant, il serait possible de fusionner des interfaces sans s'en rendre compte.

type, quant à lui, retournera une erreur.

type a aussi l'avantage de proposer plus possibilités pour décrire le format des données, voir les Discriminated Types (|) et les Intersection types (&).

Comment choisir ?

J'utilise type par défaut et les interfaces dans les cas suivants :

Pour ajouter des propriétés à une interface globale, comme celle de Window
Dans les librairies pour qu'elles puissent être surchargées

Sur ce, bon dev ;-)

Filtrer une liste via un Pipe Angular

Fabien — Sat, 05 Feb 2022 08:33:24 +0000

👀 Démo sur Stackblitz

Après avoir vu comment filtrer une liste avec RXJS, j'ai pensé qu'il serait intéressant de voir comment on pourrait arriver au même résultat en étant un peu plus Angular Friendly.

Le Pipe Angular est parfait pour transformer une donnée depuis le template. Le principe est simple, on lui passe une valeur et ses arguments en entrée, sur laquelle on applique une transformation.

C'est exactement ce dont on a besoin !

Les arguments

import { Pipe, PipeTransform } from '@angular/core';

type TList = string | number | IListItem;

interface IListItem {
  [key: string]: TList;
}

@Pipe({
  name: 'filter',
})
export class FilterPipe implements PipeTransform {
  public transform(
    list: Array<TList>,
    text: string,
    filterOn?: string
  ): TList[] {}
}

Un Pipe Angular implémente PipeTransform qui impose la méthode transform. Le premier argument (qui se situe sur la gauche du pipe) correspond à la valeur sur laquelle on applique la transformation. Puis suivent les arguments qui nous seront utiles pour notre filtrage.

Dans notre cas, nous nous attendons à recevoir une liste list, la recherche text que rentrera l'utilisateur et une clé filterOn sur laquelle filtrer, qui est optionnelle. Le tableau pourrait ne pas être un objet, mais une liste simple.

Nous connaissons plus ou moins la valeur de retour, c'est pour cela que j'ai défini une interface IListItem qui prend un type pour définir la valeur de chaque propriété TList, un type représentant soit un number, soit une string soit IListItem lui-même. Enfin notre valeur de retour qui sera du même type que TList.

🤜 TypeScript est un outil génial, il fait partie intégrante d'Angular et pour le meilleur. Un bon typage du code permet d'éviter beaucoup d'erreurs, permet de mieux comprendre les contextes de fonctionnalités, facilite sa maintenance et son évolution.

Le cas où le texte serait vide

public transform(
  list: Array<TList>,
  text: string,
  filterOn?: string
): TList[] {
  if (text === '') return list;
}

Le premier point à prendre en compte, également le plus simple à gérer, est que faire quand le texte est vide ? Simplement retourner le tableau d'entrée. Chaque fois que text sera vide on affichera le tableau initial.

Quand les éléments de la liste ne sont pas des objets

public transform(
  list: Array<TList>,
  text: string,
  filterOn?: string
): TList[] {
  if (text === '') return list;

  return list.filter((item: TList) => {
    let valueToCheck: string = filterOn
      ? selectValue<TList>(item, filterOn)
      : `${item}`;

    if (valueToCheck) {
      valueToCheck = replaceDiacritics(valueToCheck)?.toLowerCase();
    }

    const formattedText: string = replaceDiacritics(text).toLowerCase();

    return valueToCheck?.includes(formattedText);
  });
}

J'utilise l'opérateur filter il nous retournera uniquement les valeurs du tableau qui respectent la condition.

Premièrement on vérifie si la propriété filterOn est définie, dans le cas où le troisième argument de notre Pipe serait défini, on suppose que notre liste est une liste d'objets.

Une fois la valeur trouvée, on la transforme en minuscule, ainsi, peu importe la casse, l'entrée est retrouvable.

Pour filtrer notre liste j'utilise includes.

On notera également l'utilisation de toLowerCase() sur l'argument text afin de conserver une cohérence avec la valeur trouvée dans l'objet. Ainsi peu importe la casse on saura retrouver les occurrences.

🤜 J'utilise le point d'interrogation (?) pour prévenir des erreurs dans le cas où valueToCheck serait null ou undefined.

Les diacritiques

Notre liste est maintenant correctement filtrée… Oui… mais Thomas Sabre m'a fait remarqué que les caractères spéciaux ne sont pas pris en compte. Effectivement si notre valeur est "J'ai mangé" et que l'utilisateur entre "j'ai mange" notre pipe ne retournera aucun résultat.

Alors comment gérer le cas des diacritiques ?

A chaque caractère lui est assigné un code, par exemple A vaut U+0041 quand Z vaut U+005A. Les lettres sont différentes, les codes sont donc différents, facile et logique.

Bien… il en va de même pour les lettres accentuées. Quand pour l'humain il comprend que "j'ai mange" puisse faire référence à "j'ai mangé", nos machines, elles, nécessitent plus de précisions. En effet "e" et "é" sont différents. Tout comme "é" et "è" le sont aussi :

e = U+0065
é = U+00E9
è = U+00E8

On comprend alors pourquoi notre pipe ne retrouve aucune valeur correspondante à "J'ai mange".

é et è sont basés sur e, grâce à cette base commune nous sommes capable de trouver une compatibilité entre ces caractères. JavaScript nous offre la possibilité de normaliser facilement notre texte et de remplacer les occurences :

return value.normalize("NFD").replace(/\p{Diacritic}/gu, "")

NFD (Normalization Form Canonical Decomposition) permet de décomposer les caractères, exemple : é = e + ◌̀

Le replace recherche, quant à lui, toutes les occurrences diacritiques. Le flag u permet de supporter les caractères Unicode et le g les recherches dans toute la chaîne de caractères.

function replaceDiacritics(value: string): string {
  return value.normalize('NFD').replace(/\p{Diacritic}/gu, '');
}

Les extras

Filtrer dans un objet à plusieurs niveaux

Ok, c'est bien, mais dans un projet réel, parfois, souvent, la propriété sur laquelle on veut filtrer ne se trouve pas à la racine de l'objet. Alors comment faire, comment filtrer sur ces propriétés ?

<book-item *ngFor="let book of books | filter:author:'address.city'; trackBy: trackBySku" [book]="book"></book-item>

J'utilise un point pour indiquer que l'on souhaite accéder à une propriété, plus bas dans l'arborescence de l'objet. Chaque point serait un nœud.

function selectValue<TItem>(item: TItem, selector: string): string {
  if (!item) return;

  let value = null;

  if (selector.includes('.')) {
    value = selector
      .split('.')
      .reduce((previous: string, current: string) => previous[current], item);
  }

  return value ?? item[selector];
}

Dans un premier temps, je vérifie si item existe, s'il n'existe pas je ne vais pas plus loin dans la fonction. S'il existe, je vérifie si le sélecteur passé en paramètre a un point. Si c'est le cas, je split le sélecteur on aura ['address', 'city'], sur lesquels on bouclera.

Grâce à .reduce on va pouvoir descendre jusqu'à la propriété demandée et retourner sa valeur.

Dans le cas où le sélecteur ne comporte pas de point (.) Cela signifie que la valeur se trouve à la racine de l'item de la liste passée en paramètre.

Utiliser le pipe dans une classe

Je suis un grand adepte de TypeScript, un code bien décrit est un atout considérable, lors de la phase de développement et de debug.

public transform(
 list: Array<TList>,
 text: string,
 filterOn?: string
): TList[] {
   ...
}

Si je veux utiliser mon pipe dans un fichier .ts, je vais être confronté à des erreurs de typage, qu'on pourrait régler en mettant des any partout (non, ne faites pas ça 😢). Plus sainement, en une ligne on peut régler le problème tout en gardant une description propre de notre code :

public transform<T>(list: Array<T>, text: string, filterOn: string): Array<T>;

Et voilà, c'est propre, simple et on garde notre typage. Lorsqu'on utilisera notre pipe on sera en mesure de garder un typage fort et de travailler tout en profitant des avantages de TypeScript.

🤜 Typescript offre la possibilité de typer de manière dynamique en utilisant des alias. L'alias va créer un nouveau nom qui fait référence au type qui lui est passé.

Filtrer depuis plusieurs champs

<search-input (onSearch)="searchTerm = $event" placeholder="Title"></search-input>
<search-input (onSearch)="addressTerm = $event" placeholder="Address"></search-input>
<search-input (onSearch)="descriptionTerm = $event" placeholder="Sypnosis"></search-input>

<book-item *ngFor="let book of books
  | filter:searchTerm:'title'
  | filter:addressTerm:'address.city'
  | filter:descriptionTerm:'sypnosis'; trackBy: trackBySku"
  [book]="book"></book-item>

Filtrer une même liste suivant plusieurs critères (via plusieurs champs) peut être fait facilement. Il nous suffit de chaîner les pipes sur notre liste. Dans la limite du raisonnable, si vous avez une liste filtrable sur beaucoup de conditions, peut-être serait-il préférable de revoir le pipe.

👀 Démo sur Stackblitz

🤞 En lien
Filtrer une liste avec RXJS et Angular

❤ Merci à Godson Yebadokpo pour la relecture.
❤ Merci à Thomas Sabre pour son commentaire sur les dialectiques.

📸 Photo by Joshua Rodriguez on Unsplash

Sur ce, bon dev ;-)

Filtrer une liste avec RXJS & Angular

Fabien — Sat, 05 Feb 2022 08:13:30 +0000

👀 Démo sur Stackblitz

Une fonctionnalité assez commune dans nos applications est le filtrage d’une liste en fonction des entrées de l’utilisateur. Fonctionnalité qui peut être créée grâce à RXJS.

Dans cet article, nous allons voir comment nous pourrions gérer le filtrage d’une liste au sein d’une application Angular et avec la librairie RXJS.

🤜 RXJS nous permet de contrôler et de modifier un flux de données asynchrone.

L'exemple

Ajouter un champ simple qui permettrait de filtrer une liste de livres en fonction de la valeur entrée par l’utilisateur.

Comment faire ?

Pour ce faire nous allons décomposer notre fonctionnalité en plusieurs composants :

Un composant qui sera en charge de l’affichage des items de la liste : BookItemComponent;
Un composant pour le champ de recherche : SearchInputComponent;
Le composant principal : BookListComponent qui affichera le champ et la liste;

BookItemComponent

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';

export interface IBook {
  sku: string;
  title: string;
  sypnosis: string;
}

@Component({
  selector: 'book-item',
  template: `
    <article class="card">
      <h2>
        {{ book.title }}
      </h2>
      <p>{{ book.sypnosis }}</p>
    </article>
  `,
  styles: [
    `
    article {
      border-radius: 2px;
      display: inline-block;
      width: 400px;
      padding: 10px;
      margin-top: 10px;
      background-color: #fff;
      border: 1px solid rgba(200, 200, 200, 0.75);
    }
    h2, p {
      margin: 0;
    }
    h2 {
      font-size: 1.2rem;
      margin-bottom: 5px;
    }
  `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BookItemComponent {
  @Input()
  public book!: IBook;
}

Je débute par BookItemComponent. Un simple composant d’affichage qui correspond au contenu de chaque item du Array qui sera affiché, on passera les données par item.

🤜 On utilise ChangeDetectionStrategy.onPush pour faire en sorte que le composant ne détecte les changements que si :

Au moins l’une de ses valeurs d’entrée a changé
Un événement provient du composant lui-même ou de l’un de ses enfants
On exécute la détection des changements de manière explicite, avec ChangeDetectorRef, par exemple
Le pipe asynchrone (async) est utilisé dans le HTML

SearchInputComponent

import {
  Component,
  EventEmitter,
  Output,
  ChangeDetectionStrategy,
  OnInit,
  OnDestroy,
} from '@angular/core';
import { FormControl } from '@angular/forms';
import { Subscription } from 'rxjs';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';

@Component({
  selector: 'search-input',
  template: `
    <input type="text" [formControl]="searchControl" />
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SearchInputComponent implements OnInit, OnDestroy {
  @Output()
  public onSearch: EventEmitter<string> = new EventEmitter<string>();

  public searchControl: FormControl = new FormControl('');

  private readonly searchSubscription: Subscription = new Subscription();

  public ngOnInit(): void {
    const searchInput$ = this.searchControl.valueChanges
      .pipe(distinctUntilChanged(), debounceTime(300))
      .subscribe((text: string) => {
        this.onSearch.emit(text);
      });

    this.searchSubscription.add(searchInput$);
  }

  public ngOnDestroy(): void {
    this.searchSubscription.unsubscribe();
  }
}

Pour écouter les changements dans le champ, j’ai décidé d’utiliser ReactiveFormsModule qui propose une API assez complète pour gérer les formulaires. De cette API, ce qui m’intéresse est valueChanges qui retourne la dernière valeur à chaque changement provenant, dans notre cas, du FomControl: searchControl.

Dans le pipe qui suit, à valueChanges je lui passe deux opérateurs :
debounceTime(300) : Prend en paramètre le temps d’attente avant la reprise du stream. Dans notre cas, 300ms, on attend donc 300ms avant de passer au prochain opérateur. Si dans les 300ms la valeur change de nouveau, le compteur se remet à 0.

distincUntilChanged : Compare la valeur précédente et la valeur courante. Il fonctionne comme une condition, si la nouvelle valeur est différente de la valeur précédente alors il passe au prochain opérateur.

Après une attente de 300ms et après avoir vérifié que la valeur courante est différente de la valeur précédente, elle est émise au composant parent.

🤜 Pourquoi unsubscribe ?

Pour des problèmes de mémoire, de fuite de mémoire et pour contrôler le flux de données afin d'éviter des effets secondaires. Dans certain cas il faut se désabonner explicitement, dans notre cas, à la destruction du composant dans lequel il se situe.

BookListComponent

import {
  ChangeDetectionStrategy,
  Component,
  Input,
  OnInit,
} from '@angular/core';
import { map } from 'rxjs/operators';
import { BehaviorSubject, Observable, combineLatest, of } from 'rxjs';
import { IBook } from './book-item.component';

@Component({
  selector: 'book-list',
  template: `
    <search-input (onSearch)="search($event)"></search-input>
    <ng-container *ngIf="(books$ | async) as books">
      <book-item *ngFor="let book of books; trackBy: trackBySku;" [book]="book"></book-item>
    </ng-container>
  `,
  styles: [
    `
    book-item {
      display: block;
    }
  `,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BookListComponent implements OnInit {
  @Input()
  public books: IBook[] = [];

  public books$!: Observable<IBook[]>;

  public readonly trackBySku: (index: number, item: IBook) => string = (
    index: number,
    item: IBook
  ) => item.sku;

  private readonly searchFilter: BehaviorSubject<string> = new BehaviorSubject(
    ''
  );

  private readonly searchText$: Observable<string> =
    this.searchFilter.asObservable();

  public ngOnInit(): void {
    const listOfBooks$: Observable<IBook[]> = of(this.books);

    this.books$ = combineLatest([listOfBooks$, this.searchText$]).pipe(
      map(([list, search]: [IBook[], string]) =>
        this.filterByName(list, search)
      )
    );
  }

  public search(value: string): void {
    this.searchFilter.next(value);
  }

  private filterByName(list: IBook[], searchTerm: string): IBook[] {
    if (searchTerm === '') return list;

    return list.filter(
      (item: IBook) =>
        item.title.toLowerCase().indexOf(searchTerm.toLowerCase()) > -1
    );
  }
}

Analysons cette classe. Nous avons this.books$ qui est initialisé dans le ngOnInit. Il récupére les valeurs passées par l’entrée books, autrement dit la liste (un Array) et la valeur retournée par le searchFilter$, correspondant au texte rentré dans le champ.

Ces deux variables sont passées en argument à combineLatest qui, dans ce cas, est très utile, car lorsque l’un des observables émet une valeur, il combine les valeurs les plus récentes de chaque source. Les données d’entrée (books) ne changent pas, c’est la liste initiale, celle qu’on voit affichée à l’initialisation du composant. Quant à this.searchText$, il change de valeur à chaque entrée dans le champ texte.

Suit la variable searchText$ qui récupère le flux du BehaviorSubject. Celle-là même qui est utilisée dans le combineLatest.

Voyons la fonction search(value: string), elle est appelée quand un nouvel événement est détecté, soit à chaque fois que le composant enfant SearchInputComponent notifie le parent d’un changement dans le champ texte. search(value: string) pousse dans le BehaviorSubject la nouvelle valeur, cette nouvelle valeur passe par les opérateurs que nous venons de décrire.

Quand il y a un changement, les valeurs des deux observables écoutés passent par l’opérateur map qui appelle la fonction filterByName(list: IBook[], searchTerm: string) (dont list est et restera le tableau initial), fonction qui, si a searchTerm à vide retourne toute la liste, sinon effectue le tri et retourne les noms correspondants à la recherche.

🤜 trackBy permet à Angular de savoir si l‘une des valeurs du tableau a changé. Il s’agit d’une fonction qui définit comment suivre les modifications apportées aux éléments d’un itérable.

A chaque fois que l’on ajoute, déplace, modifie ou supprime des éléments dans le tableau, la directive va rechercher quel élément de ce tableau il doit modifier pour uniquement mettre cet élément à jour. Sans cette directive, l’itérable entier serait actualisé.

Un gage de performance notamment sur des listes longues et/ou des listes qui sont vouées à subir beaucoup de modifications.

👀 Démo sur Stackblitz

🤞 En lien
Filtrer une liste via un pipe Angular (Bientôt)

❤ Merci à Godson Yebadokpo pour la relecture.

📸 Photo by Jacek on Unsplash

Sur ce, bon dev ;-)