TypeScript Academy · Les

Generieke componenten en forwardRef

Bouw herbruikbare, getypeerde componenten met generics.

Les 4 van 413 stappen

Generieke componenten en forwardRef is een gratis TypeScript Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

Welkom

Deze les behandelt generieke componenten en forwardRef in TypeScript met React.

Interface voor componentprops

Definieer een interface voor props van React-componenten om de API van de component te documenteren en af te dwingen.

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

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

FC versus expliciet retourtype

React.FC voegt children en andere typen automatisch toe. Een expliciet retourtype (JSX.Element | null) is vaak duidelijker.

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

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

useState typen

useState leidt het type af uit de beginwaarde. Geef een typeparameter op wanneer de beginwaarde null of niet eenduidig is.

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

useReducer typen

useReducer werkt het best met een actietype als discriminerende unie.

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

useRef typen voor DOM

useRef voor DOM-elementen heeft een typeargument nodig. Initialiseer het met null, omdat het element nog niet bestaat.

const inputRef = useRef<HTMLInputElement>(null);

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

Gebeurtenisafhandelaars typen

De React-gebeurtenistypen omvatten React.ChangeEvent, React.MouseEvent en React.FormEvent.

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

Generieke componenten

Generieke componenten accepteren een typeparameter voor flexibele, typeveilige lijsten en selectievakken.

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

forwardRef met TypeScript

forwardRef heeft typeparameters nodig voor zowel het type van het ref-element als de props.

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

Retourtypen van aangepaste hooks

Typ retourwaarden van aangepaste hooks expliciet om te voorkomen dat tuple-retourwaarden als any[] worden afgeleid.

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

Context met TypeScript

Typ React-context met een unie die undefined bevat, zodat gebruikers verplicht worden op de context te controleren.

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

Snelle controle

Wat is het juiste type voor een ref naar een HTML-invoerelement?

Beantwoord dit in de interactieve les

Samenvatting

Geef React-props een type met interfaces, useState een typeparameter, gebeurtenissen een React-gebeurtenistype, refs een generiek DOM-elementtype en forwardRef twee typeparameters. Met generieke componenten kun je herbruikbare gebruikersinterfaces typeveilig maken.

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 101
Lessen: 352

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Generieke componenten en forwardRef” gratis?

Ja — de volledige tekst van “Generieke componenten en forwardRef” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Generieke componenten en forwardRef”?

Bouw herbruikbare, getypeerde componenten met generics. Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.

Hoe lang duurt de les “Generieke componenten en forwardRef”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar TypeScript Academy