如何从Wasm向前端返回元组？Wasm-Bindgen编译报错解决

错误原因 #

wasm_bindgen 要求暴露给JavaScript的函数返回值必须实现 IntoWasmAbi trait，而Rust标准库中的 (usize, usize) 元组并未内置该 trait 的实现，因此触发编译报错。

可行解决方案 #

方法一：返回JS数组（保持前端解构写法）

修改Rust代码，将坐标元组转换为标准JS数组并以JsValue类型返回，前端可继续使用解构语法：

use js_sys::Array;
use wasm_bindgen::JsValue;

#[wasm_bindgen]
impl CanvasData {
    pub fn index_to_coordinate(&self, index: usize) -> JsValue {
        let x = index % self.cell_count;
        let y = index / self.cell_count;
        let arr = Array::new_with_length(2);
        arr.set(0, JsValue::from(x));
        arr.set(1, JsValue::from(y));
        arr.into()
    }
}

前端调用代码无需修改：

const [x, y] = canvasData.index_to_coordinate(100)

方法二：定义绑定的坐标结构体

创建一个被#[wasm_bindgen]标记的结构体作为返回类型，语义更明确：

#[wasm_bindgen]
#[derive(Debug, Clone, Copy)]
pub struct Coordinate {
    pub x: usize,
    pub y: usize,
}

#[wasm_bindgen]
impl CanvasData {
    pub fn index_to_coordinate(&self, index: usize) -> Coordinate {
        Coordinate {
            x: index % self.cell_count,
            y: index / self.cell_count,
        }
    }
}

前端调用时通过属性访问坐标值：

const coord = canvasData.index_to_coordinate(100);
const x = coord.x;
const y = coord.y;

方法三：转换为支持的元组类型

wasm_bindgen 对(u32, u32)、(i32, i32)等基础类型元组内置了IntoWasmAbi实现。若确定画布网格数量不会超出u32范围，可将usize转换为u32后返回：

#[wasm_bindgen]
impl CanvasData {
    pub fn index_to_coordinate(&self, index: usize) -> (u32, u32) {
        (
            (index % self.cell_count) as u32,
            (index / self.cell_count) as u32,
        )
    }
}

前端仍可使用解构语法获取坐标：

const [x, y] = canvasData.index_to_coordinate(100)

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