DEV Community

Cover image for An Enhanced TypeScript Playground
Nick Taylor
Nick Taylor Subscriber

Posted on • Originally published at iamdeveloper.com on

5 3

An Enhanced TypeScript Playground

As I was going through my Twitter feed earlier this evening, a tweet from someone I follow popped up.

I was like, hey, that looks pretty cool. So I asked Steven if he had created it, to which he replied.

In a nutshell, typescript-play is like the official TypeScript playground but with some great enhancements:

  • All strict options turned on by default
  • More available compiler options
  • Ability to switch TypeScript version
  • More space for code
  • More examples
  • Quicker sharing, URL updates as you type
  • Shorter sharing URLs

What's even cooler is the fact that it's open sourced, so you can deploy it locally.

GitHub logo agentcooper / typescript-play

Better TypeScript playground

⚠️ Please use the offical TypeScript playground, now it has all the same features and even more. Use https://github.com/microsoft/TypeScript-Website/issues for issues and questions.


A better TypeScript playground.

Website: https://typescript-play.js.org.

Differences from https://www.typescriptlang.org/play:

  • All strict options turned on by default
  • More available compiler options
  • Ability to switch TypeScript version
  • More space for code
  • More examples
  • Quicker sharing, URL updates as you type
  • Shorter sharing URLs

Getting started

npm install
npm run setup
npm start

Updating TypeScript

Playground relies on UNPKG to fetch monaco-editor (contains typescript through monaco-typescript package).

In case if monaco-editor is not updated to the latest TypeScript, the latest version can be built with npm run get-typescript latest and served locally If you run into errors, the latest monaco version may be incompatible with the latest typescript version, in which case you'll need to update monaco-typescript upstream, or apply a patch locally (see the …

Kanye West Awesome from giphy

If you don't feel like cloning it, check it out at typescript-play.js.org.

Happy coding!

Photo by Jorge Gonzalez on Unsplash

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (7)

Collapse
 
qm3ster profile image
Mihail Malo • Edited

Would be cool if it included typescript@next, not stopped at an old stable version.
I understand it wouldn't be hard to update, but I meant specifically tracking every @next release :)

I do prefer the UI and other features like strict.

Collapse
 
nickytonline profile image
Nick Taylor

Sounds like a great idea if you wanted to try upcoming features.

You can always open an issue or put up a PR. 😎

Collapse
 
styfle profile image
Steven

Hey that’s me! 😊

A quick update: the 3rd party playground has been merged into the official playground so all the features are available thanks to Agent Cooper and Orta 🎉

Collapse
 
nickytonline profile image
Nick Taylor

Yeah, I saw that a little while back and it also looks like Orta has been doing a tonne of work there and in the docs. 👏

Also, welcome to DEV 👋

Collapse
 
styfle profile image
Steven

Thanks! This DEV community might make me start blogging again. My current blog has spider webs and that’s not just for Halloween 🕸 👻

Thread Thread
 
nickytonline profile image
Nick Taylor

You can also cross-post here. That is what I do. I've got a Gatsby blog, iamdeveloper.com, set up and then whenever I post something, I can sync it here and tweak it a little bit.

Also, you can even use the platform as your content and publish an external blog using Stackbit. @ben wrote a post about this recently.

It'd be great to get some of your writing here. Maybe even get the Zeit org to cross-post here. 😉

Thread Thread
 
styfle profile image
Steven

Thanks for the cross-posting idea! I finally wrote a blog post 😅

dev.to/styfle/website-redesign-3-0...

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs