第 3 章：使用 AssemblyScript 编写 WASM

3.1 环境配置与工具链

要开始使用 AssemblyScript 编写 WebAssembly，首先需要配置相应的开发环境。AssemblyScript 是一种使用 TypeScript 语法的语言，能够编译成 WebAssembly。以下是配置环境的步骤：

1. 安装 Node.js 和 npm：确保你的计算机上已安装 Node.js 和 npm，它们是开发环境的基础。
2. 安装 AssemblyScript：通过 npm 安装 AssemblyScript 编译器：

   npm install -g assemblyscript

3. 创建项目目录：创建一个新的项目目录，并初始化项目：

   mkdir my-assemblyscript-project
   cd my-assemblyscript-project
   npm init -y

4. 安装 AssemblyScript 依赖：

   npm install --save-dev assemblyscript

5. 设置 TypeScript 配置：确保 tsconfig.json 配置正确，指向 asconfig.json 作为 AssemblyScript 编译器的配置。

通过这些步骤，你就可以为 AssemblyScript 开发设置好必要的环境和工具链。

3.2 编写与编译第一个模块

现在，使用 AssemblyScript 编写一个简单的 WebAssembly 模块。首先创建一个 .ts 文件，定义一个简单的函数：

// add.ts
export function add(a: i32, b: i32): i32 {
  return a + b;
}

然后，编译此 TypeScript 文件为 WebAssembly 模块：

1. 编译 TypeScript 代码：

   npx asc add.ts --outFile add.wasm

asc 是 AssemblyScript 编译器，--outFile 选项指定输出的 .wasm 文件。

2. 验证编译结果：生成的 add.wasm 文件是一个二进制 WebAssembly 模块，你可以将其加载到浏览器中进行测试。

3.3 在浏览器中加载和调用

编写完 WebAssembly 模块并编译成 .wasm 文件后，可以在浏览器中加载并调用该模块。以下是如何在浏览器中加载并执行该模块的步骤：

1. 加载 WASM 文件：使用 JavaScript 加载 WebAssembly 模块。创建一个 HTML 文件并使用 WebAssembly.instantiate API 加载模块：

   <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WASM Example</title>
   </head>
   <body>
     <h1>WebAssembly with AssemblyScript</h1>
     <script>
       fetch('add.wasm')
         .then(response => response.arrayBuffer())
         .then(bytes => WebAssembly.instantiate(bytes))
         .then(obj => {
           console.log('Result of add(2, 3):', obj.instance.exports.add(2, 3));
         });
     </script>
   </body>
   </html>

这里的 fetch 用于加载 .wasm 文件，然后通过 WebAssembly.instantiate API 实例化该模块，最后调用 add 函数并输出结果。

2. 运行项目：你可以将项目部署在本地服务器上，如使用 http-server 启动：

   npx http-server

访问页面后，你应该能看到调用 WebAssembly 函数的结果。

通过这些步骤，你可以使用 AssemblyScript 编写和加载 WebAssembly 模块，实现高性能的计算任务。