DEV Community

Cover image for Setup TypeScript Playground on your local system
Ashutosh Dwivedi
Ashutosh Dwivedi

Posted on

Setup TypeScript Playground on your local system

You can setup a really nice TypeScript playground in just 3 simple and easy to follow steps.
But,
Before following the steps it is assumed that you already have npm setup in your local machine.

So, jump in and let's get it started.

Step 1

If you don't have TypeScript Compiler installed in your local machine you can download in just one command on your terminal (or command prompt). That is,

                    > npm install -g typescript
Enter fullscreen mode Exit fullscreen mode

After installation check, if it is installed correctly or not by

                             > tsc -v
Enter fullscreen mode Exit fullscreen mode

(In case you are facing any error just google it or comment below)

Step 2

After having TypeScript Compiler in your local machine.

Open up the terminal (or command prompt) and install, nodemon and ts-node

                 > npm install -g nodemon ts-node
Enter fullscreen mode Exit fullscreen mode

nodemon: nodemon is a tool that helps develop node.js based applications by automatically restarting the node application when file changes in the directory are detected.

ts-node: TypeScript execution and REPL for node.js, with source map support. Works with typescript@>=2.7.

Step 3

Last step:
Create a directory inside which you want to play with TypeScript.

  • Create a file inside the created directory with extension .ts and write some pseudo code, like
const arr: number[] = [2, 3, 4, 5, 6, 7, 8, 9];

for (let a in arr) {
  console.log(arr[a]);
}
Enter fullscreen mode Exit fullscreen mode

Save the file and open up the terminal (inside the created folder, for example: C:\Users\TS_Playground> )
And run,

             C:\Users\TS_Playground> nodemon sample.ts
Enter fullscreen mode Exit fullscreen mode

And the script will run as long as you want. If you want to terminate the process just press Ctrl+C in terminal or command prompt.

So, go -> code -> make changes -> save and see the result in the console.

That's it.

Happy Coding 🙂.

Top comments (5)

Collapse
 
catillery profile image
Christopher Tillery • Edited

Nice solution for those working exclusively in a terminal - if you use VSCode, I suggest giving the Quokka extension a try.

(Not affiliated in any way)

Collapse
 
arcbjorn profile image
Arc • Edited

Wow thats quite nice ;)

Collapse
 
ashutosh00710 profile image
Ashutosh Dwivedi

Really cool extension. Thanks for the recommendation 🙂.

 
ashutosh00710 profile image
Ashutosh Dwivedi

Oh! Sorry I've never tried

Collapse
 
ashutosh00710 profile image
Ashutosh Dwivedi • Edited

Hi 🙂, Arthur EICHELBERGER
But, If I am not wrong it is for JavaScript. Right ?
Anyways, RunJS is still new for me. Thank You.