WebAssembly e TypeScript: um guia prático para desenvolvedores web

Introdução: por que WebAssembly e TypeScript são a dupla perfeita

O desenvolvimento web moderno exige cada vez mais desempenho, especialmente em áreas como processamento de imagens, gráficos 3D, criptografia e jogos. WebAssembly (Wasm) tornou-se uma solução revolucionária, permitindo executar código com velocidade próxima à nativa. No entanto, trabalhar com Wasm diretamente em baixo nível pode ser complexo. É aqui que o TypeScript entra em cena — uma linguagem estritamente tipada que combina perfeitamente com WebAssembly.

Neste artigo, vamos explorar como trabalhar eficientemente com WebAssembly em projetos TypeScript. Você aprenderá sobre compilação de C/C++ e Rust para Wasm, uso de AssemblyScript para escrever módulos Wasm com sintaxe semelhante ao TypeScript, além das melhores práticas de integração.

Fundamentos do WebAssembly e sua interação com TypeScript

O que é WebAssembly?

WebAssembly é um formato binário de instruções para uma máquina virtual baseada em pilha. Ele foi criado como um alvo de compilação portátil para linguagens de alto nível. Módulos Wasm são executados no navegador com velocidade próxima à nativa e fornecem isolamento rigoroso de memória.

Cenários típicos de uso do Wasm em TypeScript

• Tarefas computacionalmente intensivas — processamento de vídeo, áudio, imagens
• Operações criptográficas — hashing, criptografia
• Motores de jogos — física, renderização
• Compiladores e parsers — análise sintática de arquivos grandes

Arquitetura de interação

O código TypeScript (compilado para JavaScript) atua como "cola" entre o navegador e o módulo Wasm. O código JS carrega o módulo, chama suas funções e processa os resultados. O módulo Wasm, por sua vez, pode chamar funções JS através de imports.

Formas de criar módulos WebAssembly para TypeScript

1. Compilação de C/C++ via Emscripten

Emscripten é a ferramenta mais madura para compilar C/C++ para Wasm. Ela gera tanto o arquivo binário (.wasm) quanto um wrapper JS para chamada conveniente a partir do TypeScript.

Exemplo de função em C:

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

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

Compilação:

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

Uso em 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 com wasm-pack

Rust é uma linguagem moderna de programação de sistemas que compila muito bem para Wasm. A ferramenta wasm-pack automatiza a criação de pacotes npm a partir de código Rust.

Exemplo de função em 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),    }}

Integração em TypeScript:

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

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

3. AssemblyScript — TypeScript para WebAssembly

AssemblyScript é um subconjunto estritamente tipado do TypeScript que compila diretamente para WebAssembly. É a escolha ideal para desenvolvedores que desejam escrever código Wasm com uma sintaxe familiar.

Exemplo de módulo AssemblyScript:

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

Compilação: