JSON-värdetyper
Definiera en komplett, typsäker JSON-värdetyp.
JSON-värdetyper är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 3 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Vad är ett JSON-värde?
JSON tillåter en fast uppsättning värdeformer: strängar, tal, booleska värden, null, arrayer och objekt. En rekursiv typ kan beskriva exakt denna uppsättning.
type Json =
| string
| number
| boolean
| null
| Json[]
| { [k: string]: Json };
// arrays and objects nest Json again.Den rekursiva JSON-typen
Den viktiga insikten är att arrayer innehåller Json och att objektvärden är Json. Därför refererar typen till sig själv för nästlade data.
type Json =
| string | number | boolean | null
| Json[]
| { [k: string]: Json };
const x: Json = { name: "Ada", tags: ["a", "b"], active: true };
console.log(x);Primitiva JSON-värden
De enklaste JSON-värdena är primitiva värden. Var och en kan direkt tilldelas till Json.
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-arrayer
En JSON-array är Json[], så den kan innehålla en blandning av alla JSON-värden, inklusive nästlade arrayer och objekt.
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-objekt
Ett JSON-objekt kopplar strängnycklar till Json-värden via en indexsignatur, vilket tillåter godtycklig nästning.
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);Djupt nästlad JSON
Eftersom typen är rekursiv blir djupt nästlade strukturer fullständigt typade utan några extra deklarationer.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
a: { b: { c: [1, { d: true }] } }
};
console.log(deep);Vad JSON utesluter
Typen Json avvisar korrekt värden som JSON inte kan representera, till exempel undefined, funktioner och Date-objekt.
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);Validera JSON-strukturer vid körning
Typen beskriver giltig JSON, men du måste fortfarande validera opålitlig indata vid körning. En rekursiv typvakt kontrollerar varje nivå.
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" }));Parsa till en Json-typ
JSON.parse returnerar any, så casta det parsade resultatet till Json först efter validering, eller ange variabelns typ och validera den.
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);Traversera ett Json-värde
En rekursiv traverserare kan gå igenom alla JSON-värden och hantera primitiva värden, arrayer och objekt genom att kontrollera formen vid körning.
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" }));Varför Json-typen är användbar
En exakt Json-typ dokumenterar precis vad som får passera din API-gräns och upptäcker försök att serialisera värden som inte är JSON redan vid kompileringen.
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] }));Snabbtest: JSON-värdetyper
Kontrollera din förståelse av JSON-värdetyper.
Sammanfattning: JSON-värdetyper
Du definierade en rekursiv Json-typ som täcker primitiva värden, arrayer och objekt, lärde dig vad den utesluter och validerade opålitlig indata med en rekursiv typvakt.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const data: Json = { id: 1, tags: ["a", "b"] };
console.log(JSON.stringify(data));
Lär dig TypeScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 101
- Lektioner
- 352
Vanliga frågor
Är lektionen ”JSON-värdetyper” gratis?
Ja – hela texten till ”JSON-värdetyper” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”JSON-värdetyper”?
Definiera en komplett, typsäker JSON-värdetyp. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?
Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 3 av 4.
Hur lång tid tar lektionen ”JSON-värdetyper”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?
Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Rekursiva typedefinitioner
- Typbestämning av trädstrukturer
- JSON-värdetyper
- Rekursionsdjup och begränsningar