Een doorzoekbare cheatsheet met React TypeScript-types: props, children, useState, events, refs, context, reducers en generieke componenten, elk met code om te kopiëren.
In React met TypeScript typeert u vooral de props van een component, en inferentie doet de rest. Beschrijf props met een interface, gebruik React.ReactNode voor children, geef useState een type-argument als de beginwaarde te smal is, en kies eventtypes zoals React.ChangeEvent<HTMLInputElement> voor handlers. Bestanden met JSX gebruiken de extensie .tsx.
De meest gebruikte types
Zoek in de cheatsheet naar wat u probeert te typeren, zoals een klikhandler of een ref, en kopieer de regel. Daarna volgen langere uitgewerkte voorbeelden voor context, reducers en generieke componenten.
Voeg children: React.ReactNode toe aan de props-interface. ReactNode dekt strings, getallen, elementen, arrays en null. Gebruik React.ReactElement alleen als de component precies één JSX-element moet ontvangen.
Een lege array geeft de checker niets om uit af te leiden. Geef het elementtype mee: useState<string[]>([]). Hetzelfde geldt voor null als beginwaarde, zoals in useState<User | null>(null).
Roep useRef<HTMLInputElement>(null) aan en koppel hem met ref={inputRef}. Lees inputRef.current met een null-check, want hij is null totdat React het element mount en opnieuw nadat het unmount.
De huidige React-documentatie toont een functiecomponent die ref als gewone prop ontvangt en op het binnenste element zet. Typeer die prop als React.Ref<HTMLInputElement>. Oudere code wikkelt de component in plaats daarvan in forwardRef.
Als er geen zinnige standaardwaarde is, gebruik dan createContext<Value | null>(null) en wikkel useContext in een kleine hook die een fout gooit als de waarde null is. Elke consumer krijgt dan een type zonder null en een duidelijke fout als een provider ontbreekt.
Optionele props krijgen standaardwaarden in de signature; children accepteert alles wat kan renderen.
De hook gooit buiten de provider een duidelijke fout en geeft erbinnen een waarde terug die niet null is.
Binnen elke case is de action vernauwd, dus action.item bestaat alleen waar dat hoort.
T wordt vastgelegd door de items die de aanroeper meegeeft, dus renderItem ontvangt het juiste type.
De parent maakt de ref aan; de child zet hem op het echte invoerveld.
Props
Props-object
Props
Children van elk soort
Props
Slechts één element als child
Props
Variant beperkt tot een paar waarden
Props
Native knop-props doorgeven
Props
Style-prop
Props
Callback-prop
State
Number-state (afgeleid)
State
State die null kan zijn
State
State met een lege array
State
Status-union
State
Setter doorgegeven als prop
Events
Wijziging in tekstveld
Events
Wijziging in select
Events
Klik op knop
Events
Formulier verzenden
Events
Toetsaanslag
Events
Type voor de hele handler
Refs
Ref naar een DOM-element
Refs
Ref met een timer-id
Refs
Ref ontvangen als prop
Context
Context zonder standaardwaarde
Reducer
Action-union
Alle
Props
State
Events
Refs
Context
Reducer
Doorzoek de cheatsheet
event, ref, children...
Filter op groep
Kopiëren
{n} van {v} rijen getoond
Geen rijen gevonden. Probeer een korter woord.
Gratis beginnen · Geen creditcard nodig