Setting Up A Node Typescript Project in Under 4 minutes
Tags: typescript, node, codenewbie, javascript
Published: 2019-07-15 22:00:31

In recent years, [Typescript](https://www.typescriptlang.org) has gained popularity and one of the main reason for its sudden growth has to be attributed to its [strong static typing](https://www.sitepoint.com/typing-versus-dynamic-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](#chapter-1)
  * [Installing Dependencies](#chapter-2)
  * [Setup Required JSON file](#chapter-3)


**NB** - Am assuming you already have node installed on your machine, if not then I recommend you [download and install it here](https://nodejs.org/en/).

<a name="chapter-1"></a>

### Project Setup 

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

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

``` bash
// tsnode-project

touch tsconfig.json

mkdir src && touch index.ts

```

<a name="chapter-2"></a>

### Installing Dependencies 


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

``` bash

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.


<a name="chapter-3"></a>

### 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.

``` json
{
  "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](https://www.typescriptlang.org/docs/handbook/compiler-options.html) 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

``` json

{
  ...
  "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](https://expressjs.com/).

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


``` js

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


![](https://thepracticaldev.s3.amazonaws.com/i/zmwfisedhgfv5qu2bb95.png)


# 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](https://twitter.com/theghostyced) and thanks for reading. If you found an issue with the post please do share.