TypeScript Academy · Lektion

Typannotera useState och useReducer

Lägg till typparametrar i Reacts state hooks

Lektion 2 av 413 steg

Typannotera useState och useReducer är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 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.

Välkommen

I den här lektionen går ni igenom hur useState och useReducer typbestäms i TypeScript med React.

Props-gränssnitt för komponenter

Definiera ett props-gränssnitt för React-komponenter för att dokumentera och säkerställa komponentens API.

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
}

function Button({ label, onClick, disabled }: ButtonProps) {
  return <button onClick={onClick} disabled={disabled}>{label}</button>;
}

FC jämfört med explicit returtyp

React.FC lägger automatiskt till children och andra typer. En explicit returtyp (JSX.Element | null) är ofta tydligare.

const Card: React.FC<{title: string}> = ({ title }) => <div>{title}</div>;

// Or explicit:
function Card2({ title }: { title: string }): JSX.Element {
  return <div>{title}</div>;
}

Typning av useState

useState härleder typen från startvärdet. Ange en typparameter när startvärdet är null eller tvetydigt.

const [count, setCount] = useState(0);           // number
const [name, setName] = useState('');            // string
const [user, setUser] = useState<User | null>(null); // explicit

Typning av useReducer

useReducer fungerar bäst med en diskriminerad uniontyp för actions.

type Action = { type: 'increment' } | { type: 'decrement' } | { type: 'reset'; value: number };
function reducer(state: number, action: Action): number {
  switch (action.type) {
    case 'increment': return state + 1;
    case 'decrement': return state - 1;
    case 'reset': return action.value;
  }
}

Typning av useRef för DOM

useRef för DOM-element behöver ett typargument. Initiera med null eftersom elementet ännu inte finns.

const inputRef = useRef<HTMLInputElement>(null);

// Use:
if (inputRef.current) {
  inputRef.current.focus();
}

Typning av händelsehanterare

React-händelsetyper omfattar React.ChangeEvent, React.MouseEvent och React.FormEvent.

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}
function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
  e.preventDefault();
}

Generiska komponenter

Generiska komponenter tar emot en typparameter för flexibla och typsäkra listor och select-komponenter.

function List<T extends { id: number }>({ items }: { items: T[] }) {
  return <ul>{items.map(i => <li key={i.id}>{JSON.stringify(i)}</li>)}</ul>;
}

forwardRef med TypeScript

forwardRef behöver typparametrar för både ref-elementtypen och props.

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ label, ...props }, ref) => (
    <label>{label}<input {...props} ref={ref} /></label>
  )
);

Returtyper för anpassade hooks

Ange returvärdena för anpassade hooks explicit för att undvika att tupler härleds som any[].

function useToggle(init: boolean): [boolean, () => void] {
  const [state, setState] = useState(init);
  return [state, () => setState(s => !s)];
}

Context med TypeScript

Typbestäm React-context med en union som inkluderar undefined för att tvinga konsumenter att kontrollera context.

const AuthContext = React.createContext<User | undefined>(undefined);
function useAuth(): User {
  const ctx = useContext(AuthContext);
  if (!ctx) throw new Error('useAuth must be used within AuthProvider');
  return ctx;
}

Snabbkontroll

Vilken typ är korrekt för en ref till ett HTML-input-element?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Typbestäm React-props med gränssnitt, useState med typparametrar, händelser med React-händelsetyper, refs med generiska DOM-elementtyper och forwardRef med dubbla typparametrar. Generiska komponenter möjliggör typsäker återanvändbar UI.

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 ”Typannotera useState och useReducer” gratis?

Ja – hela texten till ”Typannotera useState och useReducer” 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 ”Typannotera useState och useReducer”?

Lägg till typparametrar i Reacts state hooks 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 2 av 4.

Hur lång tid tar lektionen ”Typannotera useState och useReducer”?

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

Typannotera React-komponenters props
Typannotera useState och useReducer
Typannotera useRef och händelsehanterare
Generiska komponenter och forwardRef

← Tillbaka till TypeScript Academy