Project setup

Contents

How a Program becomes TypeScript, in parts. Start with the introduction, then follow each part into the rendered output and the runtime it links against.

• Introduction — what the TypeScript target is, and how to read the rest of this section.
• Capabilities — which high-level features are possible, built in or through a library.
• Example — a full program using every keyword, and the TypeScript it renders to.
• Naming considerations — how Program's dotted names are carried into TypeScript.
• Entry point — starting a program and attaching it to a root element.
• Drivers — the native drivers that provide the interface, animation and network.
• Runtime — the Reactive and Context machinery the rendered code links against.
• Native modules — the hand-written JavaScript behind NATIVE functions.
• Keywords — how each of Program's keywords renders to TypeScript.
• Project setup — the files and commands to build and run the rendered program.
• Reserved words — the words TypeScript keeps for itself, and how a colliding name is escaped.

The files

Unlike the browser JavaScript target, TypeScript needs a compile step, so a project carries a package manifest and a compiler configuration.

my-app/
  package.json          // dependencies and scripts
  tsconfig.json         // compiler options
  src/
    runtime.ts          // the runtime (Reactive + Context + drivers), typed
    app.ts              // the rendered program
    main.ts             // Program.Application(() => Main(), [ Ui.Dom.Driver('app') ])
  index.html            // loads the built bundle (browser)

// package.json
{
  "name": "my-app",
  "scripts": {
    "build": "tsc",
    "bundle": "esbuild src/main.ts --bundle --outfile=dist/app.js"
  },
  "devDependencies": { "typescript": "^5", "esbuild": "^0.20" }
}

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "outDir": "dist"
  },
  "include": ["src"]
}

Build and run

Type-check and emit JavaScript with the compiler, then run the result exactly like the JavaScript target — open the page in a browser, or run it under Node.

npm install
npm run build       # tsc: type-check + emit dist/*.js
npm run bundle      # optional: one file for a <script> tag
# browser: open index.html   ·   server: node dist/main.js

The type checking is the point: because Program's types are carried through, the build fails loudly if the interface, a driver, or a native signature is wired up wrongly — before anything runs.