Wie TypeScript die Reaktion verbessert: Reibungsloseres Entwicklererlebnis, weniger Fehler (mit einem useState-Beispiel)

Beginnen wir mit einem Szenario und einer damit verbundenen Aufgabe.

Wir haben eine Messaging-Anwendung mit einer Statusleiste, die den aktuellen Status des Benutzers anzeigt und es ihm ermöglicht, ihn zu aktualisieren. Wir müssen ein Dropdown-Menü hinzufügen, über das der Benutzer seinen Status ändern und useState() verwenden kann, um den aktuellen Status des Benutzers in der Benutzeroberfläche anzuzeigen und zu aktualisieren.

Der Einfachheit halber konzentrieren wir uns in diesem Artikel nur auf die useState-Implementierung. Am Ende des Artikels werden Sie verstehen, dass TypeScript selbst für ein einfaches Beispiel eine viel leistungsfähigere Option ist.

Die Aufgabe

Wir müssen einen useState() definieren, der userStatus speichert und aktualisiert und mit einer der fünf möglichen Statusoptionen initialisiert wird (sagen wir aktiv).

Alle möglichen Optionen sind:

1. Aktiv (aktiv)
2. Weg (weg)
3. Bitte nicht stören (dnd)
4. Im Urlaub (Urlaub)
5. Abwesenheit (OOO)

JSX/JS

Das ist eine sehr einfache Aufgabe, oder? Alles, was wir tun müssen, ist, einen useState zu definieren und ihn auf aktiv zu initialisieren und dann die Set-Funktion zu verwenden, um den Status zu aktualisieren, und schon sind wir fertig.

Aber warte! Was passiert, wenn jemand meinen Code überprüft oder diesen Codeabschnitt später besucht (z. B. nach 1 Woche, 2 Wochen, 1 Monat, 6 Monaten oder was auch immer), woher weiß er, welche Optionen möglich/gültig sind?

Ahh! Ja, wir können neben dem useState einen Kommentar hinzufügen, um sie darüber zu informieren, dass dies alle möglichen Optionen sind.

Aber das ist doch keine gute Lösung, oder? Wie können wir es also verbessern?

Objektsuche

Objektsuche ist eine wirklich schöne Lösung für unser Problem. Beginnen wir also mit der Definition einer Objektsuche namens UserStatus und verwenden diese, um unseren userStatus-Wert festzulegen.

Jetzt aktualisieren wir unsere useState-Definition.

Jetzt versuchen wir, den Status zu aktualisieren.

Ohh! Schauen Sie sich das an, jetzt erhalten wir die automatische Vervollständigung in unserem Editor und können alle möglichen/gültigen Werte von userStatus überprüfen, indem wir uns die Definition von UserStatus ansehen.

Die Probleme bei der Objektsuche

Obwohl die Objektsuchmethode scheinbar unser Problem gelöst hat und definitiv eine weitaus bessere Lösung ist als nur das Hinzufügen von Kommentaren, gibt es immer noch zwei große Probleme:

1. Jeder, der unseren Code später besucht, muss wissen, dass wir eine Objektsuche verwenden, um unseren Status festzulegen. Das mag trivial erscheinen, aber stellen Sie sich vor, wenn unsere Komponente wächst und komplexer wird, wird es für jemanden sehr leicht, sich unserer Implementierung nicht bewusst zu sein.
2. Es hindert immer noch niemanden daran, einen zufälligen Wert für unseren Status festzulegen, selbst wenn ihm die Objektsuche bekannt ist.  

Wie können wir diese Probleme lösen?
Antwort: Typescript

TSX/TS

Beginnen wir noch einmal mit unserer Lösung, dieses Mal jedoch in einer .tsx- oder Typescript-Datei. Wir können damit beginnen, eine useState()-Funktion zu definieren und sie mit dem Wert zu initialisieren: active.

Im Moment scheint nichts anders zu sein, aber es ist so. Lassen Sie uns den userStatus-Wert aktualisieren.

Ahh! Wie Sie sehen, entsteht bei einigen Set-Funktionen die gefürchtete rote, schnörkelige Fehlerlinie, bei denen, bei denen wir einen String-Wert festlegen, jedoch nicht. Dies liegt daran, dass Typescript den Typ unseres Zustands aus seinem Anfangswert (d. h. Typzeichenfolge) ableitet.

Ja, dies verhindert, dass wir Werte, die keine Zeichenfolgen sind, auf unseren userStatus-Status festlegen, aber es hindert uns immer noch nicht daran, zufällige Zeichenfolgenwerte festzulegen, und wir müssen weiterhin die Objektsuche verwenden, um alle möglichen Optionen zu dokumentieren , fragen Sie sich vielleicht.
 

Lass uns „One Stone, Two Birds“ machen.

Explizite Typen und Generika

In Typescript können wir benutzerdefinierte Typen erstellen und es unterstützt auch Generika, die in React für seine Hook-Definitionen verwendet werden können, in unserem Fall den useState()-Hook.

Erstellen wir einen neuen UserStatus-Typ in unserer React-Komponente.

Nun verwenden wir diesen Typ in unserer useState-Definition.

Bisher sieht alles so aus, wie wir es in der Objektsuchmethode gemacht haben, aber die Magie von Typescript liegt darin, dass wir anfangen, unsere Set-Funktion und den Statuswert zu verwenden.

1. Abrufen der Typdefinition von userStatus.
   

2. Autovervollständigung für die setUserStatus-Funktion.
   

3. Eine ordnungsgemäße Validierung für gültige und ungültige Werte erhalten.
   

Schau dir das an,

1. Wir können die Dokumentation aller gültigen Werte erhalten, indem wir einfach mit der Maus über den userStatus fahren und dessen Typdefinition nachschlagen.
2. Wir müssen uns jedoch nicht die Typdefinition unseres Statuswerts ansehen, wenn wir die Set-Funktion verwenden, da sie uns automatisch die automatische Vervollständigung für alle gültigen Optionen liefert.
3. Jetzt erhalten wir nicht nur den Fehler, wenn wir einen Nicht-String-Wert festlegen, sondern auch den Fehler, wenn ungültige String-Werte verwendet werden (d. h. es werden immer Fehler für ungültige Eingaben angezeigt).

Abschluss

Mittlerweile haben Sie wahrscheinlich ein gutes Gefühl dafür, wie TypeScript unsere Entwicklungserfahrung wirklich verbessern kann. Wir haben hier mit einem einfachen Beispiel nur an der Oberfläche gekratzt, aber denken Sie nur an die realen Anwendungen, die wir erstellen: Die Verwendung von TypeScript könnte viel weniger Fehler und insgesamt ein viel besseres Entwicklererlebnis bedeuten.

Ich hoffe, dieser Artikel ermutigt Sie, Typescript in all Ihren React-Anwendungen zu verwenden und großartige Web-Erlebnisse zu erstellen.

Wenn Ihnen dieser Artikel gefallen hat und Sie sich mit mir vernetzen möchten, können Sie sich auf Linked und X/Twitter mit mir vernetzen

Das obige ist der detaillierte Inhalt vonWie TypeScript die Reaktion verbessert: Reibungsloseres Entwicklererlebnis, weniger Fehler (mit einem useState-Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!