DE
RU
EN
ES
ZH
FR
PT
AR
HI
WebAssembly und TypeScript: Wenn JavaScript an seine Grenzen stößt
\n\nHaben Sie jemals das Gefühl gehabt, dass Ihre Website langsam ist, obwohl Sie alles in modernem TypeScript geschrieben haben? Videoverarbeitung, 3D-Rendering, komplexe mathematische Berechnungen – der browserbasierte JavaScript gerät ins Stocken. Genau hier kommt WebAssembly (oder einfach Wasm) ins Spiel – eine Technologie, die es ermöglicht, Code, der in C++, Rust oder Go geschrieben wurde, mit nahezu nativer Geschwindigkeit im Browser auszuführen. Aber was hat das mit TypeScript zu tun? Spoiler: Direkt nichts, aber zusammen bilden sie ein starkes Team.
\n\nIn diesem Artikel geben wir nicht nur trockene Definitionen. Wir zeigen, wie TypeScript und WebAssembly zusammenarbeiten können, wobei jeder für seinen Bereich zuständig ist: TypeScript für Komfort und Typisierung, Wasm für Leistung. Sie erfahren, wie Sie ein einfaches Wasm-Modul schreiben und aus TypeScript aufrufen, und vor allem werden Sie verstehen, ob sich der Aufwand lohnt.
\n\nWas ist WebAssembly in einfachen Worten
\n\nWebAssembly ist ein binäres Befehlsformat, das in einer virtuellen Maschine des Browsers ausgeführt wird. Wenn JavaScript eine interpretierte Sprache ist, die "on the fly" geparst und ausgeführt wird, dann ist Wasm bereits kompilierter Bytecode. Er lädt schneller, wird fast wie nativer Code ausgeführt und lässt den Browser nicht "nachdenken".
\n\nWichtige Merkmale von WebAssembly:
\n- \n
- Geschwindigkeit – bis zu 10-20 Mal schneller als JavaScript bei rechenintensiven Aufgaben. \n
- Sicherheit – läuft in einer isolierten Umgebung (Sandbox), hat keinen direkten Zugriff auf das DOM. \n
- Portabilität – dieselbe .wasm-Datei funktioniert in Chrome, Firefox, Safari und Edge. \n
- Kein JS-Ersatz – sondern eine Ergänzung. DOM, Ereignisse, Asynchronität bleiben bei JavaScript/TypeScript. \n
Wasm ist nicht dafür gedacht, die Logik der Benutzeroberfläche zu schreiben. Sein Metier sind schwere Berechnungen: Verschlüsselung, Bildverarbeitung, physikalische Simulationen, Spiele.
\n\nUnd wo bleibt TypeScript?
\n\nTypeScript selbst wird nicht in WebAssembly kompiliert (obwohl es experimentelle Projekte gibt, die jedoch nicht für die Produktion geeignet sind). TypeScript wird jedoch zum idealen "Kleber" zwischen Wasm-Modulen und der Benutzeroberfläche. Stellen Sie sich vor: Sie haben einen schnellen Algorithmus in C++, der in Wasm kompiliert wurde. Sie schreiben in TypeScript einen sauberen Wrapper mit Typen, und Ihre IDE beginnt, Vorschläge zu machen, welche Parameter die Funktion erwartet und welche Typen sie zurückgibt. Keine Magie – nur strenge Typisierung und Autovervollständigung.
\n\nHier ist eine typische Architektur:
\n- \n
- Wasm-Modul – eine Blackbox, die die schwere Arbeit erledigt. \n
- TypeScript-Code – lädt das Modul, ruft seine Funktionen auf und aktualisiert die UI. \n
- Browser – ist glücklich, weil die schwere Arbeit den Hauptthread nicht blockiert. \n
Beispiel: Primzahlen-Generierung mit WebAssembly und TypeScript
\n\nLassen Sie uns ein echtes Projekt erstellen. Wir nehmen einen Algorithmus zur Suche nach Primzahlen (Sieb des Eratosthenes) in C++, kompilieren ihn in Wasm und rufen ihn dann aus TypeScript auf. Keine Angst vor C++ – der Code wird einfach sein, und für die Kompilierung verwenden wir Emscripten.
\n\nSchritt 1. Quellcode in C++
\nErstellen Sie eine Datei primes.cpp:
#include <emscripten.h>\n\nextern "C" {\n EMSCRIPTEN_KEEPALIVE\n int count_primes(int limit) {\n if (limit < 2) return 0;\n bool* sieve = new bool[limit + 1];\n for (int i = 0; i <= limit; i++) sieve[i] = true;\n sieve[0] = sieve[1] = false;\n for (int i = 2; i * i <= limit; i++) {\n if (sieve[i]) {\n for (int j = i * i; j <= limit; j += i) {\n sieve[j] = false;\n }\n }\n }\n int count = 0;\n for (int i = 0; i <= limit; i++) {\n if (sieve[i]) count++;\n }\n delete[] sieve;\n return count;\n }\n}EMSCRIPTEN_KEEPALIVE
Blogs
Buchempfehlungen
Lesen Sie auch
