WebAssembly + Rust + TypeScript project setup

I created a repository with example project which you can find here: web-assembly-rust-typescript-template

What you will need:

• npm and node.js
• rust and cargo
• wasm-pack
• webpack 5

How to set up project

Set-up

Web - TypeScript part

1. Initialize npm project
   

      npm init -y
   

2. Install the following dependencies
   

      npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin ts-loader typescript
   

3. Create index.js file and export your App (this will be an entry point of your application)
   

      export { App } from './App';
   

4. Create bootstrap.ts file in which you will import your index.js asynchronously. We have to load the app asynchronously because .wasm files have to be loaded asynchronously
   

      import('./index').catch(e => console.error('Error importing **index.ts**:', e));
   

5. Create webpack.config.js. Here we have to use experimetns: syncWebAssembly to load our .wasm files
   

      experiments: {
            syncWebAssembly: true
          }
   

6. Add serve and build script to your package.json
   

      "scripts": {
            "serve": "webpack serve",
            "build": "webpack"
          }
   

WebAssembly - Rust part

1. In root of your project create wasm project using wasm-pack
   

      wasm-pack new name-of-package
   

2. Go to package directory
   

   cd ./name-of-package
   

3. Run wasm-pack build to build your wasm package

Link wasm-package with TypeScript code

1. Install your wasm package (if you publish your wasm package then you can install it via npm)
   

      npm install wasm-package-name/pkg
   

2. Make sure that you can find this dependecy in your package.json
   

      "dependencies": {
        "wasm-package-name": "file:./wasm-package-name/pkg"
      }
   

3. Make sure you have "moduleResolution": "node" in your tsconfig.json

Summary

If you followed all those steps you should have all typing hints from your wasm-package in your typescript project