Fast jede   erfordert eine Datenserialisierung. Dieses Bedürfnis entsteht in Situationen wie: Webanwendung  Datenübertragung über das Netzwerk (z. B. HTTP-Anfragen, WebSockets)  Einbetten von Daten in HTML (z. B. zur Flüssigkeitszufuhr)  Speichern von Daten in einem dauerhaften Speicher (wie LocalStorage)  Daten zwischen Prozessen teilen (wie Web Worker oder PostMessage)  In vielen Fällen können Datenverlust oder -beschädigung schwerwiegende Folgen haben. Daher ist es wichtig, einen praktischen und sicheren Serialisierungsmechanismus bereitzustellen, der dabei hilft, so viele Fehler wie möglich während der Entwicklungsphase zu erkennen. Für diese Zwecke ist es praktisch,   als Datenübertragungsformat und TypeScript für die statische Codeprüfung während der Entwicklung zu verwenden. JSON  TypeScript dient als Obermenge von JavaScript, was die nahtlose Nutzung von Funktionen wie   und   ermöglichen sollte, oder? Es stellt sich heraus, dass TypeScript trotz aller Vorteile von Natur aus nicht versteht, was JSON ist und welche Datentypen für die Serialisierung und Deserialisierung in JSON sicher sind. JSON.stringify JSON.parse  Lassen Sie uns dies anhand eines Beispiels veranschaulichen.  Das Problem mit JSON in TypeScript  Stellen Sie sich zum Beispiel eine Funktion vor, die einige Daten in LocalStorage speichert. Da LocalStorage keine Objekte speichern kann, verwenden wir hier die JSON-Serialisierung:   interface PostComment { authorId: string; text: string; updatedAt: Date; } function saveComment(comment: PostComment) { const serializedComment = JSON.stringify(comment); localStorage.setItem('draft', serializedComment); }  Wir benötigen außerdem eine Funktion zum Abrufen der Daten von LocalStorage.   function restoreComment(): PostComment | undefined { const text = localStorage.getItem('draft'); return text ? JSON.parse(text) : undefined; }  Was stimmt mit diesem Code nicht? Das erste Problem besteht darin, dass wir beim Wiederherstellen des Kommentars einen   anstelle von   für das Feld   erhalten. string Date updatedAt  Dies liegt daran, dass JSON nur über vier primitive Datentypen (   ,   ,   ,   ) sowie Arrays und Objekte verfügt. Es ist nicht möglich, ein   Objekt in JSON zu speichern, ebenso wie andere Objekte, die in JavaScript vorkommen: Funktionen, Map, Set usw. null string number boolean Date  Wenn   auf einen Wert stößt, der nicht im JSON-Format dargestellt werden kann, erfolgt eine Typumwandlung. Im Fall eines   Objekts erhalten wir einen String, da das   Objekt die   Methode implementiert, die einen String anstelle eines   Objekts zurückgibt. JSON.stringify Date Date toJson()- Date   const date = new Date('August 19, 1975 23:15:30 UTC'); const jsonDate = date.toJSON(); console.log(jsonDate); // Expected output: "1975-08-19T23:15:30.000Z" const isEqual = date.toJSON() === JSON.stringify(date); console.log(isEqual); // Expected output: true  Das zweite Problem besteht darin, dass die Funktion   den Typ   zurückgibt, bei dem das Datumsfeld vom Typ   ist. Aber wir wissen bereits, dass wir anstelle von   einen   Typ erhalten. TypeScript könnte uns helfen, diesen Fehler zu finden, aber warum nicht? saveComment PostComment Date Date string  Es stellt sich heraus, dass die Funktion   in der Standardbibliothek von TypeScript als   eingegeben wird. Aufgrund der Verwendung von   ist die Typprüfung grundsätzlich deaktiviert. In unserem Beispiel hat sich TypeScript einfach darauf verlassen, dass die Funktion einen   zurückgeben würde, der ein   Objekt enthält. JSON.parse (text: string) => any any PostComment Date  Dieses TypeScript-Verhalten ist unbequem und unsicher. Unsere Anwendung kann abstürzen, wenn wir versuchen, eine Zeichenfolge wie ein   zu behandeln. Es könnte beispielsweise kaputt gehen, wenn wir   aufrufen. Date comment.updatedAt.toLocaleDateString()  Tatsächlich könnten wir in unserem kleinen Beispiel einfach das   Objekt durch einen numerischen Zeitstempel ersetzen, was für die JSON-Serialisierung gut funktioniert. In realen Anwendungen können die Datenobjekte jedoch umfangreich sein, Typen können an mehreren Stellen definiert werden und die Identifizierung eines solchen Fehlers während der Entwicklung kann eine herausfordernde Aufgabe sein. Date  Was wäre, wenn wir das JSON-Verständnis von TypeScript verbessern könnten?  Umgang mit Serialisierung  Lassen Sie uns zunächst herausfinden, wie Sie TypeScript verständlich machen, welche Datentypen sicher in JSON serialisiert werden können. Angenommen, wir möchten eine Funktion   erstellen, bei der TypeScript das Eingabedatenformat überprüft, um sicherzustellen, dass es JSON-serialisierbar ist. safeJsonStringify   function safeJsonStringify(data: JSONValue) { return JSON.stringify(data); }  Der wichtigste Teil dieser Funktion ist der Typ   , der alle möglichen Werte darstellt, die im JSON-Format dargestellt werden können. Die Umsetzung ist ganz einfach: JSONValue   type JSONPrimitive = string | number | boolean | null | undefined; type JSONValue = JSONPrimitive | JSONValue[] | { [key: string]: JSONValue; };  Zuerst definieren wir den Typ   , der alle primitiven JSON-Datentypen beschreibt. Wir schließen auch den   Typ ein, da bei der Serialisierung Schlüssel mit dem   Wert weggelassen werden. Während der Deserialisierung werden diese Schlüssel einfach nicht im Objekt angezeigt, was in den meisten Fällen dasselbe ist. JSONPrimitive undefined undefined  Als nächstes beschreiben wir den   Typ. Dieser Typ nutzt die Fähigkeit von TypeScript, rekursive Typen zu beschreiben, bei denen es sich um Typen handelt, die auf sich selbst verweisen. Hier kann   entweder ein   , ein Array von   oder ein Objekt sein, bei dem alle Werte vom Typ   sind. Daher kann eine Variable dieses Typs   Arrays und Objekte mit unbegrenzter Verschachtelung enthalten. Die darin enthaltenen Werte werden auch auf Kompatibilität mit dem JSON-Format überprüft. JSONValue JSONValue JSONPrimitive JSONValue JSONValue JSONValue  Jetzt können wir unsere Funktion   anhand der folgenden Beispiele testen: safeJsonStringify   // No errors safeJsonStringify({ updatedAt: Date.now() }); // Yields an error: // Argument of type '{ updatedAt: Date; }' is not assignable to parameter of type 'JSONValue'. // Types of property 'updatedAt' are incompatible. // Type 'Date' is not assignable to type 'JSONValue'. safeJsonStringify({ updatedAt: new Date(); });  Alles scheint ordnungsgemäß zu funktionieren. Die Funktion ermöglicht es uns, das Datum als Zahl zu übergeben, erzeugt jedoch einen Fehler, wenn wir das   Objekt übergeben. Date  Betrachten wir jedoch ein realistischeres Beispiel, bei dem die an die Funktion übergebenen Daten in einer Variablen gespeichert werden und einen beschriebenen Typ haben.   interface PostComment { authorId: string; text: string; updatedAt: number; }; const comment: PostComment = {...}; // Yields an error: // Argument of type 'PostComment' is not assignable to parameter of type 'JSONValue'. // Type 'PostComment' is not assignable to type '{ [key: string]: JSONValue; }'. // Index signature for type 'string' is missing in type 'PostComment'. safeJsonStringify(comment);  Jetzt wird es etwas knifflig. TypeScript erlaubt uns nicht, eine Variable vom Typ   einem Funktionsparameter vom Typ   zuzuweisen, weil „Indexsignatur für Typ ‚string‘ im Typ ‚PostComment‘ fehlt“. PostComment JSONValue  Was ist also eine Indexsignatur und warum fehlt sie? Erinnern Sie sich, wie wir Objekte beschrieben haben, die in das JSON-Format serialisiert werden können?   type JSONValue = { [key: string]: JSONValue; };  In diesem Fall ist   die Indexsignatur. Das bedeutet: „Dieses Objekt kann beliebige Schlüssel in Form von Zeichenfolgen haben, deren Werte den Typ   haben“. Es stellt sich also heraus, dass wir dem Typ   eine Indexsignatur hinzufügen müssen, oder? [key: string] JSONValue PostComment   interface PostComment { authorId: string; text: string; updatedAt: number; // Don't do this: [key: string]: JSONValue; };  Dies würde bedeuten, dass der Kommentar beliebige Felder enthalten könnte, was normalerweise nicht das gewünschte Ergebnis beim Definieren von Datentypen in einer Anwendung ist.  Die eigentliche Lösung für das Problem mit der Indexsignatur kommt von   , die eine rekursive Iteration über Felder ermöglichen, selbst für Typen, für die keine Indexsignatur definiert ist. In Kombination mit Generika ermöglicht diese Funktion die Konvertierung jedes Datentyps   in einen anderen Typ   , der mit dem JSON-Format kompatibel ist. Mapped Types T JSONCompatible<T>   type JSONCompatible<T> = unknown extends T ? never : { [P in keyof T]: T[P] extends JSONValue ? T[P] : T[P] extends NotAssignableToJson ? never : JSONCompatible<T[P]>; }; type NotAssignableToJson = | bigint | symbol | Function;  Der Typ   ist ein zugeordneter Typ, der prüft, ob ein bestimmter Typ   sicher in JSON serialisiert werden kann. Dazu wird jede Eigenschaft vom Typ   durchlaufen und Folgendes ausgeführt: JSONCompatible<T> T T  Das   Der bedingte Typ überprüft, ob der Typ der Eigenschaft mit dem   Typ kompatibel ist, um sicherzustellen, dass er sicher in JSON konvertiert werden kann. In diesem Fall bleibt der Typ der Eigenschaft unverändert. T[P] extends JSONValue ? T[P] : ... JSONValue  Das   Der bedingte Typ überprüft, ob der Typ der Eigenschaft nicht JSON zugewiesen werden kann. In diesem Fall wird der Typ der Eigenschaft in   konvertiert, wodurch die Eigenschaft effektiv aus dem endgültigen Typ herausgefiltert wird. T[P] extends NotAssignableToJson ? never : ... never  Wenn keine dieser Bedingungen erfüllt ist, wird der Typ rekursiv überprüft, bis eine Schlussfolgerung gezogen werden kann. Auf diese Weise funktioniert es auch dann, wenn der Typ keine Indexsignatur hat.  Die   check at the begin wird verwendet, um zu verhindern, dass der   Typ in einen leeren Objekttyp   konvertiert wird, der im Wesentlichen dem Typ „   entspricht. unknown extends T ? never :... unknown {} any  Ein weiterer interessanter Aspekt ist der Typ   . Es besteht aus zwei TypeScript-Primitiven (bigint und symbol) und dem   Typ, der jede mögliche Funktion beschreibt. Der   ist entscheidend für das Herausfiltern von Werten, die nicht JSON zugewiesen werden können. Dies liegt daran, dass jedes komplexe Objekt in JavaScript auf dem Objekttyp basiert und mindestens eine Funktion in seiner Prototypkette hat (z. B.   ). Der   Typ iteriert über alle diese Funktionen, sodass die Überprüfung der Funktionen ausreicht, um alles herauszufiltern, was nicht für JSON serialisierbar ist. NotAssignableToJson Function Function toString() JSONCompatible  Nun verwenden wir diesen Typ in der Serialisierungsfunktion:   function safeJsonStringify<T>(data: JSONCompatible<T>) { return JSON.stringify(data); }  Jetzt verwendet die Funktion einen generischen Parameter   und akzeptiert das Argument   . Dies bedeutet, dass   vom Typ   erforderlich sind, bei denen es sich um einen JSON-kompatiblen Typ handeln sollte. Jetzt können wir die Funktion mit Datentypen ohne Indexsignatur verwenden. T JSONCompatible<T> data T  Die Funktion verwendet jetzt einen generischen Parameter   , der vom Typ   erweitert wird. Dies bedeutet, dass   vom Typ   akzeptiert werden, bei denen es sich um einen JSON-kompatiblen Typ handeln sollte. Daher können wir die Funktion mit Datentypen verwenden, denen eine Indexsignatur fehlt. T JSONCompatible<T> data T   interface PostComment { authorId: string; text: string; updatedAt: number; } function saveComment(comment: PostComment) { const serializedComment = safeJsonStringify(comment); localStorage.setItem('draft', serializedComment); }  Dieser Ansatz kann immer dann verwendet werden, wenn eine JSON-Serialisierung erforderlich ist, z. B. zum Übertragen von Daten über das Netzwerk, zum Einbetten von Daten in HTML, zum Speichern von Daten in localStorage, zum Übertragen von Daten zwischen Workern usw. Darüber hinaus kann der   Helfer verwendet werden, wenn ein streng typisiertes Objekt ohne Einer Variablen vom Typ   muss eine Indexsignatur zugewiesen werden. toJsonValue JSONValue   function toJsonValue<T>(value: JSONCompatible<T>): JSONValue { return value; } const comment: PostComment = {...}; const data: JSONValue = { comment: toJsonValue(comment) };  In diesem Beispiel können wir durch die Verwendung   den Fehler umgehen, der mit der fehlenden Indexsignatur im   -Typ zusammenhängt. toJsonValue PostComment  Umgang mit Deserialisierung  Bei der Deserialisierung ist die Herausforderung gleichzeitig einfacher und komplexer, da sie sowohl statische Analyseprüfungen als auch Laufzeitprüfungen für das Format der empfangenen Daten umfasst.  Aus der Perspektive des Typsystems von TypeScript ist die Herausforderung recht einfach. Betrachten wir das folgende Beispiel:   function safeJsonParse(text: string) { return JSON.parse(text) as unknown; } const data = JSON.parse(text); // ^? unknown  In diesem Fall ersetzen wir den Rückgabetyp   durch den Typ   . Warum   wählen? Im Wesentlichen kann ein JSON-String alles enthalten, nicht nur die Daten, die wir erwarten. Beispielsweise kann sich das Datenformat zwischen verschiedenen Anwendungsversionen ändern oder ein anderer Teil der App könnte Daten in denselben LocalStorage-Schlüssel schreiben. Daher ist   die sicherste und präziseste Wahl. any unknown unknown unknown  Allerdings ist das Arbeiten mit dem   Typ weniger komfortabel als die bloße Angabe des gewünschten Datentyps. Neben der Typumwandlung gibt es mehrere Möglichkeiten, den   Typ in den erforderlichen Datentyp umzuwandeln. Eine dieser Methoden ist die Verwendung der   Bibliothek, um Daten zur Laufzeit zu validieren und detaillierte Fehler auszulösen, wenn die Daten ungültig sind. unknown unknown Superstruct-   import { create, object, number, string } from 'superstruct'; const PostComment = object({ authorId: string(), text: string(), updatedAt: number(), }); // Note: we no longer need to manually specify the return type function restoreDraft() { const text = localStorage.getItem('draft'); return text ? create(JSON.parse(text), PostComment) : undefined; }  Hier fungiert die   als Typwächter und   den Typ auf die gewünschte   ein. Folglich müssen wir den Rückgabetyp nicht mehr manuell angeben. create schränkt Comment  Die Implementierung einer sicheren Deserialisierungsoption ist nur die halbe Miete. Ebenso wichtig ist es, nicht zu vergessen, es zu verwenden, wenn man die nächste Aufgabe im Projekt in Angriff nimmt. Dies stellt eine besondere Herausforderung dar, wenn ein großes Team an dem Projekt arbeitet, da es schwierig sein kann, sicherzustellen, dass alle Vereinbarungen und Best Practices eingehalten werden.    kann bei dieser Aufgabe helfen. Dieses Tool hilft dabei, alle Fälle   Nutzung zu identifizieren. Insbesondere können alle Verwendungen von   gefunden und sichergestellt werden, dass das Format der empfangenen Daten überprüft wird. Weitere Informationen zum Entfernen des Typs   “ in einer Codebasis finden Sie im Artikel   . Typescript-eslint any JSON.parse any „Making TypeScript Truly „Strongly Typed““  Abschluss  Hier sind die letzten Dienstprogrammfunktionen und -typen, die zur sicheren JSON-Serialisierung und -Deserialisierung beitragen sollen. Diese können Sie im vorbereiteten   testen. TS Playground   type JSONPrimitive = string | number | boolean | null | undefined; type JSONValue = JSONPrimitive | JSONValue[] | { [key: string]: JSONValue; }; type NotAssignableToJson = | bigint | symbol | Function; type JSONCompatible<T> = unknown extends T ? never : { [P in keyof T]: T[P] extends JSONValue ? T[P] : T[P] extends NotAssignableToJson ? never : JSONCompatible<T[P]>; }; function toJsonValue<T>(value: JSONCompatible<T>): JSONValue { return value; } function safeJsonStringify<T>(data: JSONCompatible<T>) { return JSON.stringify(data); } function safeJsonParse(text: string): unknown { return JSON.parse(text); }  Diese können in jeder Situation verwendet werden, in der eine JSON-Serialisierung erforderlich ist.  Ich wende diese Strategie bereits seit mehreren Jahren in meinen Projekten an und sie hat ihre Wirksamkeit durch die rechtzeitige Erkennung potenzieller Fehler während der Anwendungsentwicklung unter Beweis gestellt.  Ich hoffe, dieser Artikel hat Ihnen einige neue Erkenntnisse geliefert. Vielen Dank fürs Lesen!  Nützliche Links   TypeScript wirklich „stark typisiert“ machen   Verbesserung der Standardbibliothekstypen von TypeScript   Die Superstruktur-Bibliothek   TS-Spielplatz

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

This story contains AI-generated text. The author has used AI either for research, to generate outlines, or write the text itself. 

Beherrschen der typsicheren JSON-Serialisierung in TypeScript

About Author

KOMMENTARE

Hängeetiketten

DIESER ARTIKEL WURDE VORGESTELLT IN

Related Stories

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

HackerNoon Decoded 2024: Celebrating Our Programming Community!

HackerNoon Decoded 2024: Celebrating Our Tech Stories Community!

HackerNoon Decoded 2024: Celebrating Our Data Science Community!

HackerNoon Decoded 2024: Celebrating Our Startups Community!

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps