A playground for TypeScript with the Monaco Editor.
See the playground in action: https://fabiandev.github.io/typescript-playground
The current URL can always be used to share your changes, including options.
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);Each step may also be performed individually:
tsp.options.compilerOptions.emitDecoratorMetadata = true;
tsp.sync(); // Sync options with the editor
tsp.emit(); // Compile TypeScript codeAlso it is possible to run the current code via the global object:
tsp.run(); // Run target code in a windowIf 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.