TypeScript Academy · leksjon

Typesikkerhet fra ende til ende: skjemabasert arbeidsflyt

Bevar én felles sannhetskilde fra skjema til klient.

Leksjon 4 av 413 trinn

Typesikkerhet fra ende til ende: skjemabasert arbeidsflyt 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.

Hva er schema-first?

Schema-first betyr at GraphQL-skjemaet er den eneste kilden til sannhet. Frontend-typer, backend-resolvere og API-kontrakter utledes alle fra det, slik at ingen lag kommer ut av synkronisering.

# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in sync

Definere skjemaet

Skriv GraphQL-skjemaet i SDL (.graphql-filer), og commit det til repoet som kontrakten mellom klient og server.

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

Server: Generere resolver-typer

Kjør codegen med typescript-resolvers-pluginen for å generere typede resolver-signaturer fra skjemaet.

# Server codegen step
npx graphql-codegen --config codegen.server.yml

Klient: Generere operasjonstyper

Kjør codegen med typescript-operations og Apollo-/urql-pluginer for å generere typede hooks fra .graphql-operasjonsfiler.

# Client codegen step
npx graphql-codegen --config codegen.client.yml

Oppdage brudd på bakoverkompatibilitet

Bruk graphql-inspector til å oppdage skjemendringer som bryter bakoverkompatibiliteten, for eksempel fjerning av felt eller endring av typer, før de når produksjon.

npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removed

Skjemaregister

Et skjemaregister (Apollo Studio, Hive) lagrer skjemaversjoner, følger endringer over tid og varsler om endringer som bryter bakoverkompatibiliteten i CI.

# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphql

Mocking med skjemaet

Bruk skjemaet til å generere mockdata for klientutvikling uten en ekte server, slik at mockene samsvarer med skjemaet.

import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });

tRPC som alternativ

For prosjekter som bare bruker TypeScript, gir tRPC typesikkerhet fra ende til ende uten et skjemaspråk – serverens router-type ER klientkontrakten.

// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();

Zod + tRPC for validering

Kombiner Zod-skjemaer med tRPC-inputvalidatorer for validering under kjøring og typer ved kompilering fra én enkelt definisjon.

const createUser = t.procedure
  .input(z.object({ name: z.string(), email: z.string().email() }))
  .mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schema

CI: Fullstendig schema-first-sikkerhetspipeline

En komplett CI-pipeline for schema-first-sikkerhet: lint skjemaet → kontroller endringer som bryter bakoverkompatibiliteten → kjør codegen → kontroller typene → kjør testene.

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

Oppsummering: Schema-first-arbeidsflyt

Schema-first TypeScript: definer SDL → generer resolver-typer for serveren → generer operasjonstyper for klienten → oppdag endringer som bryter bakoverkompatibiliteten i CI. Skjemaet er den eneste kilden til sannhet for alle lag med typesikkerhet.

Hurtigsjekk

Hvilken rolle har GraphQL-skjemaet i en schema-first-arbeidsflyt?

Besvar den i den interaktive leksjonen

Dette har du lært

Schema-first-arbeidsflyter i TypeScript utleder alle typer fra GraphQL-skjemaet. Generer resolver-typer for serveren og operasjonstyper for klienten, oppdag endringer som bryter bakoverkompatibiliteten i CI, og vedlikehold skjemaet som kontrakten mellom alle lag.

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 «Typesikkerhet fra ende til ende: skjemabasert arbeidsflyt» gratis?

Ja – hele teksten i «Typesikkerhet fra ende til ende: skjemabasert arbeidsflyt» 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 «Typesikkerhet fra ende til ende: skjemabasert arbeidsflyt»?

Bevar én felles sannhetskilde fra skjema til klient. 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 «Typesikkerhet fra ende til ende: skjemabasert arbeidsflyt»?

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

Fra GraphQL-skjema til TypeScript-typer
Typede resolvere med GraphQL Code Generator
Typet GraphQL-klient med Apollo og urql
Typesikkerhet fra ende til ende: skjemabasert arbeidsflyt

← Tilbake til TypeScript Academy