DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to set up a Node Project With Typescript
DevSanx
DevSanx

Posted on

How to set up a Node Project With Typescript

Node.js is an open-source JavaScript runtime environment for building server(backend) applications. To add type checking something that is not present in plain JavaScript we use Typescript. Typescript makes our code more secure and robust. Mainly it will help us to reduce bugs in our code. Here i'll give you the step by step instructions to setup your next Node.js project with Typescript.

Initializing Our Project

Create a new directory with the project name that you wan't to create. After that run below command which will walks you through an interactive session to create a package.json file.

for yarn

yarn init
Enter fullscreen mode Exit fullscreen mode

for npm

npm init
Enter fullscreen mode Exit fullscreen mode

Installing Dependencies

Install the typescript package as a development dependency using below command.

for yarn

yarn add -D typescript
Enter fullscreen mode Exit fullscreen mode

for npm

npm i -D typescript
Enter fullscreen mode Exit fullscreen mode

Now install express and it's type definitions with the below commands.

for yarn

yarn add express && yarn add -D @types/express
Enter fullscreen mode Exit fullscreen mode

for npm

npm i express && npm i -D @types/express
Enter fullscreen mode Exit fullscreen mode

Additionally i'm using nodemon which will help us by automatically restarting our server when we make changes to our files. For nodemon to work with typescript we need another dependency called ts-node. To install both run the below command.

for yarn

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

for npm

npm i -D nodemon ts-node
Enter fullscreen mode Exit fullscreen mode

Configuring Typescript Compiler

Now that we have all our dependencies we can do our typescript configuration. To do so run the below command.

for yarn

yarn tsc --init
Enter fullscreen mode Exit fullscreen mode

for npm

npx tsc --init
Enter fullscreen mode Exit fullscreen mode

This will create a tsconfig.json file in which we can see lots of configuration options, but don’t worry about them too much, we only need to change a few things you can simply leave rest of them as they are.

Output Directory

This will be the folder in which our compiled code will get saved. Create a dist folder in the project root directory and find the outDir line in tsconfig.json file. Uncomment it and change it to

"outDir": "./dist"
Enter fullscreen mode Exit fullscreen mode

Files for compilation

By default the compiler include all files in our project. To include files inside *src * folder only make below changes to our configuration.

{
  "compilerOptions": {
    ...
  },
  "include": ["src"]
}
Enter fullscreen mode Exit fullscreen mode

Final Touches

We are almost ready with the setup. Create a folder src in project root directory and create an index.ts file inside. This will be the starting point of our application. Add below boilerplate code to index.ts

import express from "express";

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

app.get("/", (req, res) => {
  res.send("Hello World!");
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});
Enter fullscreen mode Exit fullscreen mode

Now we can create a script in package.json to run our server with nodemon. For that modify your package.json file like this.

{
  ...
  "scripts": {
    "dev": "nodemon src/index.ts"
  },
  ...
}
Enter fullscreen mode Exit fullscreen mode

now run our app with the following command

for yarn

yarn run dev
Enter fullscreen mode Exit fullscreen mode

for npm

npx run dev
Enter fullscreen mode Exit fullscreen mode

Congratulations! you've successfully set up your Node.js project with Typescript!

Thank you for reading, please do follow for more articles.

Top comments (2)

Collapse
 
eshimischi profile image
eshimischi

Forget about npm, yarn, use only pnpm

Collapse
 
snxdev profile image
DevSanx

will give that a try πŸ˜„

5 Websites To Learn Frontend Web Development Faster

In this article, Bentil Shadrack has curated 5 resourceful sites that will help you better you web development skills really fast.