Interactive TypeScript programming with IDE
Tags: typescript, node
Published: 2020-01-02 22:06:38

---
title: Interactive TypeScript programming with IDE
published: true
description: Setup minimal TypeScript project with auto-reload, for convenient experimentation with the code
tags: TypeScript, nodejs
---

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](https://prettier.io/) 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](https://thepracticaldev.s3.amazonaws.com/i/xczwdm9bcy6q1fwpmxyu.png)

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

![Enable format on save](https://thepracticaldev.s3.amazonaws.com/i/b150xrz0cfxuj723n8f1.png)

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

```bash
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:


```bash
npm init
```

Confirm defaults to all questions in prompt.


2) Generate TypeScript config file.

```bash
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: 


```json
{
  "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](https://www.npmjs.com/package/nodemon) and [concurrently](https://www.npmjs.com/package/concurrently).

```bash
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`


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

```js
console.log('Hello World!');
```

Now, run in terminal: 

```bash
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
```