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

codepo8 profile image

The best carb.js

Christian Heilmann -

wetest profile image

Developers, Meet Us @ Gamescom 2024 to Uncover PerfDog and Other Top QA Testing Tools!

wetest -

blup_tool profile image

Flutter State Management Explained: How to Choose the Right Approach

Blup -

abhay1kumar profile image

Understanding Web Storage: LocalStorage, SessionStorage, and Cookies

Abhay Kumar -