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>

https://www.assemblyscript.org/editor.html#IyFvcHRpbWl6ZT1zcGVlZCZydW50aW1lPXN0dWIKLyoqIENhbGN1bGF0ZXMgdGhlIG4tdGggRmlib25hY2NpIG51bWJlci4gKi8KZXhwb3J0IGZ1bmN0aW9uIGZpYihuOiBpMzIpOiBpMzIgewogIHZhciBhID0gMCwgYiA9IDEKICBpZiAobiA+IDApIHsKICAgIHdoaWxlICgtLW4pIHsKICAgICAgbGV0IHQgPSBhICsgYgogICAgICBhID0gYgogICAgICBiID0gdAogICAgfQogICAgcmV0dXJuIGIKICB9CiAgcmV0dXJuIGEKfQojIWh0bWwKPHRleHRhcmVhIGlkPSJvdXRwdXQiIHN0eWxlPSJoZWlnaHQ6IDEwMCU7IHdpZHRoOiAxMDAlIiByZWFkb25seT48L3RleHRhcmVhPgo8c2NyaXB0IHR5cGU9Im1vZHVsZSI+CmNvbnN0IGV4cG9ydHMgPSBhd2FpdCBpbnN0YW50aWF0ZShhd2FpdCBjb21waWxlKCksIHsgLyogaW1wb3J0cyAqLyB9KQpjb25zdCBvdXRwdXQgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnb3V0cHV0JykKZm9yIChsZXQgaSA9IDA7IGkgPD0gMTA7ICsraSkgewogIG91dHB1dC52YWx1ZSArPSBgZmliKCR7aX0pID0gJHtleHBvcnRzLmZpYihpKX1cbmAKfQo8L3NjcmlwdD4=

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>