How to setup a NodeJS project with Typescript
Ary Barros
Posted on June 21, 2020
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
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
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
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);
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
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
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"
}
}
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!
Posted on June 21, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.