Angular中调用Rust-Wasm向量函数异常及优化导入方案问询

1. 调整Rust代码的类型绑定 #

Rust原生Vec<u32>无法被JavaScript直接识别，需要通过wasm-bindgen和js_sys将其转换为JS兼容的类型。修改lib.rs代码如下：

首先添加依赖导入：

use wasm_bindgen::prelude::*;
use js_sys::Uint32Array;

然后重写test_vec_output函数，将Rust向量转换为JS的Uint32Array：

#[wasm_bindgen]
pub fn test_vec_output() -> Uint32Array {
    // 示例：生成一个测试向量
    let rust_vec = vec![10, 20, 30, 40, 50];
    // 创建对应长度的JS Uint32Array
    let js_array = Uint32Array::new_with_length(rust_vec.len() as u32);
    // 将Rust向量数据复制到JS数组中
    js_array.copy_from(&rust_vec);
    js_array
}

如果函数需要业务参数（比如生成指定长度的向量），可以修改为：

#[wasm_bindgen]
pub fn test_vec_output(length: u32) -> Uint32Array {
    let rust_vec: Vec<u32> = (0..length).collect();
    let js_array = Uint32Array::new_with_length(length);
    js_array.copy_from(&rust_vec);
    js_array
}

2. 正确编译Wasm包 #

使用wasm-pack编译时指定bundler目标，适配Angular的打包工具：

wasm-pack build --target bundler

编译完成后，pkg目录会生成带类型声明的绑定文件，方便Angular导入时获得类型提示。

3. Angular侧的导入与调用 #

在Angular组件中按以下方式初始化并调用Wasm函数：

import init, { test_vec_output, add_one } from '../path-to-your/pkg/your_wasm_package_name';

export class YourComponent implements OnInit {
  async ngOnInit() {
    // 初始化Wasm模块（必须等待完成）
    await init();

    // 调用向量函数，此时只需传入业务参数（示例为长度5）
    const typedArray = test_vec_output(5);
    // 转换为普通JS数组使用
    const resultArray = Array.from(typedArray);
    console.log(resultArray); // 输出 [0, 1, 2, 3, 4]

    // add_one函数正常调用
    console.log(add_one(25)); // 输出26
  }
}

问题根源说明 #

之前出现的「需传两个参数才无报错、返回undefined」，是因为Rust原生Vec<u32>暴露给Wasm时，生成的绑定代码需要传入内存偏移、长度等内部管理参数（而非业务参数），但JS侧无法正确处理这类隐式参数，导致类型转换失败。通过显式转换为JS原生TypedArray，就能避免这类问题。

额外优化：返回普通JS数组 #

如果不需要TypedArray的性能优势，也可以通过serde将Rust向量序列化为JS数组：

1. 在Cargo.toml添加依赖：

[dependencies]
wasm-bindgen = "0.2"
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"

2. 修改Rust函数：

use wasm_bindgen::prelude::*;
use serde::Serialize;

#[wasm_bindgen]
#[derive(Serialize)]
pub fn test_vec_output() -> JsValue {
    let rust_vec = vec![1, 2, 3];
    JsValue::from_serde(&rust_vec).unwrap()
}

这种方式适合小量数据场景，返回值可直接作为JS数组使用。

内容的提问来源于stack exchange，提问作者alpha027