Heim > Artikel > Web-Frontend > Wie kann sichergestellt werden, dass JavaScript-Objekte in TypeScript nur Schnittstelleneigenschaften enthalten?
JavaScript-Objekte auf Schnittstelleneigenschaften reduzieren
TypeScript-Schnittstellen definieren Verträge für Objekte und gewährleisten Typsicherheit. Manchmal müssen Sie jedoch sicherstellen, dass ein Objekt nur die von einer Schnittstelle angegebenen Eigenschaften enthält.
Problem:
Berücksichtigen Sie den folgenden TypeScript-Code:
<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>
Warum ist das problematisch?
Wenn Sie die toJson-Methode von Angular vor einem REST-Aufruf verwenden, ist die zusätzliche Eigenschaft (newTest) im JSON enthalten, was zu Problemen führen kann der empfangende Dienst.
Lösung 1: Problemumgehung
James Moey bietet eine elegante Problemumgehung: Deklarieren Sie stattdessen die Schnittstelle als Klasse und verwenden Sie Lodash, um nur die Schnittstelleneigenschaften auszuwählen vom Objekt:
<code class="ts">class MyInterface { test: string = undefined; } import _ from 'lodash'; let reduced = new MyInterface(); _.assign(reduced, _.pick(before, _.keys(reduced)));</code>
Mit dieser Lösung können Sie die Typsicherheit beibehalten und gleichzeitig sicherstellen, dass das resultierende Objekt nur die Schnittstelleneigenschaften hat.
Lösung 2: Schnittstellenhilfsfunktionen
Ein anderer Ansatz besteht darin, Hilfsfunktionen zu erstellen, die Objekte anhand von Schnittstellen validieren. Zum Beispiel:
<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>
Dieser Ansatz verwendet Schleifenintrospektion, um Objekte anhand einer Schnittstelle zu validieren, und vermeidet den Mehraufwand der Auswahlfunktion von Lodash.
Das obige ist der detaillierte Inhalt vonWie kann sichergestellt werden, dass JavaScript-Objekte in TypeScript nur Schnittstelleneigenschaften enthalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!