WebAssembly et TypeScript : techniques avancées d'intégration

Introduction à l'intégration avancée de WebAssembly et TypeScript

WebAssembly (Wasm) a révolutionné le développement web en permettant d'exécuter du code à une vitesse proche de celle du natif, directement dans le navigateur. Cependant, au niveau avancé, les développeurs sont confrontés à un défi : comment combiner efficacement le typage strict de TypeScript avec les capacités de bas niveau de Wasm ? Dans cet article, nous explorerons des techniques qui vont au-delà des exemples de base : gestion manuelle de la mémoire, création de wrappers entièrement typés, optimisation des appels et compilation de projets complexes.

Ce contenu est destiné aux développeurs déjà familiarisés avec les bases de Wasm et TypeScript. Nous ne nous attarderons pas sur la compilation d'un "Hello World" — nous nous concentrerons sur des tâches réelles : travail avec les buffers, structures de données, multithreading et profilage.

1. Gestion avancée de la mémoire : allocation manuelle et structures

L'exemple de base d'exportation d'une fonction de Wasm vers TypeScript fonctionne généralement avec des primitives. Au niveau avancé, vous devrez transmettre des données complexes : chaînes de caractères, tableaux de structures, images. Voyons comment cela se fait via WebAssembly.Memory.

1.1. Allocation et libération de mémoire

Supposons que nous ayons un module Wasm, écrit en AssemblyScript ou en C, qui exporte les fonctions malloc et free. En TypeScript, nous créons un wrapper :

// types.tsexport interface WasmMemory {  malloc(size: number): number;  free(ptr: number): void;  memory: WebAssembly.Memory;}

// memory-manager.tsexport class MemoryManager {  private wasm: WasmMemory;

  constructor(wasm: WasmMemory) {    this.wasm = wasm;  }

  allocateString(str: string): number {    const encoder = new TextEncoder();    const bytes = encoder.encode(str);    const ptr = this.wasm.malloc(bytes.length + 1); // +1 pour le terminateur nul    const view = new Uint8Array(this.wasm.memory.buffer);    view.set(bytes, ptr);    view[ptr + bytes.length] = 0; // terminateur nul    return ptr;  }

  readString(ptr: number): string {    const view = new Uint8Array(this.wasm.memory.buffer);    let end = ptr;    while (view[end] !== 0) end++;    const bytes = view.slice(ptr, end);    return new TextDecoder().decode(bytes);  }

  freeString(ptr: number): void {    this.wasm.free(ptr);  }}

Cette approche garantit que la mémoire ne fuit pas et que TypeScript contrôle entièrement le cycle de vie des données.

1.2. Travail avec les structures de données

Pour transmettre des objets (par exemple, un point avec les coordonnées {x: f32, y: f32}), utilisez DataView :

interface Point { x: number; y: number; }

export class PointManager {  private wasm: WasmMemory;  private readonly SIZE = 8; // 2 float32

  constructor(wasm: WasmMemory) {    this.wasm = wasm;  }

  createPoint(p: Point): number {    const ptr = this.wasm.malloc(this.SIZE);    const view = new DataView(this.wasm.memory.buffer);    view.setFloat32(ptr, p.x, true);    view.setFloat32(ptr + 4, p.y, true);    return ptr;  }

  readPoint(ptr: number): Point {    const view = new DataView(this.wasm.memory.buffer);    return {      x: view.getFloat32(ptr, true),      y: view.getFloat32(ptr + 4, true)    };  }}

Important : vérifiez toujours l'alignement de la mémoire. Wasm nécessite un alignement sur 4 octets pour f32.

2. Typage des imports et exports Wasm en TypeScript

Sans typage, travailler avec Wasm est dangereux : on peut passer un nombre à la place d'un pointeur et obtenir un segfault. Utilisez des interfaces strictes.

2.1. Génération de types à partir de Wasm

L'outil wasm-objdump ou wasm2wat permet d'obtenir les signatures des fonctions. Pour un projet AssemblyScript, utilisez un générateur de types :

// wasm-types.d.tsdeclare namespace WasmModule {  interface Exports {    add(a: number, b: number): numb