Click here to play
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);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, force = false) | Resets the editor and optionally reloads the page |
| setCompilerOption(option, value) | Set any compiler option programatically |
| changeTsVersion(version) | Reloads page with ?ts=version query string |
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
$ yarnYou may also use
npm installinstead 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 buildis 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.