TypeScript Academy · Lektion

Härlett tillstånd och selectors med typer

Skriv typade selector-funktioner för beräknat tillstånd

Lektion 4 av 413 steg

Härlett tillstånd och selectors med typer är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad är derived state?

Derived state är state som beräknas från annan state — till exempel genom att filtrera en lista eller summera värden. Selektorer kapslar in denna beräkning och kan memoiseras för bättre prestanda.

// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);

Typade selektorfunktioner

Skriv selektorfunktioner med explicita returtyper för att dokumentera vad de beräknar och förhindra att typerna gradvis avviker.

import type { RootState } from "./store";

const selectActiveUsers = (state: RootState): User[] =>
  state.users.filter((u) => u.isActive);

const selectUserCount = (state: RootState): number =>
  state.users.length;

reselect: memoiserade selektorer

Biblioteket reselect (som används av RTK) skapar memoiserade selektorer som bara beräknas om när deras indata ändras.

import { createSelector } from "reselect";

const selectActiveUsers = createSelector(
  (state: RootState) => state.users,
  (users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]

Typade parametriserade selektorer

Fabriksselektorer tar emot argument och returnerar en selektor — användbart för uppslag av enskilda entiteter.

const selectUserById = (id: string) =>
  createSelector(
    (state: RootState) => state.users,
    (users) => users.find((u) => u.id === id) ?? null
  );

// Usage: const user = useAppSelector(selectUserById("123"));

Zustand-selektorer

I Zustand skickar du en typad selektor till store-hooken för att bara läsa den del som behövs.

const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]

Derived state i React med useMemo

För lokal derived state använder du useMemo med korrekta typannoteringar för att memoiserar beräknade värden i komponenter.

const sortedUsers = useMemo(
  (): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
  [users]
);

Sammansättning av selektorer

Bygg komplexa selektorer genom att sätta samman enklare selektorer — reselect hanterar memoisering genom hela kedjan.

const selectActiveUserNames = createSelector(
  selectActiveUsers,
  (users) => users.map((u) => u.name)
); // string[]

Typsäker Zustand med immer för derived-uppdateringar

När du beräknar derived-uppdateringar använder du immer för att ändra ett draft-state — TypeScript säkerställer att bara giltiga egenskaper ändras.

const useStore = create<AppStore>()(immer((set) => ({
  users: [],
  activeCount: 0,
  setUsers: (users) =>
    set((draft) => {
      draft.users = users;
      draft.activeCount = users.filter((u) => u.isActive).length;
    }),
})));

Inferens av selektorers returtyper

TypeScript härleder returtyper från selektorer, men explicita annoteringar förbättrar läsbarheten och förhindrar att dynamiska uttryck oavsiktligt blir any.

// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
  (s: RootState) => s.cart.items,
  (items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);

Testa selektorer

Selektorer är rena funktioner — testa dem genom att skicka in mock-state och kontrollera resultatets typ och värde.

test("selectActiveUsers", () => {
  const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
  expect(selectActiveUsers(state)).toHaveLength(1);
});

Sammanfattning: typade selektorer

Typade selektorer: skriv funktioner som tar emot RootState med explicita returtyper, använd createSelector för memoisering, sätt samman selektorer för komplexa härledningar och testa dem som rena funktioner.

Snabb kontroll

Vilken fördel ger createSelector jämfört med en vanlig selektorfunktion?

Besvara frågan i den interaktiva lektionen

Det här har du lärt dig

Typade selektorer tar emot RootState och returnerar exakt typade härledda värden. Använd createSelector för memoisering, sätt samman selektorer för komplex logik och skriv fabriksselektorer för parametriserade uppslag av entiteter.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Härlett tillstånd och selectors med typer” gratis?

Ja – hela texten till ”Härlett tillstånd och selectors med typer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Härlett tillstånd och selectors med typer”?

Skriv typade selector-funktioner för beräknat tillstånd Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Härlett tillstånd och selectors med typer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Typning av Redux Toolkit-slices och thunks
Mönster för typning av Zustand stores
XState: typade tillståndsmaskiner
Härlett tillstånd och selectors med typer

← Tillbaka till TypeScript Academy