Setup Nodejs + Typescript development environment

Here is the summary:

1. Install Nodejs
2. Initialize Javascript project
3. Convert to Typescript
4. Install ts-node

Prerequisite

You would need a code editor installed on your system. I personally recommend Visual Studio Code as it has amazing support for Typescript.

Install Nodejs

Nodejs can be downloaded and installed from here. It will also include NPM (node package manager) and other utilities.

Initialize Javascript project

1- Create a directory for the project and move into it.

$ mkdir typescript-starter
$ cd typescript-starter

2- Initialize the project using npm

$ npm init -y

It will create the package.json file.

3- Open the project in VSCode.

$ code .

4- Create a Javascript file called index.js with the following code

console.log('Hello World');

5- Add the following line to package.json file.

"start": "node index.js",

package.json file should look like this now.

{
  "name": "typescript-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

6- The setup for Javascript project is complete and we can run it with the following command.

$ npm start

We get the ‘Hello World’ printed on the terminal.

We can also debug the code by clicking on the debug button that appears in package.json above the scripts and then selecting ‘start’ from the popup.

Convert to Typescript

Now we are going to convert the project to use Typescript instead of Javascript.

1- Install Typescript.

$ npm install -D typescript

2- Create tsconfig.json file in the project root directory.

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

Notice the ‘outDir’ attribute above. It is the directory where code transpiled from TypeScript to JavsScript will be stored.

3- Convert the index.js file to index.ts

4- Change the ‘start’ script in the package.json to setup transpiling TypeScript to JavaScript and running your program accordingly.

"start": "tsc && node dist/index.js",

tsc is the TypeScript compiler for converting the code to Javascript. Nodejs is launched afterwards to execute the generated JavaScript file.

Install ts-node

ts-node allows us to run TypeScript code without generating the JavaScript files. JavaScript code is still generated by ts-node and passed on to Nodejs for execution, but it is hidden from the developer, making developer workflow a bit simpler.

Let’s start by installing ts-node

npm install -D ts-node

-D will add the dependency to the devDependencies section, not to the production one.

Finally, change the ‘start’ script in package.json file as shown below.

{
  "name": "typescript-starter",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "ts-node index.ts",
    "prod": "tsc && node dist/index.js",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "ts-node": "^8.10.2",
    "typescript": "^3.9.5"
  },
  "dependencies": {}
}

Note: ts-node should only be used in the development environment. Therefore, we have another entry in the scripts section for production which relies on transpiling to JavaScript and running Nodejs.