JSON-værdityper
Definér en komplet, typesikker JSON-værdi-type
JSON-værdityper er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.
Hvad er en JSON-værdi?
JSON tillader et fast sæt værdiformer: strenge, tal, booleske værdier, null, arrays og objekter. En rekursiv type kan beskrive netop dette sæt.
type Json =
| string
| number
| boolean
| null
| Json[]
| { [k: string]: Json };
// arrays and objects nest Json again.Den rekursive JSON-type
Den centrale pointe er, at arrays indeholder Json, og at objektværdier er Json, så typen refererer til sig selv for indlejrede data.
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-værdier
De enkleste JSON-værdier er primitive værdier. Hver af dem kan tildeles direkte til 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-arrays
Et JSON-array er Json[], så det kan indeholde en blanding af alle JSON-værdier, herunder indlejrede arrays og objekter.
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-objekter
Et JSON-objekt knytter strengnøgler til Json-værdier via en indekssignatur, så vilkårlig indlejring er mulig.
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);Dybt indlejret JSON
Fordi typen er rekursiv, er dybt indlejrede strukturer fuldt typede uden ekstra deklarationer.
type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
a: { b: { c: [1, { d: true }] } }
};
console.log(deep);Hvad JSON udelukker
Typen Json afviser korrekt værdier, som JSON ikke kan repræsentere, f.eks. undefined, funktioner eller Date-objekter.
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);Validering af JSON-former ved kørsel
Typen beskriver gyldig JSON, men du skal stadig validere input, du ikke stoler på, ved kørsel. En rekursiv typevagt kontrollerer hvert niveau.
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" }));Parsing til en Json-type
JSON.parse returnerer any, så du bør først caste det parsede resultat til Json efter validering eller typdeklarere variablen og validere 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);Gennemgang af en Json-værdi
En rekursiv gennemløber kan gennemgå enhver JSON-værdi og håndtere primitive værdier, arrays og objekter ved at kontrollere formen ved kørsel.
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" }));Hvorfor Json-typen er nyttig
En præcis Json-type dokumenterer nøjagtigt, hvad der kan passere din API-grænse, og opdager forsøg på at serialisere værdier, der ikke er JSON, ved kompilering.
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] }));Hurtigt tjek: JSON-værdityper
Test din forståelse af JSON-værdityper.
Opsummering: JSON-værdityper
Du definerede en rekursiv Json-type, der dækker primitive værdier, arrays og objekter, lærte, hvad den udelukker, og validerede input, du ikke stoler på, med en rekursiv typevagt.
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 TypeScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 101
- Lektioner
- 352
Ofte stillede spørgsmål
Er lektionen “JSON-værdityper” gratis?
Ja — hele teksten til “JSON-værdityper” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “JSON-værdityper”?
Definér en komplet, typesikker JSON-værdi-type Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på TypeScript Academy?
Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “JSON-værdityper”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?
Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.