Wie reduziere ich JavaScript-Objekte auf nur Schnittstelleneigenschaften in TypeScript?

JavaScript-Objekte auf Schnittstelleneigenschaften reduzieren

Bei der Arbeit mit TypeScript stoßen wir oft auf die Notwendigkeit, JavaScript-Objekte so zu reduzieren, dass sie nur in deklarierte Eigenschaften enthalten eine Schnittstelle. Dies ist besonders nützlich, wenn Daten an REST-Dienste gesendet werden, die ein bestimmtes Schema erwarten.

Betrachten Sie die folgende Schnittstelle:

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

Und eine Implementierung, die eine zusätzliche Eigenschaft enthält:

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

Das Problem tritt auf, wenn wir versuchen, die toJson-Methode von Angular zu verwenden, um die MyTest-Instanz zum Senden an einen REST-Dienst zu serialisieren. Die toJson-Methode enthält die Eigenschaft newTest, die nicht Teil der Schnittstelle ist. Dies kann zu Fehlern auf der Serverseite führen.

Um dieses Problem zu beheben, müssen wir eine Möglichkeit finden, die MyTest-Instanz so zu reduzieren, dass sie nur die in der MyInterface-Schnittstelle deklarierten Eigenschaften enthält. Dies ist jedoch nicht direkt möglich, da Schnittstellen in TypeScript im Wesentlichen Platzhalter sind, die keine Laufzeitdarstellung haben.

Stattdessen können wir einen Workaround anwenden. Ein Ansatz besteht darin, die Schnittstelle als Klasse mit Eigenschaftsinitialisierern zu definieren:

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

Wenn wir diese Klasse als Schnittstelle verwenden, können wir dann eine Bibliothek wie Lodash verwenden, um nur die Eigenschaften auszuwählen, die mit der Schnittstelle übereinstimmen:

<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>

Diese Lösung reduziert die MyTest-Instanz effektiv so, dass sie nur die in der MyInterface-Schnittstelle deklarierten Eigenschaften enthält, und bietet so eine einfache und pragmatische Lösung für die Herausforderung.

Das obige ist der detaillierte Inhalt vonWie reduziere ich JavaScript-Objekte auf nur Schnittstelleneigenschaften in TypeScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!