DEV Community

Cover image for How to set up a Node Project using TypeScript in 2024
Arnaud Ferrand
Arnaud Ferrand

Posted on

How to set up a Node Project using TypeScript in 2024

#node #typescript #javascript

Originally published at https://www.tsamaya.net/blog/2024-07-19-how-to-set-up-a-node-server-with-typescript-in-2024

I'm writing this down to make it easier to locate in the future because I've had to search for how to build a new Node project far too often. This is a brief, crude post with little background information.

Create the project 

# create a new project folder
mkdir my-node-project
cd my-node-project/
echo "20" > .nvmrc
nvm use
# Found '/Users/arnaud/projects/tsamaya/my-node-project/.nvmrc' with version <20>
# Now using node v20.11.1 (npm v10.2.4)
Enter fullscreen mode Exit fullscreen mode

Initialize the project 

git init
# Initialized empty Git repository in /Users/arnaud/projects/tsamaya/my-node-project/.git/
pnpm init
# Wrote to /Users/arnaud/projects/tsamaya/my-node-project/package.json

# {
#   "name": "my-node-project",
#   "version": "1.0.0",
#   "description": "",
#   "main": "index.js",
#   "scripts": {
#     "test": "echo \"Error: no test specified\" && exit 1"
#   },
#   "keywords": [],
#   "author": "",
#   "license": "ISC"
# }
Enter fullscreen mode Exit fullscreen mode

Install dev dependencies 

pnpm add -D typescript ts-node @types/node
# Packages: +20
# ++++++++++++++++++++
# Progress: resolved 20, reused 19, downloaded 1, added 20, done

# devDependencies:
# + @types/node 20.14.11
# + ts-node 10.9.2
# + typescript 5.5.3

# Done in 1.4s
Enter fullscreen mode Exit fullscreen mode

Initialize TypeScript 

npx tsc --init

# Created a new tsconfig.json with:       TS
#   target: es2016
#   module: commonjs
#   strict: true
#   esModuleInterop: true
#   skipLibCheck: true
#   forceConsistentCasingInFileNames: true


# You can learn more at https://aka.ms/tsconfig
Enter fullscreen mode Exit fullscreen mode

Customize

We are using node >= 20.6 then we can use:

  • The --watch flag was added in Node v18.11.0.
  • The --env-file=config flag was added in Node v20.6.0.

Add in the package.json file in the scripts section:

    "build": "tsc",
    "dev": "node --env-file=.env --watch -r ts-node/register src/index.ts",
Enter fullscreen mode Exit fullscreen mode

Edit the tsconfig.json file.

In the Language and Environment section, find target and replace it with your target, I use es2022 :

  "target": "ES2022"
Enter fullscreen mode Exit fullscreen mode

In the Emit section, find outDir, uncomment the line and use "./dist"

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

dotenv file 

echo "TEST=World" > .env
Enter fullscreen mode Exit fullscreen mode

Let's code 

mkdir src
touch src/index.ts
Enter fullscreen mode Exit fullscreen mode

edit the index.ts file

function main(): void {
  console.log(`Hello ${process.env.TEST}`);
}

main();
Enter fullscreen mode Exit fullscreen mode

run with pnpm dev 

pnpm dev

# > my-node-project@1.0.0 dev /Users/arnaud/projects/tsamaya/my-node-project
# > node --env-file=.env --watch -r ts-node/register src/index.ts

# Hello World
# Completed running 'src/index.ts'
Enter fullscreen mode Exit fullscreen mode

Edit the src file; for example, adding ! will reload it and output the new value.

# Restarting 'src/index.ts'
# Hello World!
# Completed running 'src/index.ts'
Enter fullscreen mode Exit fullscreen mode

💡 Editing the value TEST in the .env file won't reload; one needs to stop and start again.

.gitignore file

Don't forget your .gitignore file, run

curl "https://www.toptal.com/developers/gitignore/api/node" > .gitignore
Enter fullscreen mode Exit fullscreen mode

Conclusion

That's all, folks. Happy coding!

Credits

Photo by Jorge Rosal on Unsplash

Top comments (0)

Read next

ridoy_hasan profile image

How to Set Up Your JavaScript Development Environment

Ridoy Hasan -

sonaykara profile image

React : Keeping Components Pure

Sonay Kara -

miguelaeh profile image

Offload - A unified javascript SDK that enables in-browser AI

Miguel Ángel Cabrera Miñagorri -

codenameone profile image

Front End Debugging Part 1: Not just Console Log

Shai Almog -