DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for An Enhanced TypeScript Playground
Nick Taylor
Nick Taylor

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.


TypeScript playground

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 on

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 Author

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 Author

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 Author

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

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›