Start and Setup a NodeJs Typescript Project
Tags: webdev, typescript, node, beginners
Published: 2023-02-06 12:18:49

Start a new project usually involves a serie of commands and not always we remember all this commands and the main dependencies that we normally use.

This article show us one of many ways to start and setup a new NodeJs Typescript project.

Before this, some fast definitions of the tools we will use:

- NodeJs

> "NodeJs is an open-source, cross-platform JavaScript runtime environment."

In other words, NodeJs allow us use Javascript in the server-side, without the need of a web browser.

- Typescript

Typescript is a superset of JavaScript, this basically means that the Typescript adds static typing on top of JavaScript.

**Note: This article assumes that you already have NodeJS and some package manager installed on your machine. If you doesn't, check this links first:**

[NodeJs/NPM](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)

[Yarn](https://yarnpkg.com/getting-started/install)

---

## Commands to start a NodeJS TS Project

- TS/Node dependencies

```
yarn add typescript ts-node ts-node-dev @types/node 
```
OR
```
npm i typescript ts-node ts-node-dev @types/node
```

## tsconfig.json

Create **tsconfig.json** (Visit https://aka.ms/tsconfig.json to read more about this file) file in the root directory of your project with the following structure: 

```
{
  "compilerOptions": {
    /*Basic Options*/
    "target": "es2018",   /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */   
    "allowJs": true,      /* Allow javascript files to be compiled. */    
    "outDir": "./dist",   /* Redirect output structure to the directory. */
    "rootDir": "./src",   /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */  

    /* Strict Type-Checking Options */
    "strict": true,       /* Enable all strict type-checking options. */    
    "esModuleInterop": true,   /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */    

    /* Advanced Options */
    "skipLibCheck": true,  /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true   /* Disallow inconsistently-cased references to the same file. */
  }
}

```

According to this configuration you should write your code in **src/** folder and should have an entry point file called **server.ts** inside.


Our project structure should be similar to this:

```
.
├── src
     ├── server.ts
```

Inside the file **server.ts** we could put a simple log just to got a return when we run the server.

```
console.log("Server is Up");
```

## package.json

Add **dev**, **dev:debug** and **build** scripts to your **package.json** file, 

- **Dev**: Uses **ts-node-dev** to start a dev server that automatically transpiles your **.ts** files to **.js** whenever you edit something. (More info at https://www.npmjs.com/package/ts-node-dev)
- **Build**: Uses **tsc** to transpile your whole application to **.js**, is used when you want to deploy to production. (More info at https://www.typescriptlang.org/docs/handbook/compiler-options.html)
- **Dev:debug**: Uses **ts-node-dev --inspect** to start a debug function at port defined after '=' in inspect flag.

``` JSON
"scripts": {
    "dev": "ts-node-dev --respawn src/server.ts",
    "dev:debug": "ts-node-dev --inspect=0.0.0.0:9229 src/server.ts",
    "build": "tsc",
    "start": "node dist/server.js"
  }
```

## Run

```
npm run dev
```
OR
```
yarn dev
```

## Dev:debug

```
npm run dev:debug
```
OR
```
yarn dev:debug
```

## Build
```
npm run build
```
OR
```
yarn build
```
---

## Optional

These steps above are enough to start and run a NodeJS Typescript project, it's a 'clean' install. But, normally, we want start a project with some dev dependencies.

The following steps are optional and will install some dependencies commonly used with NodeJS.

- Express => NodeJs framework to handling with routes (http://expressjs.com/)

```
npm i express --save
```
OR
```
yarn add express -D
```

- Sequelize or TypeORM => ORMs (https://sequelize.org/) || (https://typeorm.io/#/)

```
npm i sequelize --save
```
OR
```
npm i typeorm --save
```
OR
```
yarn add sequelize -D
```
OR
```
yarn add typeorm -D
```

Some other dependencies often used with NodeJS/Typescript project:

- Eslint => Identify code patterns in disagreement with pre-established rules (https://eslint.org/) 
- PostgreSql or MongoDB => Relational Database and NoSql Database (MongoDb)

---

## Extra

### NPM Package 

If you are writing a npm package specify **main** and **types** path and add **--declaration** to your build script in order to generate types suggestions to who is using your package.

**package.json**
``` JSON
"main" : "dist/index.js",
"types" : "dist/index.d.ts",
"scripts": {
    "build": "tsc --declaration"
  }
```
---

## Concluding

This is one of many ways to start and setup a new NodeJs Typescript project, you can do the same in different ways even faster. But, I like to do in this way because is more "step-by-step" form. 

Reviews, suggestions and/or contributions to this article are encouraged and welcome.
 
---

## References

[NodeJS](https://nodejs.org/en/)
[Typescript](https://www.typescriptlang.org/)