TypeScript Academy · leksjon

Kombinere og raffinere skjemaer

Bygg komplekse skjemaer med refine, transform og unioner.

Leksjon 4 av 413 trinn

Kombinere og raffinere skjemaer er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Skjemaer kan settes sammen

Zod-skjemaer er byggeklosser som kan settes sammen. De kan finjustere, transformere, utvide og kombinere dem for å modellere komplekse valideringsregler.

import { z } from "zod";
const base = z.object({ name: z.string() });
// We will add rules and combine schemas from here.

Egendefinerte regler med refine

.refine legger til et egendefinert valideringspredikat med en feilmelding, for regler Zod ikke har innebygd støtte for.

import { z } from "zod";
const password = z.string().refine(
  (s) => s.length >= 8,
  { message: "Must be at least 8 characters" }
);
// password.parse("short") throws with that message.

Finjustere på tvers av felt

Bruk .refine på et objekt for å validere forhold mellom felt, for eksempel at passordbekreftelsen samsvarer med passordet.

import { z } from "zod";
const form = z.object({
  password: z.string(),
  confirm: z.string()
}).refine((d) => d.password === d.confirm, {
  message: "Passwords must match"
});
// Validates both fields together.

Transformere verdier

.transform konverterer en validert verdi til en annen form etter at valideringen er fullført.

import { z } from "zod";
const trimmed = z.string().transform((s) => s.trim());
const result = trimmed.parse("  hi  "); // "hi"

Valgfrie felt

.optional() gjør at et felt kan mangle, noe som gjenspeiles både i valideringen og i den utledede typen.

import { z } from "zod";
const schema = z.object({
  name: z.string(),
  bio: z.string().optional()
});
// bio may be omitted.

Standardverdier

.default angir en verdi når inndata mangler, slik at det analyserte resultatet alltid har feltet fylt ut.

import { z } from "zod";
const schema = z.object({
  retries: z.number().default(3)
});
const r = schema.parse({}); // { retries: 3 }

Unionskjemaer

z.union godtar en verdi som samsvarer med ett av flere skjemaer, og er Zods motstykke til en TypeScript-union.

import { z } from "zod";
const id = z.union([z.string(), z.number()]);
// id.parse("abc") and id.parse(123) both succeed.

Diskriminerte unioner i Zod

z.discriminatedUnion validerer merkede unioner effektivt ved å velge basert på et diskriminatorfelt.

import { z } from "zod";
const shape = z.discriminatedUnion("kind", [
  z.object({ kind: z.literal("circle"), radius: z.number() }),
  z.object({ kind: z.literal("square"), side: z.number() })
]);
// Picks the right member by kind.

Slå sammen med extend

.extend legger til felt i et eksisterende objektskjema, slik at De kan bygge større skjemaer fra mindre.

import { z } from "zod";
const base = z.object({ id: z.number() });
const user = base.extend({ name: z.string() });
// user validates { id: number; name: string }

Kombinere objektskjemaer

De kan også slå sammen to objektskjemaer med .merge, slik at alle feltene kombineres i ett skjema.

import { z } from "zod";
const a = z.object({ x: z.number() });
const b = z.object({ y: z.string() });
const combined = a.merge(b);
// combined validates { x: number; y: string }

Kjede alt sammen

Finjusteringer, transformasjoner, standardverdier og utvidelser kan kjedes på en flytende måte for å uttrykke omfattende validering i ett lesbart skjema.

import { z } from "zod";
const signup = z.object({
  email: z.string().refine(s => s.includes("@"), { message: "Invalid email" }),
  age: z.number().default(18)
}).extend({
  newsletter: z.boolean().optional()
});
// One schema, many rules.

Kort kontroll: Sette sammen skjemaer

Test forståelsen Deres av å sette sammen og finjustere skjemaer.

Besvar den i den interaktive leksjonen

Oppsummering: Sette sammen og finjustere skjemaer

De har lært å legge til egendefinerte regler med .refine, endre formen på verdier med .transform, håndtere manglende data med .optional og .default, kombinere alternativer med z.union og utvide skjemaer med .extend og .merge.

import { z } from "zod";
const schema = z.object({ name: z.string() })
  .extend({ age: z.number().default(0) })
  .refine(d => d.name.length > 0, { message: "Name required" });
// Composed validation in one place.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Kombinere og raffinere skjemaer» gratis?

Ja – hele teksten i «Kombinere og raffinere skjemaer» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Kombinere og raffinere skjemaer»?

Bygg komplekse skjemaer med refine, transform og unioner. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Kombinere og raffinere skjemaer»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til TypeScript Academy