WebAssembly 与 TypeScript：Web 开发者实用指南

介绍：为什么WebAssembly和TypeScript是理想组合

现代Web开发对性能的要求越来越高，特别是在图像处理、3D图形、密码学和游戏等领域。WebAssembly (Wasm) 成为了一项革命性的解决方案，能够以接近原生的速度执行代码。然而，直接在底层使用Wasm可能很复杂。这时，TypeScript——一种强类型语言——就派上了用场，它与WebAssembly完美结合。

在本文中，我们将探讨如何在TypeScript项目中高效使用WebAssembly。您将了解如何将C/C++和Rust编译为Wasm，如何使用AssemblyScript以类似TypeScript的语法编写Wasm模块，以及最佳集成实践。

WebAssembly基础及其与TypeScript的交互

什么是WebAssembly？

WebAssembly是一种用于栈式虚拟机的二进制指令格式。它被设计为高级语言的便携式编译目标。Wasm模块在浏览器中以接近原生的速度执行，并提供严格的内存隔离。

Wasm在TypeScript中的典型使用场景

• 计算密集型任务——视频、音频、图像处理
• 密码学操作——哈希、加密
• 游戏引擎——物理、渲染
• 编译器和解析器——大型文件的语法分析

交互架构

TypeScript代码（编译为JavaScript）充当浏览器和Wasm模块之间的“胶水”。JS代码加载模块、调用其函数并处理结果。反过来，Wasm模块可以通过导入调用JS函数。

为TypeScript创建WebAssembly模块的方法

1. 通过Emscripten编译C/C++

Emscripten是将C/C++编译为Wasm的最成熟工具。它既生成二进制文件 (.wasm)，也生成JS封装器，方便从TypeScript调用。

C函数示例：

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

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

编译命令：

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

在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. 使用Rust和wasm-pack

Rust是一种现代系统编程语言，可以很好地编译为Wasm。工具 wasm-pack 自动化了从Rust代码创建npm包的过程。

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

在TypeScript中连接：

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

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

3. AssemblyScript——用于WebAssembly的TypeScript

AssemblyScript是TypeScript的一个严格类型子集，可以直接编译为WebAssembly。对于希望用熟悉语法编写Wasm代码的开发者来说，这是理想选择。

AssemblyScript模块示例：

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

编译命令：