WebAssembly and TypeScript: A Practical Guide for Web Developers

Introduction: Why WebAssembly and TypeScript Are the Perfect Pair

Modern web development increasingly demands higher performance, especially in areas such as image processing, 3D graphics, cryptography, and games. WebAssembly (Wasm) has become a revolutionary solution, allowing code to execute at near-native speed. However, working directly with Wasm at a low level can be complex. This is where TypeScript comes to the rescue — a strictly typed language that pairs excellently with WebAssembly.

In this article, we will explore how to effectively work with WebAssembly in TypeScript projects. You will learn about compiling C/C++ and Rust to Wasm, using AssemblyScript to write Wasm modules in a TypeScript-like syntax, as well as best practices for integration.

WebAssembly Basics and Its Interaction with TypeScript

What is WebAssembly?

WebAssembly is a binary instruction format for a stack-based virtual machine. It was created as a portable compilation target for high-level languages. Wasm modules execute in the browser at near-native speed and provide strict memory isolation.

Typical Use Cases for Wasm in TypeScript

• Computationally intensive tasks — video, audio, and image processing
• Cryptographic operations — hashing, encryption
• Game engines — physics, rendering
• Compilers and parsers — syntactic analysis of large files

Interaction Architecture

TypeScript code (compiled to JavaScript) acts as the "glue" between the browser and the Wasm module. The JS code loads the module, calls its functions, and processes the results. The Wasm module, in turn, can call JS functions through imports.

Ways to Create WebAssembly Modules for TypeScript

1. Compiling C/C++ via Emscripten

Emscripten is the most mature tool for compiling C/C++ to Wasm. It generates both the binary file (.wasm) itself and a JS wrapper for convenient calling from TypeScript.

Example C function:

// 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"]'

Usage in 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. Using Rust with wasm-pack

Rust is a modern systems programming language that compiles excellently to Wasm. The wasm-pack tool automates the creation of npm packages from Rust code.

Example Rust function:

// 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),    }}

Integration in TypeScript:

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

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

3. AssemblyScript — TypeScript for WebAssembly

AssemblyScript is a strictly typed subset of TypeScript that compiles directly to WebAssembly. This is an ideal choice for developers who want to write Wasm code using a familiar syntax.

Example AssemblyScript module:

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

Compilation: