Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Mary-Kate Olsen
Freigeben: 2024-10-31 04:33:30
Original
431 Leute haben es durchsucht

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!