TypeScript Academy · leksjon

Angi typer for React-komponentegenskaper

Definer prop-grensesnitt og bruk FC eller eksplisitte returtyper.

Leksjon 1 av 413 trinn

Angi typer for React-komponentegenskaper er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 1 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.

Velkommen

Denne leksjonen handler om typing av props for React-komponenter i TypeScript med React.

Grensesnitt for komponentprops

Definer et props-grensesnitt for React-komponenter for å dokumentere og håndheve 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 kontra eksplisitt returtype

React.FC legger automatisk til children og andre typer. En eksplisitt returtype (JSX.Element | null) er ofte tydeligere.

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

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

Typing av useState

useState utleder typen fra startverdien. Oppgi en typeparameter når startverdien er null eller tvetydig.

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

Typing av useReducer

useReducer fungerer best med en diskriminert unionstype for handlinger.

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;
  }
}

Typing av useRef for DOM

useRef for DOM-elementer trenger et typeargument. Initialiser med null siden elementet ikke finnes ennå.

const inputRef = useRef<HTMLInputElement>(null);

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

Typing av hendelseshåndterere

React-hendelsestyper inkluderer React.ChangeEvent, React.MouseEvent og React.FormEvent.

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

Generiske komponenter

Generiske komponenter tar imot en typeparameter for fleksible og typesikre lister og utvalgsfelt.

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 trenger typeparametere for både referansens elementtype og props.

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

Returtyper for egendefinerte hooks

Angi returverdiene fra egendefinerte hooks eksplisitt for å unngå at tupler utleder typen any[].

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

Context med TypeScript

Typ ...

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;
}

Hurtigsjekk

Hva er riktig type for en ref til et HTML-inputelement?

Besvar den i den interaktive leksjonen

Oppsummering

Typ React-props med grensesnitt, useState med typeparametere, hendelser med React-hendelsestyper, refs med generiske DOM-elementtyper og forwardRef med to typeparametere. Generiske komponenter muliggjør et typesikkert og gjenbrukbart brukergrensesnitt.

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 «Angi typer for React-komponentegenskaper» gratis?

Ja – hele teksten i «Angi typer for React-komponentegenskaper» 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 «Angi typer for React-komponentegenskaper»?

Definer prop-grensesnitt og bruk FC eller eksplisitte returtyper. 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 1 av 4.

Hvor lang tid tar leksjonen «Angi typer for React-komponentegenskaper»?

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

Angi typer for React-komponentegenskaper
Angi typer for useState og useReducer
Angi typer for useRef og hendelsesbehandlere
Generiske komponenter og forwardRef

← Tilbake til TypeScript Academy