JSON-Werttypen
Definieren Sie einen vollständigen, typsicheren JSON-Werttyp.
JSON-Werttypen ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist ein JSON-Wert?
JSON erlaubt eine festgelegte Menge von Wertformen: Zeichenketten, Zahlen, boolesche Werte, null, Arrays und Objekte. Ein rekursiver Typ kann genau diese Menge beschreiben.
type Json =
| string
| number
| boolean
| null
| Json[]
| { [k: string]: Json };
// arrays and objects nest Json again.Der rekursive JSON-Typ
Die entscheidende Erkenntnis: Arrays enthalten Json, und Objektwerte sind Json. Daher verweist der Typ bei verschachtelten Daten auf sich selbst.
type Json =
| string | number | boolean | null
| Json[]
| { [k: string]: Json };
const x: Json = { name: "Ada", tags: ["a", "b"], active: true };
console.log(x);Primitive JSON-Werte
Die einfachsten JSON-Werte sind primitive Werte. Jeder davon kann Json direkt zugewiesen werden.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const a: Json = "hello";
const b: Json = 42;
const c: Json = true;
const d: Json = null;
console.log(a, b, c, d);JSON-Arrays
Ein JSON-Array ist Json[] und kann daher eine Mischung beliebiger JSON-Werte enthalten, einschließlich verschachtelter Arrays und Objekte.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const arr: Json = [1, "two", true, null, [3, 4]];
console.log(Array.isArray(arr));JSON-Objekte
Ein JSON-Objekt ordnet über eine Index-Signatur Zeichenkettenschlüsseln Json-Werte zu und erlaubt dadurch beliebige Verschachtelungen.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const obj: Json = {
user: { name: "Ada", age: 36 },
scores: [10, 20, 30]
};
console.log(obj);Tief verschachteltes JSON
Da der Typ rekursiv ist, sind tief verschachtelte Strukturen ohne zusätzliche Deklarationen vollständig typisiert.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
a: { b: { c: [1, { d: true }] } }
};
console.log(deep);Was JSON nicht umfasst
Der Typ Json weist Werte, die JSON nicht darstellen kann, korrekt zurück, etwa undefined, Funktionen oder Date-Objekte.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
// const bad: Json = undefined; // Error
// const fn: Json = () => 1; // Error
const good: Json = { ok: true };
console.log(good);JSON-Strukturen zur Laufzeit validieren
Der Typ beschreibt gültiges JSON, aber nicht vertrauenswürdige Eingaben müssen Sie weiterhin zur Laufzeit validieren. Ein rekursiver Type Guard prüft jede Ebene.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function isJson(v: unknown): v is Json {
if (v === null) return true;
const t = typeof v;
if (t === "string" || t === "number" || t === "boolean") return true;
if (Array.isArray(v)) return v.every(isJson);
if (t === "object") return Object.values(v as object).every(isJson);
return false;
}
console.log(isJson({ a: [1, 2], b: "x" }));In einen Json-Typ parsen
JSON.parse gibt any zurück. Wandeln Sie das Ergebnis daher erst nach der Validierung in Json um oder typisieren Sie die Variable und validieren Sie sie.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const raw = "{ \"id\": 1, \"tags\": [\"a\"] }";
const parsed = JSON.parse(raw) as Json;
console.log(parsed);Einen Json-Wert durchlaufen
Ein rekursiver Walker kann jeden JSON-Wert durchlaufen und primitive Werte, Arrays und Objekte anhand ihrer Laufzeitstruktur verarbeiten.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function countLeaves(v: Json): number {
if (Array.isArray(v)) return v.reduce((a, x) => a + countLeaves(x), 0);
if (v !== null && typeof v === "object") return Object.values(v).reduce((a, x) => a + countLeaves(x), 0);
return 1;
}
console.log(countLeaves({ a: [1, 2], b: "x" }));Warum der Json-Typ nützlich ist
Ein präziser Typ Json dokumentiert genau, welche Werte die Grenze Ihrer API passieren dürfen, und erkennt Versuche, Nicht-JSON-Werte bereits zur Kompilierzeit zu serialisieren.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
function send(payload: Json): string {
return JSON.stringify(payload);
}
console.log(send({ ok: true, items: [1, 2, 3] }));Schnelltest: JSON-Werttypen
Testen Sie Ihr Verständnis der JSON-Werttypen.
Zusammenfassung: JSON-Werttypen
Sie haben einen rekursiven Typ Json definiert, der primitive Werte, Arrays und Objekte umfasst, gelernt, was er ausschließt, und nicht vertrauenswürdige Eingaben mit einem rekursiven Type Guard validiert.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const data: Json = { id: 1, tags: ["a", "b"] };
console.log(JSON.stringify(data));Häufig gestellte Fragen
Ist die Lektion „JSON-Werttypen“ kostenlos?
Ja — der vollständige Text von „JSON-Werttypen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „JSON-Werttypen“?
Definieren Sie einen vollständigen, typsicheren JSON-Werttyp. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um TypeScript Academy zu starten?
Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „JSON-Werttypen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.