TypeScript & WebAssembly All In One
TypeScript & WebAssembly All In One
AssemblyScript
https://www.assemblyscript.org/
/** Calculates the n-th Fibonacci number. */
export function fib(n: i32): i32 {
var a = 0, b = 1
if (n > 0) {
while (--n) {
let t = a + b
a = b
b = t
}
return b
}
return a
}
$ asc module.ts --textFile module.wat --outFile module.wasm --bindings raw -O3 --runtime stub
;; INFO asc module.ts --textFile module.wat --outFile module.wasm --bindings raw -O3 --runtime stub
(module
(type $i32_=>_i32 (func (param i32) (result i32)))
(memory $0 0)
(export "fib" (func $module/fib))
(export "memory" (memory $0))
(func $module/fib (param $0 i32) (result i32)
(local $1 i32)
(local $2 i32)
(local $3 i32)
i32.const 1
local.set $1
local.get $0
i32.const 0
i32.gt_s
if
loop $while-continue|0
local.get $0
i32.const 1
i32.sub
local.tee $0
if
local.get $1
local.get $2
i32.add
local.set $3
local.get $1
local.set $2
local.get $3
local.set $1
br $while-continue|0
end
end
local.get $1
return
end
i32.const 0
)
)
<textarea id="output" style="height: 100%; width: 100%" readonly></textarea>
<script type="module">
const exports = await instantiate(await compile(), { /* imports */ })
const output = document.getElementById('output')
for (let i = 0; i <= 10; ++i) {
output.value += `fib(${i}) = ${exports.fib(i)}\n`
}
</script>
WASM
(module
(func (param $lhs i32) (param $rhs i32) (result i32)
local.get $lhs
local.get $rhs
i32.add))
function computeSum(arr: i32[]): i32 {
var sum = 0
arr.forEach(value => {
sum += value // fails
})
return sum
}
var sum: i32 // becomes a WebAssembly Global
function computeSum(arr: i32[]): i32 {
sum = 0
arr.forEach(value => {
sum += value // works
})
return sum
}
//..................
function computeSum(arr: i32[]): i32 {
var sum = 0
for (let i = 0, k = arr.length; i < k; ++i) {
sum += arr[i] // works
}
return sum
}
npm
$ npm init
$ npm i @assemblyscript/loader
$ npm i -D assemblyscript
$ npx asinit .
$ npm run asbuild
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p class="title">Web Assembly Example</p>
<script>
WebAssembly.instantiateStreaming(fetch("./build/optimized.wasm"), {
main: {
sayHello() {
console.log("Hello from WebAssembly!");
}
},
env: {
abort(_msg, _file, line, column) {
console.error("abort called at main.ts:" + line + ":" + column);
}
},
}).then(result => {
const exports = result.instance.exports;
document.getElementById("container").textContent = "Result: " + exports.add(19, 23);
}).catch(console.error);
</script>
<p id="container"></p>
</body>
</html>
blogs
https://www.assemblyscript.org/
https://github.com/AssemblyScript/assemblyscript
https://bit.dev/
https://github.com/teambit/bit
https://blog.bitsrc.io/typescript-to-webassembly-the-what-the-how-and-the-why-3916a2561d37
refs
https://www.cnblogs.com/xgqfrms/p/16660263.html
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/13788312.html
未经授权禁止转载,违者必究!