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

Then type "format" in search field and mark "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

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

Confirm defaults to all questions in prompt.

2) Generate TypeScript config file.

tsc --init

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

 "outDir": "./build",                        
 "rootDir": "./src", 

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

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

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:*"
  },

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!');

Now, run in terminal:

npm start

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