Comment réduire les objets JavaScript aux seules propriétés d'interface dans TypeScript ?

Réduction des objets JavaScript en propriétés d'interface

Lorsque nous travaillons avec TypeScript, nous rencontrons souvent le besoin de réduire les objets JavaScript pour ne contenir que des propriétés déclarées dans une interface. Ceci est particulièrement utile lors de l'envoi de données à des services REST qui attendent un schéma spécifique.

Considérez l'interface suivante :

<code class="typescript">interface MyInterface {
  test: string;
}</code>

Et une implémentation qui inclut une propriété supplémentaire :

<code class="typescript">class MyTest implements MyInterface {
  test: string;
  newTest: string;
}</code>

Le problème survient lorsque nous essayons d'utiliser la méthode toJson d'Angular pour sérialiser l'instance MyTest afin de l'envoyer à un service REST. La méthode toJson inclut la propriété newTest, qui ne fait pas partie de l'interface. Cela peut entraîner des erreurs côté serveur.

Pour résoudre ce problème, nous devons trouver un moyen de réduire l'instance MyTest pour qu'elle ne contienne que les propriétés déclarées dans l'interface MyInterface. Cependant, cela n'est pas possible directement car les interfaces dans TypeScript sont essentiellement des espaces réservés qui n'ont aucune représentation à l'exécution.

Au lieu de cela, nous pouvons utiliser une solution de contournement. Une approche consiste à définir l'interface comme une classe avec des initialiseurs de propriétés :

<code class="typescript">class MyInterface {
  test: string = undefined;
}</code>

En utilisant cette classe comme interface, nous pouvons ensuite utiliser une bibliothèque telle que Lodash pour sélectionner uniquement les propriétés qui correspondent à l'interface :

<code class="typescript">import _ from 'lodash';

const before = { test: "hello", newTest: "world"};
let reduced = new MyInterface();
_.assign(reduced , _.pick(before, _.keys(reduced)));
console.log('reduced', reduced); // { test: "hello" }</code>

Cette solution réduit efficacement l'instance MyTest pour inclure uniquement les propriétés déclarées dans l'interface MyInterface, offrant ainsi une solution simple et pragmatique au défi.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!