TypeScript an allen Fronten: Wie man Code für Web, Mobile und Desktop schreibt

TypeScript – der universelle Soldat der modernen Entwicklung

Haben Sie jemals davon geträumt, eine einzige Codebasis zu schreiben und sie auf einer Website, in einer mobilen App und auf dem Desktop auszuführen? Vor zehn Jahren hätte das wie Science-Fiction geklungen. Heute gibt uns TypeScript diese Möglichkeit ohne Magie und Opfer.

TypeScript ist nicht nur „JavaScript mit Typen“. Es ist ein mächtiges Werkzeug, das das Chaos der dynamischen Typisierung in eine saubere Architektur verwandelt. Und vor allem: Es lässt sich gleichermaßen gut auf jede Plattform anwenden. Web, mobile Geräte (iOS, Android) und Desktop-Systeme (Windows, macOS, Linux) – überall gibt es sein eigenes TypeScript-Framework.

In diesem Artikel werden wir reale Strategien und Codebeispiele durchgehen, die Ihnen helfen, ein echter plattformübergreifender TypeScript-Entwickler zu werden. Sie erfahren, wie Sie Logik-Duplizierung vermeiden, welche Bibliotheken Sie wählen und wie Sie die Leistung nicht verlieren.

Warum TypeScript zum Standard für plattformübergreifende Entwicklung geworden ist

Früher musste man für jede Plattform eine neue Sprache lernen: Swift für iOS, Java/Kotlin für Android, C# für Windows, Python für das Backend. TypeScript bricht mit diesem Stereotyp. Es funktioniert überall dort, wo es eine JavaScript-Laufzeitumgebung (Browser, Node.js, Deno) oder eine native Hülle (React Native, Electron) gibt.

Die Hauptvorteile von TypeScript in der plattformübergreifenden Entwicklung:

\n
• Einheitliche Codebasis – Sie schreiben die Geschäftslogik einmal und nutzen sie auf allen Plattformen.
\n
• Strenge Typisierung – Sie fangen Fehler bereits zur Kompilierzeit ab, nicht erst zur Laufzeit.
\n
• Reichhaltiges Ökosystem – Tausende von Bibliotheken mit vorgefertigten Typen (DefinitelyTyped).
\n
• Moderne Syntax – async/await, Generics, Dekorateure, Hilfstypen.
\n

Übrigens: Wenn Sie bereits mit Python arbeiten und TypeScript ausprobieren möchten, erwartet Sie eine angenehme Überraschung: Viele Konzepte (statische Typisierung, Schnittstellen, Generics) sind sehr ähnlich. Auf pythonlib.ru zeigen wir gerne, wie verschiedene Sprachen dieselben Aufgaben lösen. TypeScript ist in diesem Sinne die ideale Brücke zwischen Web und nativen Anwendungen.

Architektur eines plattformübergreifenden TypeScript-Projekts

Damit der Code überall funktioniert, muss die Anwendung in drei Schichten aufgeteilt werden:

\n
• Kern (Core) – reine Geschäftslogik, unabhängig von der Plattform.
\n
• Adapter (Adapters) – dünne Zwischenschichten für die Benutzeroberfläche, das Dateisystem, das Netzwerk.
\n
• Plattformhüllen – React für das Web, React Native für Mobilgeräte, Electron für den Desktop.
\n

Betrachten wir ein Beispiel: eine Notizen-App mit Tags. Der Kern enthält nur die Typen und Funktionen zur Datenverarbeitung.

// core/types.ts\nexport interface Note {\n  id: string;\n  title: string;\n  content: string;\n  tags: string[];\n  createdAt: Date;\n}\n\n// core/noteService.ts\nexport function filterNotesByTag(notes: Note[], tag: string): Note[] {\n  return notes.filter(note => note.tags.includes(tag));\n}\n\nexport function createNote(title: string, content: string, tags: string[]): Note {\n  return {\n    id: crypto.randomUUID(),\n    title,\n    content,\n    tags,\n    createdAt: new Date(),\n  };\n}\n

Dieser Code kann in jeder Umgebung verwendet werden. Keine Abhängigkeiten von DOM, React oder Node.js. Reine TypeScript-Logik.

Plattformübergreifende Benutzeroberfläche: React + React Native + Electron

Der beliebteste Stack für die plattformübergreifende Entwicklung mit TypeScript ist React (Web), React Native (Mobilgeräte) und Electron (Desktop). Alle drei verwenden dieselbe Komponentensyntax, jedoch mit unterschiedlichen Renderern.

Schritt 1: Gemeinsame Komponenten erstellen

Man kann die Darstellungslogik in abstrakte Komponenten auslagern, die plattformspezifische Primitive verwenden.

// shared/NoteCard.tsx\nimport { View, Text,