How to setup a NodeJS project with Typescript

aryclenio

Ary Barros

Posted on June 21, 2020

How to setup a NodeJS project with Typescript

Increasingly, typescript becomes a market trend and many developers are looking to create and refactor their projects to suit the new typescript features. In this post, you will learn how to create and consequently convert your NodeJS project to Typescript and take advantage of the features of a typed language.

Step 1: Install Yarn and start the Typescript project

The first task to follow is the initialization of the npm project, which can be created by npm itself as well as by Yarn, which is highly recommended for its speed of installation and the possibility of sharing dependencies between projects. You can install Yarn on the official website with versions for Windows, Linux and Mac. Once installed, we use the command below to start an npm project.

$ yarn init -y
Enter fullscreen mode Exit fullscreen mode

After creation, the file package.json should appear in your project structure. The next step is to install the typescript itself as a development dependency with the command below:

yarn add typescript -D
Enter fullscreen mode Exit fullscreen mode

With that done, we are ready to code.

Step 2: Installing Express and understanding @types

The first essential dependency for a node project is the presence of the express that can be installed with the command:

yarn add express
Enter fullscreen mode Exit fullscreen mode

Let's create a src folder at the base of our project and open an app.ts file (the extension ts refers to Typescript). One of the very important features that Typescript brings is the presence in the native Ecmascript for the file, where the use of require is no longer necessary, which is replaced by import.
We import the express normally and connect it to port 3333, where our app.ts file will have this structure.

import express from "express";

app.listen (3333);
Enter fullscreen mode Exit fullscreen mode

We will see that importing the express will result in an error, and this is one of the properties that will be required for all dependencies in our typescript project which is the definition of types. Every dependency built on TS requires a file that defines the types of variables needed for each function argument. To do this, just add a dependency that contains the same name as the package you need to install, however, with @types/ preceding its name. So, for express, we use the command:

yarn add @ types / express
Enter fullscreen mode Exit fullscreen mode

With that, the error should disappear, and this structure should go to the dependencies that need their type definition installed.

Step 3: Nodemon? Not even

To run our project, we will not use the node command, nor will we install nodemon. In this case, we will install ts-node using the command.

yarn add ts-node-dev -D
Enter fullscreen mode Exit fullscreen mode

With that, we created a script in our package.json file to run ts-node-dev when saving our file. Our package.json will follow this structure:


{
  "name": "tsproject",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "ts-node-dev --transpileOnly --ignore-watch node_modules src / server.ts"
  },
  "dependencies": {
    "express": "^ 4.17.1"
  },
  "devDependencies": {
    "@ types / express": "^ 4.17.6",
    "ts-node-dev": "^ 1.0.0-pre.44",
    "typescript": "^ 3.9.3"
  }
}
Enter fullscreen mode Exit fullscreen mode

With that, our structure will be complete. In the next article, we will understand how to configure routes through types and understand the use of type interfaces.

Thank you so much for reading!

💖 💪 🙅 🚩
aryclenio
Ary Barros

Posted on June 21, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related