Heim  >  Artikel  >  Web-Frontend  >  Wie kann sichergestellt werden, dass JavaScript-Objekte in TypeScript nur Schnittstelleneigenschaften enthalten?

Wie kann sichergestellt werden, dass JavaScript-Objekte in TypeScript nur Schnittstelleneigenschaften enthalten?

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-31 04:33:30436Durchsuche

How to Ensure JavaScript Objects Contain Only Interface Properties in TypeScript?

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn