Setting Up A Node Typescript Project in Under 4 minutes

In recent years, Typescript has gained popularity and one of the main reason for its sudden growth has to be attributed to its strong static typing.

So in this blog post, we will be setting up a TSNode(Typescript + Node 🤓) application in less than 4 minutes(excluding external factors like internet connection, etc)

Table Of Contents

• Project Setup
• Installing Dependencies
• Setup Required JSON file

NB - Am assuming you already have node installed on your machine, if not then I recommend you download and install it here.

Project Setup

So now that you have Node installed on your machine, let's create our project directory and initialize a new node project

cd desired-folder

mkdir tsnode-project

npm init -y

NB - Supplying the -y flag i.e npm init -y lets npm use its default answers when initializing a new project.

Next, we need to set up our folder structure, which would look a little like this later on

tsnode-project
│   package.json
│   tsconfig.json    
│
└───src
│   │   index.ts
│   │
│   
└───node_modules

So run the following command to generate the various folders and files

// tsnode-project

touch tsconfig.json

mkdir src && touch index.ts

Installing Dependencies

Next, we install the necessary packages needed by typescript to work,

npm i -D typescript 
npm i -D ts-node 
npm i -D nodemon

Packages Explaination

ts-node - This package makes it possible to run typescript code without compiling it to Javascript.

nodemon - Automatically restarts the application when file changes in the directory are detected.

typescript - TypeScript compiles to readable, standards-based JavaScript.

Setup TSConfig

Now that we have the necessary packages installed, we can go ahead and set up our typescript config file. So open our tscofig.json and add the following code.

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "rootDir": "src",
    "outDir": "dist",
    "sourceMap": true,
    "resolveJsonModule": true,
    "lib": ["es6", "dom"],
    "esModuleInterop": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

If you want to know what each option mean, then head over to the typescript documentation to find out more but for now, I would only explain the rootDir and outDir options.

rootDir - This simply refers to the directory in which the typescript compiler should look for all .ts files.

outDir - This refers to the directory in which the compiled js files will be located. Feel free to change it to whatever you want.

After adding the necessary lines, we can then add a script to our package.json file which would start our server and also run a build on our application. The script would look something like this

{
  ...
  "scripts": {
    "start": "tsc && node dist/index.js",
    "dev": "nodemon --watch 'src/**/*.ts' --exec 'ts-node' src/index.ts"
  },
 ...
}

Currently, our index.ts file is empty so let's set up a basic express server.

Run npm i express -S then add the following line to the index.ts file.

// index.ts

import express from 'express';

const app = express();
const port = 4000;

app.get('/', (req, res) => {
  res.send('YAY! It actually works!');
});

app.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  return console.log(`Server is listening on ${port}`);
});

Now, we can run our server by running the command npm start

Result

All Done

And there you have it! A fully working Node TypeScript project in under 4 minutes. If for some weird reason it doesn't seem to work for you, then you can check out the code here https://github.com/theghostyced/tsnode-project-devto. Also feel free to extend the application to support tslint, prettier, etc.

So am CED and thanks for reading. If you found an issue with the post please do share.

Comments

[Kim (Hamilton) Duffy]

Thanks -- this is a handy reference. Because I'll be looking back at this a lot, I thought I should submit this (minor) fix:

Change

mkdir src && touch index.ts

to

mkdir src && touch src/index.ts