Targets · TypeScript · Keywords
Keywords
How each of Program's keywords is rendered into TypeScript.
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
NATIVEfunctions. - 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.
Program keywords in TypeScript
Each keyword renders as it does in JavaScript, with Program's types written out. The declarations gain annotations and generics; the reactive keywords are the same runtime calls, typed.
| Keyword | Rendered TypeScript |
|---|---|
MODULE | A nested namespace: export namespace Ui.Button.Integer { … }. |
TYPE | A record becomes class Point { constructor(public x: number, public y: number) {} }; a union becomes a discriminated union type plus one constructor per option. |
FUNCTION | function Name(…): ReactiveValue<T> { … return … }. |
NATIVE | A function whose body is the ts row, or the js row reused (valid TypeScript). |
INPUT | A typed parameter; a BINDING input is read and written. |
HOLE | A typed trailing callback parameter. |
LET | const name: ReactiveValue<T> = …;. |
STATE | const name = Reactive.State<T>(value);. |
REVERSE | A write-back whose closing SET is Reactive.Set(state, value). |
WITH | Module.With(Name, Replacement, () => { … }). |
See JavaScript keywords for the per-keyword detail and the modifiers; TypeScript differs only in the annotations carried alongside.