TypeScript Academy · Lekcja

Typy wartości JSON

Zdefiniuj kompletny, bezpieczny typowo typ wartości JSON

Typy wartości JSON to bezpłatna lekcja TypeScript Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej TypeScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Czym jest wartość JSON

JSON dopuszcza stały zestaw kształtów wartości: ciągi znaków, liczby, wartości logiczne, null, tablice i obiekty. Typ rekurencyjny może dokładnie opisać ten zestaw.

type Json =
  | string
  | number
  | boolean
  | null
  | Json[]
  | { [k: string]: Json };
// arrays and objects nest Json again.

Rekurencyjny typ JSON

Kluczowa obserwacja jest taka: tablice zawierają Json, a wartości obiektów są typu Json, więc typ odwołuje się do samego siebie w przypadku zagnieżdżonych danych.

type Json =
  | string | number | boolean | null
  | Json[]
  | { [k: string]: Json };
const x: Json = { name: "Ada", tags: ["a", "b"], active: true };
console.log(x);

Pierwotne wartości JSON

Najprostsze wartości JSON to wartości prymitywne. Każdą z nich można bezpośrednio przypisać do typu 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);

Tablice JSON

Tablica JSON ma typ Json[], więc może zawierać dowolną mieszankę wartości JSON, w tym zagnieżdżone tablice i obiekty.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const arr: Json = [1, "two", true, null, [3, 4]];
console.log(Array.isArray(arr));

Obiekty JSON

Obiekt JSON odwzorowuje klucze typu string na wartości Json za pomocą sygnatury indeksu, co pozwala na dowolne zagnieżdżanie.

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);

Głęboko zagnieżdżony JSON

Ponieważ typ jest rekurencyjny, głęboko zagnieżdżone struktury są w pełni typowane bez dodatkowych deklaracji.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const deep: Json = {
  a: { b: { c: [1, { d: true }] } }
};
console.log(deep);

Czego JSON nie obejmuje

Typ Json prawidłowo odrzuca wartości, których JSON nie może reprezentować, takie jak undefined, funkcje czy obiekty Date.

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);

Weryfikowanie struktur JSON w czasie działania

Typ opisuje poprawny JSON, ale niezaufane dane wejściowe nadal należy weryfikować w czasie działania. Rekurencyjny type guard sprawdza każdy poziom.

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" }));

Parsowanie do typu Json

JSON.parse zwraca wartość typu any, dlatego wynik parsowania należy rzutować na Json dopiero po weryfikacji albo nadać zmiennej typ i przeprowadzić weryfikację.

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);

Przechodzenie po wartości Json

Rekurencyjny walker może przejść przez dowolną wartość JSON, obsługując wartości prymitywne, tablice i obiekty na podstawie sprawdzenia ich kształtu w czasie działania.

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" }));

Dlaczego typ Json jest przydatny

Precyzyjny typ Json dokładnie dokumentuje, co może przekroczyć granicę API, i wykrywa próby serializacji wartości niebędących JSON-em już na etapie kompilacji.

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] }));

Szybkie sprawdzenie: typy wartości JSON

Proszę sprawdzić swoją wiedzę na temat typów wartości JSON.

Podsumowanie: typy wartości JSON

Zdefiniowali Państwo rekurencyjny typ Json obejmujący wartości prymitywne, tablice i obiekty, poznali wartości, których nie obejmuje, oraz zweryfikowali niezaufane dane wejściowe za pomocą rekurencyjnego type guarda.

type Json = string | number | boolean | null | Json[] | { [k: string]: Json };
const data: Json = { id: 1, tags: ["a", "b"] };
console.log(JSON.stringify(data));

Często zadawane pytania

Czy lekcja „Typy wartości JSON” jest bezpłatna?

Tak — pełny tekst „Typy wartości JSON” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu TypeScript Academy, przejdź na CoddyKit PRO. Kurs TypeScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Typy wartości JSON”?

Zdefiniuj kompletny, bezpieczny typowo typ wartości JSON Ćwiczysz TypeScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć TypeScript Academy?

Nie wymagamy żadnego doświadczenia. TypeScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Typy wartości JSON”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji TypeScript Academy?

Tak. Każda lekcja TypeScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do TypeScript Academy