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 totsconfig.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
Top comments (0)