DEV Community

loading...
Cover image for Setup TypeScript Playground on your local system

Setup TypeScript Playground on your local system

ashutosh00710 profile image Ashutosh Dwivedi ・2 min read

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

Discussion

pic
Editor guide
Collapse
catillery profile image
Christopher Tillery

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

Wow thats quite nice ;)

Collapse
ashutosh00710 profile image
Ashutosh Dwivedi Author

Really cool extension. Thanks for the recommendation 🙂.

Collapse
arthureichelberger profile image
Arthur EICHELBERGER

Hi!

You should take a look at RunJS !

Collapse
ashutosh00710 profile image
Ashutosh Dwivedi Author

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

Collapse
arthureichelberger profile image
Arthur EICHELBERGER

It handles Typescript as well!

Thread Thread
ashutosh00710 profile image
Ashutosh Dwivedi Author

Oh! Sorry I've never tried