Maison > interface Web > js tutoriel > le corps du texte

Comment réduire un objet JavaScript aux propriétés d'interface dans TypeScript ?

Mary-Kate Olsen
Libérer: 2024-11-01 01:55:27
original
746 Les gens l'ont consulté

How to Reduce a JavaScript Object to Interface Properties in TypeScript?

Réduction d'un objet JavaScript en propriétés d'interface

Dans TypeScript, une interface agit comme un modèle pour les structures de données. Cependant, lors de l'exécution, les interfaces sont vides, ce qui rend impossible la réduction directe d'un objet pour qu'il ne contienne que les propriétés qui y sont définies.

Implémentation

Cependant, il existe plusieurs solutions de contournement. méthodes :

Utiliser une classe

Définissez plutôt l'interface en tant que classe :

class MyInterface {
  test: string = undefined;
}
Copier après la connexion

Ensuite, utilisez Lodash pour extraire les propriétés requises :

import _ from "lodash";

const before = { test: "hello", newTest: "world" };
let reduced = new MyInterface();
_.assign(reduced, _.pick(before, _.keys(reduced)));
console.log("reduced", reduced); // contains only "test" property
Copier après la connexion

Opérateur d'assemblage

Alternativement, vous pouvez également utiliser l'opérateur d'assemblage :

let reduced = {...new MyInterface(), ...test};
Copier après la connexion

Cela fusionne l'objet vide "MyInterface" avec l'objet "test", en écrasant toutes les propriétés en double.

Pourquoi utiliser cette méthode ?

Cette approche est utile lors de l'envoi de données aux services REST à l'aide de "toJson" d'Angular méthode. La propriété « newTest », bien qu'inaccessible lors de la compilation, serait transformée par « toJson », ce qui obligerait le service REST à rejeter le JSON en raison de propriétés non valides. En réduisant l'objet aux propriétés de l'interface, seules les données attendues sont envoyées, garantissant une bonne communication avec le service.

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal