WebAssembly (Wasm) is a binary format that is designed to run in a browser or in a standalone environment. It provides a way to execute code written in languages other than JavaScript, such as C, C++, Rust, and others. TypeScript, on the other hand, is a strongly typed superset of JavaScript that adds static typing to the language. Combining these two technologies can provide a powerful toolset for developing web applications.

In this tutorial, we will explore how to use WebAssembly with TypeScript. We will create a simple project that will allow us to add two numbers using a Wasm module written in C++. This tutorial assumes that you have a basic understanding of TypeScript and are familiar with how to create a new project using Node.js and npm.


Step 1: Set Up a New TypeScript Project

To get started, we need to create a new TypeScript project. We can do this by opening a command prompt or terminal and navigating to a directory where we want to create the project. Once we are in the correct directory, we can run the following command: 

npm init -y

This will create a new package.json file in our directory. Next, we need to install the necessary dependencies for our project. We will need the following packages:

  • typescript: This is the main package for TypeScript.
  • @types/node: This package provides TypeScript definitions for Node.js.

We can install these packages by running the following command:

npm install typescript @types/node


Step 2: Install WebAssembly Support

To use WebAssembly with TypeScript, we need to install a package called @types/wasm. This package provides TypeScript definitions for WebAssembly. We can install this package by running the following command:

npm install @types/wasm

Step 3: Write the WebAssembly Module

Now that we have set up our project, we can create the WebAssembly module. For this tutorial, we will use a simple C++ program that adds two numbers. We will then compile this program to a Wasm module using emcc, the Emscripten compiler.

Create a new file called add.cpp in your project directory and add the following code:

extern "C" {
  int add(int a, int b) {
    return a + b;
  }
}

This is a simple function that takes two integers and returns their sum. We then need to compile this program to a Wasm module. To do this, we can run the following command in the terminal:

emcc add.cpp -s WASM=1 -o add.wasm

This will compile the add.cpp program to a Wasm module called add.wasm.


Step 4: Load the WebAssembly Module in TypeScript

Now that we have our Wasm module, we can load it into our TypeScript project. We will create a new file called index.ts and add the following code:

declare function add(a: number, b: number): number;

(async () => {
  const response = await fetch("add.wasm");
  const bytes = await response.arrayBuffer();
  const wasm = await WebAssembly.instantiate(bytes);

  const { add: addFunc } = wasm.instance.exports;

  console.log(addFunc(1, 2));
})();

Let's break this down. The first line declares a function called add that takes two numbers and returns a number. This function will be provided by our Wasm module.

We then create an immediately invoked function expression (IIFE) that will load the Wasm module. First, we fetch the add.wasm file using the fetch API. We then convert the response to an ArrayBuffer using the arrayBuffer() method. Next, we instantiate the Wasm module using the WebAssembly.instantiate() method and pass the ArrayBuffer as an argument. This will return an object that contains the exported functions and memory of the Wasm module.

We then destructure the add function from the exported functions and assign it to a variable called addFunc. Finally, we log the result of calling the addFunc function with the arguments 1 and 2.


Step 5: Compile and Run the TypeScript Project

To compile and run the TypeScript project, we need to create a tsconfig.json file in our project directory. Add the following code to the file:

{
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "strict": true
  }
}

This tells TypeScript to target ECMAScript 2017 and use ES2015 modules. We also set the strict option to true to enable strict type checking.

To compile the project, we can run the following command:

npx tsc

This will generate a index.js file in the dist directory. To run the project, we can use the node command:

node dist/index.js

This should output 3 to the console, which is the result of adding 1 and 2 using our Wasm module.


Conclusion

In this tutorial, we learned how to use WebAssembly with TypeScript. We created a simple project that demonstrates how to load a Wasm module and call a function from TypeScript. While this is a simple example, it provides a starting point for using WebAssembly in more complex projects. With the power of WebAssembly and the type safety of TypeScript, we can build faster, more efficient web applications.