Wie nutze ich TypeScript mit React, um Bugs zu vermeiden?

Ich entwickle gerade ein React-Projekt und habe mir gedacht, TypeScript auszuprobieren, um zu sehen, ob es wirklich hilft. Aber ich finde es ziemlich verwirrend, die Typen mit Komponenten, Hooks und Props zu integrieren. Kann mir jemand, der das schon nutzt, einen Tipp geben, wie ich anfangen kann, ohne mich völlig zu verlaufen?

2 Antworten

★ Beste Antwort

Der Trick ist, die Props deiner Komponenten mit `interface` oder `type` zu typen, so wie `interface Props { name: string; age: number; }` und dann das in der Komponente zu nutzen: `function Comp({ name, age }: Props)`. Bei Hooks inferiert TypeScript schon ziemlich viel selbst (wenn du `useState(0)` nutzt, weiß es, dass es number ist), aber bei komplexeren Objekten tippst du manuell: `const [user, setUser] = useState<{ name: string; email: string } | null>(null)`. Fang da an, lass den Rest schrittweise kommen - versuch nicht, auf einmal alles zu typen, sonst wird es ein Chaos.

Fang damit an, die Props mit `interface` zu typen, aber der Trick ist, `React.FC<Props>` zu verwenden oder noch besser nur `function Comp(props: Props)`, um keine Verwirrung mit der Typisierung von Children zu haben. Was viele Leute abfuckt, ist zu versuchen, alles vom ersten Tag an zu typen - konzentrier dich erst auf Props und State, lass die Typen an einigen Stellen implizit, wo TypeScript das von selbst ableitet, sonst hast du nur das Gefühl, gegen die Sprache zu kämpfen, statt sie für dich zu nutzen.

Deine Antwort

Anmeldenzum Beantworten.