WebAssembly et TypeScript : guide pratique pour les développeurs web

Introduction : pourquoi WebAssembly et TypeScript forment le duo idéal

Le développement web moderne exige des performances toujours plus élevées, notamment dans des domaines tels que le traitement d'images, les graphiques 3D, la cryptographie et les jeux. WebAssembly (Wasm) est devenu une solution révolutionnaire, permettant d'exécuter du code à une vitesse proche du natif. Cependant, travailler directement avec Wasm à bas niveau peut s'avérer complexe. C'est là que TypeScript entre en jeu — un langage fortement typé qui s'associe parfaitement à WebAssembly.

Dans cet article, nous allons voir comment travailler efficacement avec WebAssembly dans des projets TypeScript. Vous découvrirez la compilation de C/C++ et Rust en Wasm, l'utilisation d'AssemblyScript pour écrire des modules Wasm avec une syntaxe proche de TypeScript, ainsi que les meilleures pratiques d'intégration.

Les bases de WebAssembly et son interaction avec TypeScript

Qu'est-ce que WebAssembly ?

WebAssembly est un format d'instructions binaires pour une machine virtuelle à pile. Il a été conçu comme une cible de compilation portable pour les langages de haut niveau. Les modules Wasm s'exécutent dans le navigateur à une vitesse proche du natif et offrent une isolation mémoire stricte.

Cas d'utilisation typiques de Wasm avec TypeScript

• Tâches intensives en calcul — traitement vidéo, audio, images
• Opérations cryptographiques — hachage, chiffrement
• Moteurs de jeux — physique, rendu
• Compilateurs et analyseurs syntaxiques — analyse de fichiers volumineux

Architecture d'interaction

Le code TypeScript (compilé en JavaScript) agit comme une "colle" entre le navigateur et le module Wasm. Le code JS charge le module, appelle ses fonctions et traite les résultats. Le module Wasm, quant à lui, peut appeler des fonctions JS via des imports.

Méthodes de création de modules WebAssembly pour TypeScript

1. Compilation de C/C++ avec Emscripten

Emscripten est l'outil le plus mature pour compiler du C/C++ en Wasm. Il génère à la fois le fichier binaire (.wasm) et une enveloppe JS pour un appel facile depuis TypeScript.

Exemple de fonction C :

// math.c#include <emscripten.h>

EMSCRIPTEN_KEEPALIVEint add(int a, int b) {    return a + b;}

Compilation :

emcc math.c -o math.js -s EXPORTED_FUNCTIONS='["_add"]' -s EXPORTED_RUNTIME_METHODS='["ccall"]'

Utilisation en TypeScript :

// math.tsinterface EmscriptenModule {    ccall: (name: string, returnType: string, argTypes: string[], args: any[]) => any;}

const Module = await import('./math.js') as unknown as EmscriptenModule;const result = Module.ccall('add', 'number', ['number', 'number'], [5, 3]);console.log(result); // 8

2. Utilisation de Rust avec wasm-pack

Rust est un langage de programmation système moderne qui se compile parfaitement en Wasm. L'outil wasm-pack automatise la création de paquets npm à partir de code Rust.

Exemple de fonction Rust :

// lib.rsuse wasm_bindgen::prelude::*;

#[wasm_bindgen]pub fn fibonacci(n: u32) -> u32 {    match n {        0 => 0,        1 => 1,        _ => fibonacci(n - 1) + fibonacci(n - 2),    }}

Intégration en TypeScript :

// app.tsimport init, { fibonacci } from 'my-wasm-package';

await init();console.log(fibonacci(10)); // 55

3. AssemblyScript — TypeScript pour WebAssembly

AssemblyScript est un sous-ensemble fortement typé de TypeScript qui se compile directement en WebAssembly. C'est le choix idéal pour les développeurs souhaitant écrire du code Wasm avec une syntaxe familière.

Exemple de module AssemblyScript :

// assembly/index.tsexport function factorial(n: i32): i32 {    if (n <= 1) return 1;    return n * factorial(n - 1);}

Compilation :