DEV Community

Marcin Piczkowski
Marcin Piczkowski

Posted on

Interactive TypeScript programming with IDE

In this post I want to prepare small project setup for interactive experiments with TypeScript code without a need of manual stop - compile - start loop.

You can compare it to a JavaScript shell in browser or other programming languages "read-evaluate-print-loop" shells, but all inside your favourite editor.


As a side note, if you're using VSCode editor, I also recommend installing Prettier extension and turning on code formatting on-save feature.
To do so you need to open Settings:

  • On Windows/Linux - File > Preferences > Settings
  • On macOS - Code > Preferences > Settings

Open settings

Then type "format" in search field and mark "Format on Save".

Enable format on save


In my working project I want to have the following goodies:

  • auto-build (or rather should say transpile) from TypeScript to JS and reload file on save
  • auto-execute on file save

First, you should have nodejs installed. The fresher version the better.

Next, install TypeScript compiler (tsc)

npm i -g tsc
Enter fullscreen mode Exit fullscreen mode

Now it's time to create first demo project.

1) Use npm to generate fresh project

Create a new folder demo-project.
In the folder start shell and run:

npm init
Enter fullscreen mode Exit fullscreen mode

Confirm defaults to all questions in prompt.

2) Generate TypeScript config file.

tsc --init
Enter fullscreen mode Exit fullscreen mode

It will create tsconfig.json
In this file we have to update two lines:

 "outDir": "./build",                        
 "rootDir": "./src", 
Enter fullscreen mode Exit fullscreen mode

It is setting a location where we keep our source files and where to put target JavaScript files. Separating them is a good practice not to get lost in a mess of .js mixed with .ts files in a single folder.

Finally, the file should look like below:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
  }
}

Enter fullscreen mode Exit fullscreen mode

We also need to create src and build folders in project root folder.

3) Install required modules for build and reload

We will use nodemon and concurrently.

npm i --save-dev nodemon concurrently

Enter fullscreen mode Exit fullscreen mode

4) Configure build and run scripts

We will add a few scripts for convenient build and run with single command. The run scripts will take JavaScript file from ./build folder.

Let's put the following lines in package.json

"scripts": {
    "start:build": "tsc -w",
    "start:run": "nodemon build/index.js",
    "start": "concurrently npm:start:*"
  },

Enter fullscreen mode Exit fullscreen mode

Whenever you run in bash npm start then two processes will execute concurrently:

  • TypeScript files are transpiled to JavaScript (tsc -w), the -w flag means "watch mode" - an updated file will be recompiled automatically. tsc will take files from ./src folder and put target JS file in ./build folder thanks to tsconfig.json settings.

  • nodemon will restart application from JavaScript source (./build/index.js)

The argument npm:start:* passed in the command means that concurrently will look into scripts defined in package.json and run each script which has a pattern of start:*, in our case start:build and start:run.

At this point you should have a template for any future project ready.

Let's check how it works.

Create index.ts file in ./src folder, then add one line, e.g.:

console.log('Hello World!');
Enter fullscreen mode Exit fullscreen mode

Now, run in terminal:

npm start
Enter fullscreen mode Exit fullscreen mode

The first time you run it you may see an error, because concurrently tries to start an app from ./build/index.js before it is even transpiled by TypeScript, but the second time you run the command you can see that if you update index.ts the file will be auto-compiled and executed.

This is a good start for interactive TypeScript programming without necessity to manually build and start program every time something has changed.

What next ?

If you're going to use some core nodejs features from TypeScript, e.g. read/write files with fs library, you'll have to install nodejs definitions:

npm i @types/node
Enter fullscreen mode Exit fullscreen mode

Top comments (0)