TypeScript

Übungsaufgaben zu Fahrer-Sicht und Coding Standards in Vue: eigene Mitfahrgesuche verwalten

In der Web-App des Mitfahrlabors sollen Mitfahrende ihre eigenen Gesuche sehen und offene Gesuche zurückziehen können. In diesen Übungen ordnest Du Regeln und Befunde den Werkzeugen Prettier, ESLint und vue-tsc sowie dem Backend zu. Danach entwickelst Du die Regeln für eigene Gesuche als reine Funktionen und das Zurückziehen per PATCH mit einer Komponente, jeweils mit Tests. Zum Schluss behebst Du die Lint- und Typbefunde in der Komponente eines anderen Paars und begründest jede Änderung.

Fahrer-Sicht in Vue: Rollen, Coding Standards und Collective Ownership

Fahrer*innen sollen in der Web-App des Mitfahrlabors die Anfragen zu ihren Fahrten sehen und bestätigen oder ablehnen. Der Artikel unterscheidet Rollen aus dem Token von Beziehungen zu einem Datensatz und zeigt, warum das Backend trotzdem jede Anfrage selbst prüft, auch wenn die Oberfläche Buttons ausblendet. Gleichzeitig einigt sich das Team auf Coding Standards: Prettier für die Form, ESLint mit eigenen Teamregeln, vue-tsc für die Typen, alle drei in Editor und Pipeline. Zum Schluss geht es um Collective Ownership und Pair Programming.

Refactoring mit Testnetz in Vue: Composables, Pinia und Simple Design

Bevor die Web-App des Mitfahrlabors eine Anmeldung bekommt, räumt das Team auf. Der Artikel zeigt Refactoring als Praktik aus Extreme Programming: Code Smells im eigenen Code finden, das Testnetz prüfen und mit einem Charakterisierungstest flicken, dann in kleinen Schritten umbauen, nach denen alle Tests grün sind. Doppelte Ladezustände wandern in ein Composable, die gewählte Testperson in einen Store mit Pinia. Unterwegs findet das Team einen Fehler und behebt ihn erst danach, mit dem anderen Hut. Die vier Regeln von Simple Design entscheiden, was in den Store gehört und was nicht.

Formulare und Validierung in Vue: Fahrt anbieten, Platz anfragen und Problem Details verständlich anzeigen

In Iteration 3 bekommt die Web-App des Mitfahrlabors ihre ersten Formulare: Fahrer*innen bieten eine Fahrt an, Mitfahrende fragen einen Platz an. Der Artikel zeigt, wie v-model Eingabefelder an den Zustand bindet, welche Regeln der Browser prüfen kann und welche nur das Backend, und wie die App Ablehnungen im Format Problem Details (RFC 9457) nach type statt nach detail auswertet. Zum Schluss geht es um Fehlermeldungen, die auch per Tastatur und Screenreader ankommen. Alles entsteht testgetrieben mit Vitest, Vue Test Utils und Mock Service Worker.

API-Client aus OpenAPI: Die Vue-App holt ihre Fahrten vom Backend – mit Vite-Proxy, CORS und Mock Service Worker

Die Fahrtensuche des Mitfahrlabors holt ihre Fahrten jetzt vom Spring-Boot-Backend. Aus dem Vertrag openapi.yaml erzeugt ein Generator TypeScript-Typen und eine Funktion je Operation. Der Proxy des Vite-Entwicklungsservers sorgt dafür, dass App und API für den Browser denselben Ursprung haben; wann stattdessen CORS greift, zeigt der Vergleich beider Wege samt typischer Fehlermeldungen. Integrationstests mit Mock Service Worker (MSW) prüfen Komponente, Fachlogik und Client gegen ein nachgebildetes Backend, auch Lade- und Fehlerzustände.

TypeScript für Java-Entwickler*innen: Typen, Union-Typen, Promises und Test-first mit Vitest

Wer Java kann, liest TypeScript schnell, stolpert aber an anderen Stellen: Typen gibt es nur beim Übersetzen, Objekte passen zu einem Interface allein über ihre Form, statt Enums nimmt man Union-Typen aus Textwerten, null und undefined muss man ausdrücklich zulassen, und asynchroner Code arbeitet mit Promises und async/await. Im Mitfahrlabor entstehen so die Typen für Fahrtangebote aus dem API-Vertrag und die Filterfunktion für die Suche, test-first im Zyklus Rot, Grün, Refactor mit Vitest.

Suchen und Buchen mit Vue 3 und TypeScript: das Projekt im Überblick

In zwölf Artikeln entsteht die Web-App der Mitfahr-App Mitfahrlabor: Auszubildende suchen Fahrten und fragen Plätze an, Fahrer*innen bestätigen die Anfragen. Die App ist eine Single-Page-App mit Vue 3 und TypeScript, die mit der REST-Schnittstelle des Spring-Boot-Backends spricht und die Anmeldung über Keycloak abwickelt. Das Team arbeitet nach Extreme Programming: test-first, in kurzen Iterationen und mit kleinen Releases. Hier findest Du Architektur, Fahrplan und Voraussetzungen.