Comment s'assurer que les objets JavaScript contiennent uniquement des propriétés d'interface dans TypeScript ?

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

Les interfaces TypeScript définissent des contrats pour les objets et garantissent la sécurité des types. Cependant, vous devrez parfois vous assurer qu'un objet contient uniquement les propriétés spécifiées par une interface.

Problème :

Considérez le code TypeScript suivant :

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

class MyTest implements MyInterface {
  test: string;
  newTest: string;
}

const test: MyTest = { test: "hello", newTest: "world" };
const reduced: MyInterface = test; // reduced still contains "newTest"</code>

Pourquoi est-ce problématique ?

Lorsque vous utilisez la méthode toJson d'Angular avant d'effectuer un appel REST, la propriété supplémentaire (newTest) est incluse dans le JSON, ce qui peut entraîner des problèmes avec le service de réception.

Solution 1 : Solution de contournement

James Moey propose une solution de contournement élégante : déclarez l'interface en tant que classe à la place et utilisez Lodash pour sélectionner uniquement les propriétés de l'interface à partir de l'objet :

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

import _ from 'lodash';
let reduced = new MyInterface();
_.assign(reduced, _.pick(before, _.keys(reduced)));</code>

Cette solution vous permet de conserver la sécurité des types tout en garantissant que l'objet résultant n'a que les propriétés de l'interface.

Solution 2 : Fonctions d'assistance d'interface

Une autre approche consiste à créer des fonctions d'assistance qui valident les objets par rapport aux interfaces. Par exemple :

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

function reduceObject(obj: any, targetInterface: any): MyInterface {
  const reduced = {};
  Object.keys(targetInterface).forEach((key) => {
    if (obj[key] !== undefined) {
      reduced[key] = obj[key];
    }
  });
  return reduced;
}

const test: MyTest = { test: "hello", newTest: "world" };
const reduced: MyInterface = reduceObject(test, MyInterface);</code>

Cette approche utilise l'introspection de boucle pour valider des objets par rapport à une interface et évite la surcharge de la fonction de sélection de Lodash.

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!