How to set up a Node Project using 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)

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"
# }

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

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

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",

Edit the tsconfig.json file.

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

  "target": "ES2022"

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

  "outDir": "./dist",

dotenv file

echo "TEST=World" > .env

Let's code

mkdir src
touch src/index.ts

edit the index.ts file

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

main();

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'

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'

💡 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

Conclusion

That's all folks, Happy coding!