DEV Community

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

Posted on • Originally published at iamdeveloper.com on

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

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...