Typesikre API'er fra frontend til backend med tRPC · Lektion

Introduktion til Zod-schemas

Undersøg Zod, et TypeScript-orienteret bibliotek til schema-definition og -validering, samt dets grundlæggende typer.

Lektion 1 af 411 trin

Introduktion til Zod-schemas er en gratis Typesikre API'er fra frontend til backend med tRPC-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Typesikre API'er fra frontend til backend med tRPC, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.

Hvad er Zod?

Velkommen til Zod! Det er et effektivt valideringsbibliotek, der er udviklet med TypeScript som udgangspunkt. Tænk på det som en vogter for dine data.

Zod hjælper med at sikre, at de data, der kommer ind i din applikation (fra API'er, formularer osv.), passer til de typer, du forventer, også under kørsel.

Hvorfor bruge Zod? Typesikkerhed!

TypeScript giver typesikkerhed under udviklingen, men hvad med data, der modtages fra en server eller fra brugerinput? Disse data har ikke TypeScript-typer.

Zod bygger bro over dette hul! Det lader dig definere et skema, validere data under kørsel i forhold til skemaet og automatisk udlede en TypeScript-type fra skemaet. Det giver dig typesikkerhed fra ende til anden.

Zods grundlæggende byggesten

Zod-skemaer oprettes ved hjælp af objektet z. Lad os se på de mest grundlæggende typer: tekststrenge, tal og booleske værdier.

z.string(): Til tekstværdier.
z.number(): Til numeriske værdier.
z.boolean(): Til sande/falske-værdier.

Dette er dine udgangspunkter, når du skal definere datastrukturer.

Erklæring af et tekstskema

Et tekstskema er enkelt at erklære. Derefter bruger du metoden .parse() til at validere data i forhold til skemaet. Hvis dataene ikke passer, kaster Zod en fejl.

Prøv at køre dette eksempel for at se en gyldig tekststreng blive fortolket:

import { z } from 'zod';

function runExample() {
  const usernameSchema = z.string();

  const validUsername = "CoddyUser";
  const parsedUsername = usernameSchema.parse(validUsername);
  console.log(`Parsed: ${parsedUsername}`);
}

runExample();

Håndtering af valideringsfejl for tekststrenge

Hvad sker der, hvis du forsøger at fortolke data, der ikke er en tekststreng? Zod kaster en ZodError. Det er god praksis at omslutte kald til .parse() i en blok med try...catch.

Kør denne kode for at se Zod fange en ugyldig type:

import { z } from 'zod';

function runExample() {
  const usernameSchema = z.string();

  try {
    const invalidUsername = 123; // Not a string!
    usernameSchema.parse(invalidUsername);
  } catch (error: any) {
    console.log(`Error: ${error.message.split('\n')[0]}`);
  }
}

runExample();

Skemaer for tal og booleske værdier

Skemaer for tal og booleske værdier fungerer på samme måde. De sikrer, at dataene har den korrekte primitive type. Det forhindrer uventede fejl senere i din applikation.

Lad os se, hvordan du definerer og bruger dem:

import { z } from 'zod';

function runExample() {
  const ageSchema = z.number();
  const isActiveSchema = z.boolean();

  const validAge = ageSchema.parse(30);
  console.log(`Age: ${validAge}`);

  const validStatus = isActiveSchema.parse(true);
  console.log(`Active: ${validStatus}`);

  try {
    ageSchema.parse("twenty"); // Invalid!
  } catch (error: any) {
    console.log(`Error (Age): ${error.message.split('\n')[0]}`);
  }
}

runExample();

Gør felter valgfrie

Nogle gange er et stykke data måske ikke altid til stede. Zod har metoden .optional() til dette. Den får et skema til at acceptere undefined ud over dets grundtype.

Bemærk, at .optional() tillader undefined, men som standard ikke null.

import { z } from 'zod';

function runExample() {
  const taglineSchema = z.string().optional();

  const withTagline = taglineSchema.parse("Hello World!");
  console.log(`With tagline: ${withTagline}`);

  const withoutTagline = taglineSchema.parse(undefined);
  console.log(`Without tagline: ${withoutTagline}`);

  try {
    taglineSchema.parse(null); // Optional doesn't allow null!
  } catch (error: any) {
    console.log(`Error (null): ${error.message.split('\n')[0]}`);
  }
}

runExample();

Præcise værdier med literaler

Hvad nu, hvis et felt skal have en meget specifik, fast værdi? Zods metode .literal() er perfekt til dette. Den sikrer, at den fortolkede værdi er nøjagtig den, du definerer.

Det er nyttigt til enum-lignende felter, hvor værdierne er kendt på forhånd.

import { z } from 'zod';

function runExample() {
  const statusSchema = z.literal("pending");

  const validStatus = statusSchema.parse("pending");
  console.log(`Valid status: ${validStatus}`);

  try {
    statusSchema.parse("completed"); // Not 'pending'!
  } catch (error: any) {
    console.log(`Error (status): ${error.message.split('\n')[0]}`);
  }
}

runExample();

Byggesten til komplekse data

Du har nu set de grundlæggende typer og modifikatorer i Zod. Selvom de er enkle hver for sig, er de de grundlæggende byggesten.

I de kommende lektioner lærer du, hvordan du kombinerer disse grundlæggende skemaer for at definere langt mere komplekse datastrukturer som objekter og arrays, så du sikrer robust validering i hele din applikation.

Tjek din grundlæggende viden om Zod

Hvilket Zod-skema validerer korrekt en variabel, der skal være strengen "admin" eller valgfrit kan være et tal?

Besvar den i den interaktive lektion

Opsummering af det grundlæggende i Zod

Godt gået! Du har taget dine første skridt med Zod og forstået dets vigtigste formål og grundlæggende typer.

Zod leverer validering ved kørsel af TypeScript-data.
z.string(), z.number() og z.boolean() definerer grundlæggende typer.
.parse() validerer data og udleder typer.
Brug try...catch til fejlhåndtering.
.optional() tillader værdier af typen undefined.
z.literal() håndhæver nøjagtige, faste værdier.

Disse færdigheder er grundlaget for at bygge robuste, typesikre applikationer!

Gratis at komme i gang

Lær Typesikre API'er fra frontend til backend med tRPC 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: 10
Lektioner: 40

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Introduktion til Zod-schemas” gratis?

Ja — alle 3 lektioner i læringssporet Typesikre API'er fra frontend til backend med tRPC, inklusive “Introduktion til Zod-schemas”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Typesikre API'er fra frontend til backend med tRPC-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Introduktion til Zod-schemas”?

Undersøg Zod, et TypeScript-orienteret bibliotek til schema-definition og -validering, samt dets grundlæggende typer. Du øver dig i Typesikre API'er fra frontend til backend med tRPC 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å Typesikre API'er fra frontend til backend med tRPC?

Der kræves ingen tidligere erfaring. Typesikre API'er fra frontend til backend med tRPC 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 1 af 4.

Hvor lang tid tager lektionen “Introduktion til Zod-schemas”?

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 Typesikre API'er fra frontend til backend med tRPC-lektion?

Ja. Alle Typesikre API'er fra frontend til backend med tRPC-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.

Alle lektioner i dette kursus

← Tilbage til Typesikre API'er fra frontend til backend med tRPC