WebAssembly y TypeScript: guía práctica para desarrolladores web

Introducción: por qué WebAssembly y TypeScript son la pareja ideal

El desarrollo web moderno exige cada vez más rendimiento, especialmente en áreas como el procesamiento de imágenes, gráficos 3D, criptografía y juegos. WebAssembly (Wasm) se ha convertido en una solución revolucionaria que permite ejecutar código a una velocidad cercana a la nativa. Sin embargo, trabajar directamente con Wasm a bajo nivel puede ser complejo. Aquí es donde TypeScript viene al rescate: un lenguaje fuertemente tipado que combina perfectamente con WebAssembly.

En este artículo, analizaremos cómo trabajar eficientemente con WebAssembly en proyectos TypeScript. Aprenderás sobre la compilación de C/C++ y Rust a Wasm, el uso de AssemblyScript para escribir módulos Wasm con una sintaxis similar a TypeScript, así como las mejores prácticas de integración.

Fundamentos de WebAssembly y su interacción con TypeScript

¿Qué es WebAssembly?

WebAssembly es un formato binario de instrucciones para una máquina virtual basada en pila. Está diseñado como un objetivo de compilación portátil para lenguajes de alto nivel. Los módulos Wasm se ejecutan en el navegador a una velocidad cercana a la nativa y proporcionan un estricto aislamiento de memoria.

Casos de uso típicos de Wasm en TypeScript

• Tareas computacionalmente intensivas — procesamiento de video, audio e imágenes
• Operaciones criptográficas — hash, cifrado
• Motores de juegos — física, renderizado
• Compiladores y analizadores sintácticos — análisis sintáctico de archivos grandes

Arquitectura de interacción

El código TypeScript (compilado a JavaScript) actúa como "pegamento" entre el navegador y el módulo Wasm. El código JS carga el módulo, llama a sus funciones y procesa los resultados. El módulo Wasm, a su vez, puede llamar a funciones JS a través de importaciones.

Formas de crear módulos WebAssembly para TypeScript

1. Compilación de C/C++ mediante Emscripten

Emscripten es la herramienta más madura para compilar C/C++ a Wasm. Genera tanto el archivo binario (.wasm) como un envoltorio JS para facilitar su invocación desde TypeScript.

Ejemplo de función en C:

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

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

Compilación:

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

Uso 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. Uso de Rust con wasm-pack

Rust es un lenguaje de programación de sistemas moderno que se compila excelentemente a Wasm. La herramienta wasm-pack automatiza la creación de paquetes npm a partir de código Rust.

Ejemplo de función en 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),    }}

Integración en TypeScript:

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

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

3. AssemblyScript — TypeScript para WebAssembly

AssemblyScript es un subconjunto fuertemente tipado de TypeScript que se compila directamente a WebAssembly. Es la opción ideal para desarrolladores que quieren escribir código Wasm con una sintaxis familiar.

Ejemplo de módulo en AssemblyScript:

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

Compilación: