A playground for TypeScript with the Monaco Editor.
See the playground in action: https://fabiandev.github.io/typescript-playground
A shareable URL can be obtained from the settings of the editor.
The playground supports some compiler options out of the box. Anyway, a property tsp
is exposed to the global window
object, where it is possible to set any option not supported by the UI:
tsp.setCompilerOption('emitDecoratorMetadata', true);
Besides setting compiler options via setCompilerOption
, the editor exposes some more functionality:
Property | Description |
---|---|
options | Holds all options of the editor, including compiler options |
sync() | Syncs (changed) options with the editor |
emit() | Triggers a compilation |
run() | Runs the compiled code in a window |
share() | Retrieves a shareable URL as string |
reset(reload = false) | Resets the editor and optionally reloads the page |
If you want to contribute to this project, it is easy to set it up on your system.
Simply clone the repository and install its dependencies.
$ git clone https://github.com/fabiandev/typescript-playground.git
$ cd typescript-playground
$ yarn
You may also use
npm install
instead ofyarn
You can set the configuration for the build in config.js
:
Option | Description |
---|---|
paths | The relative source and destination paths |
monaco | Location of the editor |
typescript | Options for building TypeScript files |
webpack | The settings for bundling the app |
replace | Data for preprocess, applied to all files other than assets |
To start a build, run yarn build
.
npm run build
is also a possible command.
To run tasks while developing, use yarn watch
.
With yarn serve
a dev server with live reload can be started, to preview the project locally.