Welcome to the new Golem Cloud Docs! 👋
Documentation
Building Components
Tier 1
TypeScript

Typescript

Typescript can be used as a Tier 1 guest language.

The tools used in this guide are:

  • @bytecodealliance/jco - Convert Javascript to WASM Components
  • @bytecodealliance/componentize-js - JavaScript Componentization Tool

The easiest way to get started once the tooling is installed is to use the golem-cli new command as described in the Quickstart.

View the available examples with:

golem-cli list-examples --language typescript

Then generate a new example project with:

golem-cli new --example ts-actor-minimal --component-name ts-component

Manual Installation

Here's the target project structure

    • main.ts
      • golem-component-api.d.ts
    • main.wit
  • package.json
  • tsconfig.json

    • Add a package.json file

    package.json
    {
  "type": "module",
  "scripts": {
    "build": "tsc && jco componentize -w wit -o out/component.wasm out/main.js"
  },
  "devDependencies": {
    "@bytecodealliance/componentize-js": "0.8.3",
    "@bytecodealliance/jco": "1.1.1"
  }
}

    Add a tsconfig.json file

    Changing the outDir will require a change in the build script in your package.json file.

    tsconfig.json
    {
  "compilerOptions": {
    "target": "es2022",
    "module": "es2022",
    "rootDir": "src/",
    "outDir": "./out/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts"]
}

    Install Dependencies

    npm install

    Create a WIT File

    Create a WIT file in the wit directory, for example wit/main.wit:

     
package golem:component;
 
interface api {
  add: func(value: u64);
  get: func() -> u64;
}
 
world demo  {
  export api;
}

    Generate the stub for your WIT file

    This will create typescript definitions for your WIT file, and add a main.ts file.

    npx jco transpile wit --no-namespaced-exports --stub --name main -o src && rm src/main.js && mv src/main.d.ts src/main.ts

    This will generate Typescript types in the src/interfaces directory.

    Implement your component

    The generated stub will look like this

    import { GolemComponentApi } from "./interfaces/golem-component-api.js"
export const api: typeof GolemComponentApi

    An example implementation could look like this:

    import { GolemComponentApi } from "./interfaces/golem-component-api.js"
 
let state: number = 0
 
export const api: typeof GolemComponentApi = {
  add(value) {
    console.log(`Adding ${value} to the counter`)
    state += Number(value)
  },
  get() {
    console.log(`Returning the current counter value: ${state}`)
    return BigInt(state)
  },
}

    Build the Component

    This will compile your Typescript and generate the WASM file in the out directory.

    npm run build

    Using Additional WIT Files (Optional)

    We don't have a way of automatically generating the typescript definitions for additional WIT files yet.

    They work the same as in Javascript. You can use them, but you'll have to provide the types yourself

    See these Github issues for more information

    ScalaZig