AssemblyScript - TypeScript to Wasm Compiler

Mar 02, 2020 • ☕️ 2 min read

AssemblyScript is a compiler which architecture differs from a JavaScript VM in that it compiles a program ahead of time, quite similar to other static compilers. One can think of it as a mix of TypeScript’s syntax and C’s capabilities.

On top of WebAssembly types, it not only provides low-level built-ins to access WebAssembly features directly, making it suitable as a thin layer on top of Wasm, but also comes with its own JavaScript-like standard library, making it suitable for non-browser use cases, along a relatively small managed runtime (with memory management and garbage collection) enabling the creation of programs that look and feel much like TypeScript.

The compiler still has its limitations and we are waiting for WebAssembly features that are currently undergoing specification.

WebAssembly is fundamentally different from JavaScript, ultimately enabling entirely new use cases not only on the web. Consequently, AssemblyScript is much more similar to a static compiler than it is to a JavaScript VM. One can think of it as if TypeScript and C had a somewhat special child.

Unlike TypeScript, which targets a JavaScript environment with all of its dynamic features, AssemblyScript targets WebAssembly with all of its static guarantees, hence intentionally avoids the dynamicness of JavaScript where it cannot be compiled ahead of time efficiently.

npm install --save-dev assemblyscript

Similar to TypeScript’s tsc compiling to JavaScript, AssemblyScript’s asc compiles to WebAssembly. Let’s create our hello-world.ts AssemblyScript file:

// This exports an add function.
// It takes in two 32-bit integer values
// And returns a 32-bit integer value.
export function add(a: i32, b: i32): i32 {
  return a + b
}

Then, let’s compile that into a wasm module, using the AssemblyScript Compiler, which will output a hello-world.wasm:

asc hello-world.ts -b hello-world.wasm

This is great for TypeScript and JavaScript developers who want to write WebAssembly, without learning a new language.

Reading More

Cracking The Frontend Interview, Part 3: CSS

An overview look at core CSS topics that help you ace the frontend interview

On temptation of Dark Mode

You don't know whether Dark Mode is overhyped or necessary but you know there is a real temptation of adding it to your sites

Beloved CSS Frameworks

Pros and cons of using CSS frameworks like Bootstrap, Foundation, Materialize CSS, Semantic UI, Tailwind, Ant Design

The hype microservices. Should I switch to it?

Microservices are an architectural and organizational approach to software development where software is composed of small independent services that communicate over well-defined APIs