Seminar TypeScript Professional – Intensiv: Fullstack-Entwicklung und sichere APIs

Eine Fullstack-Anwendung benötigt übereinstimmende Verträge zwischen Oberfläche, HTTP-Schnittstelle und fachlicher Verarbeitung. Das Seminar entwickelt diese Verträge in einem gemeinsamen Projekt. Statische Typen erleichtern die Zusammenarbeit der Module; Laufzeitschemata und serverseitige Prüfungen sichern die Übergänge zwischen getrennten Prozessen und unterschiedlichen Vertrauensbereichen.

Gebündelt werden die drei Fachseminare zu Node.js-Backends, React-Frontends und sicheren Schnittstellen. Die fünf Tage konzentrieren sich auf einen zusammenhängenden Buchungsprozess mit ausgewählten Erfolgs- und Fehlerfällen. Die Einzelkurse bieten zusätzlich mehr Zeit für Komponentenvarianten, asynchrone Sonderfälle und Sicherheitsreviews.

Lernziele

• Eine Node.js-API und eine React-Oberfläche über nachvollziehbare Datenverträge verbinden.
• Daten vor der Verarbeitung validieren und Eingabe-, Domänen- und Ausgabemodelle trennen.
• Asynchrone Abläufe und Fehlerzustände auf Server und Client kontrolliert behandeln.
• Objektberechtigungen serverseitig prüfen und ungültige Eingaben abweisen.
• Einen vollständigen Nutzerablauf durch Typ-, Komponenten-, Integrations- und Negativtests absichern.

Zielgruppe

TypeScript-Entwickler mit React- und Node.js-Praxis, die vollständige Webanwendungen mit einheitlichen Verträgen umsetzen möchten.

Voraussetzungen

Sichere TypeScript-Kenntnisse einschließlich Generics und Narrowing; praktische Erfahrung mit React-Komponenten und Hooks, Node.js, HTTP, JSON und Tests. Empfohlen: Intensiv: Sprache, Typsystem und Architektur oder gleichwertige Kenntnisse.

Inhaltsübersicht

1. Backendbasis und asynchrone Verarbeitung
2. Laufzeitverträge und Persistenzgrenzen
3. Typisierte React-Oberfläche
4. Formulare und serverseitige Berechtigungen
5. Durchgehende Tests und Anwendungsreview

Seminarinhalte

Backendbasis und asynchrone Verarbeitung

• Node.js-Modell, TypeScript-Konfiguration und getrennte Typprüfung konsistent einrichten.
• REST-Routen, Antwortverträge und fachliche Fehlerstrukturen aufbauen.
• Promises, Fehlerweitergabe, Zeitbegrenzung und unterstützte Abbruchsignale anwenden.
• Ein vorbereitetes Repository mit parametrisiertem Datenzugriff anbinden.

Laufzeitverträge und Persistenzgrenzen

• Externe Daten als unknown entgegennehmen und mit Laufzeitschemata prüfen.
• Normalisierung, Schemafehler und fachliche Invarianten voneinander abgrenzen.
• Datentransferobjekte, Domänenmodell und Persistenzrepräsentation gezielt übersetzen.
• Konflikte, unvollständige Eingaben und fehlerhafte Konfiguration reproduzierbar behandeln.

Typisierte React-Oberfläche

• Komponentenverträge, DOM-Ereignisse und TSX-Konfiguration passend typisieren.
• Hooks, Reducer, Refs und benutzerdefinierte Hooks im Zustandsmodell einsetzen.
• Lade-, Erfolgs-, Leer- und Fehlerzustände explizit darstellen.
• API-Antworten prüfen und überholte oder abgebrochene Anfragen berücksichtigen.

Formulare und serverseitige Berechtigungen

• Formularzustand, validierte Werte und verständliche Fehlermeldungen verbinden.
• Wiederverwendbare UI-Elemente mit klar begrenzten Typverträgen gestalten.
• Eine vorbereitete Identität in Objekt- und Aktionsberechtigungen einbeziehen.
• Unnötige interne Fehlerdetails, Secrets und vertrauliche Protokolldaten vermeiden.

Durchgehende Tests und Anwendungsreview

• Komponentenverhalten und HTTP-Grenzen mit kontrollierten Testdaten überprüfen.
• Unberechtigte Objektzugriffe und manipulierte Eingaben als Negativtests abdecken.
• Typprüfung, Linting, Laufzeittests und Produktionsbuild getrennt ausführen.
• Den vollständigen Prozess einschließlich Diagnose und Ressourcenfreigabe nachvollziehen.

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. Backend und Frontend aus dem vorbereiteten Projekt starten und den vorgesehenen Datenfluss aufnehmen.
2. Eine REST-Funktion einschließlich Schema, Domänenmodell und Persistenzadapter entwickeln.
3. Die Funktion in einer React-Oberfläche mit typisierten Komponenten und expliziten Zuständen verwenden.
4. Ein Bearbeitungsformular und die passende serverseitige Objektberechtigung ergänzen.
5. Fehleingaben, fremde Objekte, gestörte Antworten und den erfolgreichen Ablauf automatisiert prüfen.
6. Beide Produktionsbuilds ausführen und den Datenfluss vom Formular bis zum gespeicherten Datensatz kontrollieren.

Schulungsumgebung

Vorbereitete React-/Node.js-Anwendung mit abgestimmten Werkzeugversionen, lokalem HTTP-Dienst, Testdatenbank und synthetischen Identitäten. Der Aufbau eines Identitätsproviders ist nicht Teil des Seminars.

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