Ein durchsuchbares Cheat Sheet für React-TypeScript-Typen: Props, children, useState, Events, Refs, Context, Reducer und generische Komponenten, jeweils mit Code zum Kopieren.
In React mit TypeScript typisierst du hauptsächlich die Props einer Komponente, den Rest erledigt die Typinferenz. Beschreibe Props mit einem Interface, nutze React.ReactNode für children, gib useState ein Typargument mit, wenn der Startwert zu eng ist, und wähle für Handler Event-Typen wie React.ChangeEvent<HTMLInputElement>. Dateien mit JSX verwenden die Endung .tsx.
Die am häufigsten verwendeten Typen
Durchsuche das Cheat Sheet nach dem, was du typisieren willst, etwa einem Klick-Handler oder einer Ref, und kopiere die Zeile. Danach folgen ausführlichere Beispiele für Context, Reducer und generische Komponenten.
Füge children: React.ReactNode zum Props-Interface hinzu. ReactNode deckt Strings, Zahlen, Elemente, Arrays und null ab. Verwende React.ReactElement nur, wenn die Komponente genau ein JSX-Element erhalten muss.
Ein leeres Array gibt dem Type Checker nichts, woraus er ableiten kann. Gib den Elementtyp mit: useState<string[]>([]). Dasselbe gilt für null als Startwert, wie in useState<User | null>(null).
Rufe useRef<HTMLInputElement>(null) auf und hänge sie mit ref={inputRef} an. Lies inputRef.current mit einer Null-Prüfung, denn der Wert ist null, bis React das Element einbindet, und wieder, nachdem es entfernt wurde.
Die aktuelle React-Dokumentation zeigt eine Funktionskomponente, die ref als normale Prop erhält und an das innere Element setzt. Typisiere diese Prop als React.Ref<HTMLInputElement>. Älterer Code umschließt die Komponente stattdessen mit forwardRef.
Wenn es keinen sinnvollen Standardwert gibt, nutze createContext<Value | null>(null) und kapsle useContext in einem kleinen Hook, der einen Fehler wirft, wenn der Wert null ist. Jeder Konsument bekommt dann einen Typ ohne null und eine klare Fehlermeldung, falls ein Provider fehlt.
Optionale Props bekommen Standardwerte in der Signatur; children akzeptiert alles, was sich rendern lässt.
Der Hook wirft außerhalb des Providers einen klaren Fehler und liefert innerhalb einen Wert ohne null.
In jedem case wird die Action eingegrenzt, sodass action.item nur dort existiert, wo es hingehört.
T wird durch die Elemente festgelegt, die der Aufrufer übergibt, deshalb erhält renderItem den richtigen Typ.
Die Elternkomponente erstellt die Ref; das Kind setzt sie auf das echte Eingabefeld.
Props
Props-Objekt
Props
Children jeder Art
Props
Nur ein Element als Kind
Props
Variante mit wenigen erlaubten Werten
Props
Native Button-Props durchreichen
Props
Style-Prop
Props
Callback-Prop
State
Number-State (abgeleitet)
State
State, der null sein kann
State
State mit leerem Array
State
Status-Union
State
Setter als Prop übergeben
Events
Änderung in einem Textfeld
Events
Änderung in einem Select
Events
Button-Klick
Events
Formular absenden
Events
Tastendruck
Events
Typ für den ganzen Handler
Refs
Ref auf ein DOM-Element
Refs
Ref mit einer Timer-ID
Refs
Ref als Prop erhalten
Context
Context ohne Standardwert
Reducer
Action-Union
Alle
Props
State
Events
Refs
Context
Reducer
Cheat Sheet durchsuchen
event, ref, children...
Nach Gruppe filtern
Kopieren
{n} von {v} Zeilen angezeigt
Keine passenden Zeilen. Versuch es mit einem kürzeren Wort.
Kostenlos starten · Keine Kreditkarte nötig