Blazor mit TypeScript: Integration & Best Practices

Wie TypeScript mit frühzeitiger Fehlererkennung und Typsicherheit die Entwicklungszeit für C#-Entwickler verkürzt

‍

Als Blazor-Entwickler kennt man das Gefühl: Man hat das Backend und die Blazor-Komponenten perfekt im Griff, aber dann kommt JavaScript – und plötzlich fehlt einem die gewohnte Typsicherheit.

TypeScript schließt genau diese Lücke. Es bringt statische Typisierung in die JavaScript-Welt und macht den Code wartbarer, lesbarer und weniger fehleranfällig.

In diesem Artikel zeige ich, wie TypeScript in einem Blazor-Projekt integriert und genutzt werden kann – inklusive Kommunikation zwischen Blazor und TypeScript über JSInterop.

‍

Was ist TypeScript?

TypeScript ist eine von Microsoft entwickelte, typisierte Übermenge von JavaScript, die zu reinem JavaScript kompiliert. TypeScript ergänzt JavaScript um statische Typprüfungen, Interfaces, generische Typen und weitere Sprachfeatures.

Für C#-Entwickler ist TypeScript besonders zugänglich – viele Konzepte wie Interfaces, Generics, Enums und Klassen sind direkt übertragbar.

‍

Voraussetzungen

Für dieses Beispiel wird ein bestehendes Blazor WebAssembly-Projekt benötigt. Außerdem benötigen wir Node.js und NPM für die TypeScript-Toolchain.

‍

TypeScript in Blazor integrieren

Schritt 1: NPM initialisieren und TypeScript installieren

Im Projektordner die Konsole öffnen und folgende Befehle ausführen:

npm init -y

npm install --save-dev typescript

‍

Schritt 2: TypeScript Konfiguration

Eine tsconfig.json Datei im Projektordner erstellen:

‍

Schritt 3: TypeScript-Datei erstellen

Nun kann eine TypeScript-Datei erstellt werden. Im wwwroot-Ordner eine Datei app.ts erstellen:

‍

Schritt 4: TypeScript kompilieren

TypeScript wird mit dem Befehl tsc zu JavaScript kompiliert. Die kompilierte Datei entsteht in dem in der tsconfig.json definierten Ordner. In diesem Beispiel in wwwroot/js/app.js

Durch die Integration in den Build-Prozess von .NET via der csproj Datei kann die Kompilierung automatisch beim Build-Vorgang erfolgen.

‍

Schritt 5: Die kompilierte JS-Datei einbinden

Die kompilierte JavaScript-Datei muss nun in die Blazor-Anwendung eingebunden werden. Dies erfolgt in der index.html Datei im wwwroot-Ordner.

‍

Kommunikation zwischen Blazor und TypeScript über JSInterop

Eine der stärksten Fähigkeiten von Blazor ist die Fähigkeit, JavaScript und .NET-Code miteinander kommunizieren zu lassen. Dies geschieht über JSInterop.

‍

Im obigen Beispiel wird die Funktion showAlert aus TypeScript aufgerufen. Die Funktion erwartet einen String-Parameter und gibt keinen Wert zurück (ValueTask).

Durch die TypeScript-Typisierung können Fehler frühzeitig erkannt werden – genau das, was C#-Entwickler aus ihrer gewohnten Umgebung kennen.

‍

Fazit

Die Integration von TypeScript in Blazor-Projekte ermöglicht eine typisierte und damit sicherere JavaScript-Entwicklung. C#-Entwickler profitieren dabei besonders, da TypeScript viele bekannte Konzepte übernimmt.

Die Kommunikation über JSInterop bleibt erhalten und wird durch TypeScript sogar noch übersichtlicher, da Typen klar definiert werden können.

Als Best Practices empfehlen sich dabei: TypeScript konsequent über tsconfig konfigurieren, Typen für alle JSInterop-Schnittstellen explizit definieren und die Kompilierung fest in den .NET-Build-Prozess integrieren.