Seminar TypeScript Professional – Frontend-Entwicklung mit React und TypeScript

In professionellen Frontends entstehen viele Fehler an den Übergängen zwischen Komponenten, Formularen und API-Aufrufen. Das Seminar bearbeitet diese Übergänge in einer vorbereiteten React-Anwendung. Props werden als fachliche Verträge entworfen, Zustände explizit modelliert und externe Daten geprüft, bevor sie die Oberfläche erreichen.

Die Übungen verbinden TSX, Hooks und wiederverwendbare Komponenten mit realistischen Lade-, Leer- und Fehlerzuständen. Dabei wird keine allgemeine React-Einführung eingeschoben: Vorhandene React-Kenntnisse bilden die Grundlage für drei Tage konzentrierte TypeScript-Praxis. Tests prüfen das beobachtbare Verhalten und ergänzen die statischen Prüfungen des Compilers.

Lernziele

• Props, Events und Komponentenvarianten mit klaren Typverträgen gestalten.
• Hooks, Refs und Reducer passend zum tatsächlichen Zustandsmodell typisieren.
• API-Daten zur Laufzeit prüfen und Fehlerzustände in der Oberfläche abbilden.
• Formulare mit nachvollziehbarer Eingabe- und Fehlermodellierung implementieren.
• Komponenten und vollständige Nutzerabläufe mit stabilen Tests absichern.

Zielgruppe

Frontend- und Fullstack-Entwickler, die React bereits verwenden und dessen TypeScript-Einsatz professionalisieren möchten.

Voraussetzungen

Sichere TypeScript-Grundlagen; praktische React-Erfahrung mit funktionalen Komponenten, Props, State und Hooks; HTML, CSS, HTTP und JSON. React-Grundkenntnisse sind ausdrücklich erforderlich.

Inhaltsübersicht

1. TSX und Komponentenverträge
2. Hooks und Zustandsmodelle
3. Formulare und wiederverwendbare Elemente
4. API-Daten und asynchrone Oberflächen
5. Komponententests und Fehlersuche
6. Frontend-Projekt und Review

Seminarinhalte

TSX und Komponentenverträge

• TSX-Projekt, JSX-Konfiguration, React-Typen und Type Checking konsistent einrichten.
• Pflicht- und optionale Props sowie Callbacks und Kinderinhalte modellieren.
• Unzulässige Prop-Kombinationen durch diskriminierte Unions ausschließen.
• DOM-Ereignisse passend zum Element typisieren und unnötige Type Assertions entfernen.

Hooks und Zustandsmodelle

• Inferenz bei useState bewusst nutzen und problematische Initialwerte erkennen.
• Reducer mit typisierten Aktionen und vollständiger Fallbehandlung entwickeln.
• Refs, Context und benutzerdefinierte Hooks mit klaren Rückgabeverträgen versehen.
• Laufzeitverhalten von Effects und Abhängigkeiten von rein statischer Typisierung unterscheiden.

Formulare und wiederverwendbare Elemente

• Formularwerte, Darstellungswerte und validierte fachliche Daten trennen.
• Eingabefehler nach Feld und Formularzustand strukturiert abbilden.
• Generische Listen- und Auswahlkomponenten auf einen konkreten Wiederverwendungsfall begrenzen.
• Semantische Beschriftungen, Tastaturbedienung und verständliche Fehlermeldungen berücksichtigen.

API-Daten und asynchrone Oberflächen

• Fetch-Grenzen kapseln und empfangene JSON-Daten mit einem Laufzeitschema prüfen.
• Lade-, Erfolgs-, Leer- und Fehlerzustände als explizites Zustandsmodell darstellen.
• Abbruch und überholte Antworten bei konkurrierenden Anfragen behandeln.
• Vertrauliche Informationen aus Client-Konfiguration und öffentlich ausgeliefertem Code heraushalten.

Komponententests und Fehlersuche

• Verhalten über zugängliche Rollen, Beschriftungen und Benutzeraktionen testen.
• HTTP-Antworten kontrolliert simulieren und Fehlerfälle reproduzierbar machen.
• Compilerfehler, React-Laufzeitfehler und fachliche Fehlanzeigen getrennt diagnostizieren.
• Statische Typprüfung auch dann ausführen, wenn das Buildwerkzeug lediglich transpiliert.

Frontend-Projekt und Review

• Eine Buchungsübersicht mit typisierter Detailansicht und Bearbeitungsformular erweitern.
• Validierung, Request-Abbruch und verständliche Fehleranzeige gemeinsam integrieren.
• Einen erfolgreichen und einen fehlschlagenden Nutzerablauf automatisiert prüfen.
• Komponentenverträge, Zustandsübergänge und Build-Ergebnis im Review beurteilen.

Praxisprojekt

Die praktische Arbeit folgt einer zusammenhängenden Aufgabenstellung. Die folgenden Schritte werden anhand vorbereiteter Ausgangsstände umgesetzt und mit überprüfbaren Zwischenständen verbunden.

1. Eine vorbereitete Oberfläche starten und unsichere Prop-Verträge identifizieren.
2. Varianten einer Buchungskomponente so modellieren, dass widersprüchliche Props abgewiesen werden.
3. Formularwerte prüfen und fachliche Validierungsfehler einzelnen Eingaben zuordnen.
4. Den API-Client mit Schema-Prüfung, Ladezustand und Abbruchlogik anbinden.
5. Erfolg, ungültige Serverantwort und abgebrochene Anfrage in Komponententests abbilden.
6. Typprüfung und Produktionsbuild ausführen und den kompletten Bearbeitungsablauf kontrollieren.

Schulungsumgebung

Vorbereitetes React-/TSX-Projekt mit abgestimmten Versionen, Entwicklungsserver, Testwerkzeugen und lokalem API-Testdienst; Schulungsarbeitsplätze mit aktuellem Browser.

Die Schulungsumgebung wird vom Kunden nach der vorab abgestimmten technischen Checkliste bereitgestellt. Benötigte Installationsrechte, Werkzeuge und Übungsstände werden vor Seminarbeginn geprüft.