# 第 3 章：使用 AssemblyScript 编写 WASM

URL: https://caijiao.org/webassembly/practical/03-assemblyscript
Source: docs/webassembly/practical/03-assemblyscript.md
Description: 本章介绍如何使用 AssemblyScript 编写 WebAssembly 模块，包括环境配置与工具链、编写与编译第一个模块，以及在浏览器中加载和调用模块。

## 3.1 **环境配置与工具链**

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

1. **安装 Node.js 和 npm**：确保你的计算机上已安装 Node.js 和 npm，它们是开发环境的基础。
2. **安装 AssemblyScript**：通过 npm 安装 AssemblyScript 编译器：
   ```bash
   npm install -g assemblyscript
   ```
3. **创建项目目录**：创建一个新的项目目录，并初始化项目：
   ```bash
   mkdir my-assemblyscript-project
   cd my-assemblyscript-project
   npm init -y
   ```
4. **安装 AssemblyScript 依赖**：
   ```bash
   npm install --save-dev assemblyscript
   ```
5. **设置 TypeScript 配置**：确保 `tsconfig.json` 配置正确，指向 `asconfig.json` 作为 AssemblyScript 编译器的配置。

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

## 3.2 **编写与编译第一个模块**

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

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

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

1. **编译 TypeScript 代码**：
   ```bash
   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 加载模块：

   ```html
   <!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` 启动：

   ```bash
   npx http-server
   ```

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

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