PricingLoginStart free
React Academy · Lektion

Betingede og mappede typer i React

Byg komponentproptyper, der ændrer form ud fra andre propværdier, ved hjælp af betingede typer.

Lektion 2 af 413 trin

Betingede og mappede typer i React er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 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 React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.

Grundlæggende betingede typer

En betinget type bruger syntaksen T extends U ? X : Y — hvis T kan tildeles til U, bliver typen til X; ellers bliver den til Y.

type IsString<T> = T extends string ? true : false;

type A = IsString<string>;  // true
type B = IsString<number>;  // false
type C = IsString<'hello'>; // true

Betingede props baseret på andre props

Brug betingede typer til at gøre en prop påkrævet eller valgfri baseret på værdien af en anden prop.

type InputProps<T extends 'text' | 'number'> = {
  type: T;
} & (T extends 'number' ? { min?: number; max?: number } : { maxLength?: number });

const numInput: InputProps<'number'> = { type: 'number', min: 0, max: 100 };
const txtInput: InputProps<'text'> = { type: 'text', maxLength: 50 };

Afbildningstyper

Afbildningstyper opretter en ny type ved at transformere hver egenskab i en eksisterende type. Syntaksen in keyof gennemløber alle nøgler.

type Optional<T> = { [K in keyof T]?: T[K] };
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type Nullable<T> = { [K in keyof T]: T[K] | null };

Gør props valgfrie i opdateringsformularer

Brug Partial<T> (en indbygget afbildningstype) til props i opdateringsformularer, hvor ikke alle felter er påkrævede.

interface User { id: string; name: string; email: string; role: string; }

// Update form — all fields optional:
type UserUpdateProps = Partial<Omit<User, 'id'>>;

function UserUpdateForm(props: UserUpdateProps) {
  // name, email, role are all optional
}

Record med afbildningstyper

Opret opslagstyper, hvor nøglerne kommer fra en union, og værdierne har en ensartet form.

type Status = 'idle' | 'loading' | 'success' | 'error';

type StatusConfig = Record<Status, {
  label: string;
  icon: React.ReactNode;
  color: string;
}>;

const statusConfig: StatusConfig = {
  idle: { label: 'Ready', icon: <ReadyIcon />, color: 'gray' },
  loading: { label: 'Loading...', icon: <Spinner />, color: 'blue' },
  success: { label: 'Done', icon: <CheckIcon />, color: 'green' },
  error: { label: 'Error', icon: <XIcon />, color: 'red' },
};

Udvælgelse af påkrævede nøgler

Brug betingede typer sammen med -? (fjern valgfrihed) for kun at udtrække de påkrævede nøgler fra en type.

type RequiredKeys<T> = {
  [K in keyof T]-?: undefined extends T[K] ? never : K;
}[keyof T];

interface FormData { name: string; email: string; phone?: string; }
type Required = RequiredKeys<FormData>; // 'name' | 'email'

Skabelonliteral-typer

Skabelonliteral-typer sammensætter literal-typer for strenge og muliggør typesikre hændelsesnavne, CSS-klassestrenge og API-stier.

type EventName = 'click' | 'change' | 'focus';
type HandlerName = `on${Capitalize<EventName>}`;
// 'onClick' | 'onChange' | 'onFocus'

type ApiPath<R extends string> = `/api/${R}`;
type UserPath = ApiPath<'users'>; // '/api/users'

Betinget udtrækning af props

Brug Extract og Exclude til at filtrere unionstyper.

type AllProps = 'onClick' | 'onHover' | 'onChange' | 'style';
type EventHandlers = Extract<AllProps, `on${string}`>;
// 'onClick' | 'onHover' | 'onChange'

type NonEventProps = Exclude<AllProps, `on${string}`>;
// 'style'

Afbildningstyper til formularvalidering

Generér valideringsfejltyper, der afspejler formen på dine formulardata — én fejlmeddelelsesstreng pr. felt.

interface LoginForm { email: string; password: string; }

type FormErrors<T> = { [K in keyof T]?: string };
type LoginErrors = FormErrors<LoginForm>;
// { email?: string; password?: string }

const errors: LoginErrors = { email: 'Invalid email format' };

Diskriminerede afbildningstyper

Kombinér afbildningstyper med betingede typer for at oprette typer, der ændrer form baseret på en diskriminant.

type EventMap = {
  click: { x: number; y: number };
  keydown: { key: string; code: string };
  resize: { width: number; height: number };
};

type Handler<E extends keyof EventMap> = (event: EventMap[E]) => void;

function on<E extends keyof EventMap>(event: E, handler: Handler<E>) {
  window.addEventListener(event, handler as EventListener);
}

Hvornår bør du ikke overkonstruere typer?

Betingede typer og afbildningstyper giver større udtrykskraft, men også mere kompleksitet. Brug dem, når de eliminerer reel gentagelse eller forhindrer faktiske fejl — ikke blot for at demonstrere din TypeScript-viden.

Hurtigt tjek

Hvad gør afbildningstypen { [K in keyof T]?: T[K] }?

Besvar den i den interaktive lektion

Opsamling

Betingede typer (T extends U ? X : Y) opretter typer, der forgrener sig baseret på, om en type kan tildeles. Afbildningstyper ([K in keyof T]) transformerer hver egenskab i en type. Brug dem til delvise typer i opdateringsformularer, typesikre hændelseskort, formularfejlformer og API-stier med skabelonliteral-typer.

Gratis at komme i gang

Lær React 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
88
Lektioner
324
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Betingede og mappede typer i React” gratis?

Ja — hele teksten til “Betingede og mappede typer i React” 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 React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Betingede og mappede typer i React”?

Byg komponentproptyper, der ændrer form ud fra andre propværdier, ved hjælp af betingede typer. Du øver dig i React 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å React Academy?

Der kræves ingen tidligere erfaring. React 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 2 af 4.

Hvor lang tid tager lektionen “Betingede og mappede typer i React”?

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 React Academy-lektion?

Ja. Alle React 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.

Alle lektioner i dette kursus

  1. Diskriminerede unions til komponentvarianter
  2. Betingede og mappede typer i React
  3. Polymorfe komponenter med 'as'-prop
  4. Typesikre formularer og API-responskontrakter
← Tilbage til React Academy