Read.md

How to Set Up a TypeScript Node.js Project in 2024: A Step-by-Step Guide

In 2024, TypeScript remains one of the best tools to ensure type safety in your Node.js projects, offering an enhanced developer experience with its static typing. Whether you’re starting a new project or converting an existing one, setting up a TypeScript environment in Node.js has never been easier. In this blog post, I’ll walk you through setting up a modern TypeScript project with Node.js from scratch using the latest tools and best practices.

Step 1: Install Node.js

Before starting, ensure you have the latest Node.js version installed. You can check if Node.js is installed by running:

node -v

To update or install Node.js, go to the official Node.js website and download the latest stable version (currently, Node.js 22.x).

Step 2: Create a New Node.js Project

Start by creating a new directory for your project and initializing a Node.js project:

mkdir my-typescript-node-app
cd my-typescript-node-app
npm init -y

This will create a package.json file with the default settings.

Step 3: Install TypeScript and Other Dependencies

Next, install TypeScript and the required development dependencies:

npm install typescript ts-node @types/node --save-dev

• typescript: The TypeScript compiler itself.
• ts-node: A utility to run TypeScript files directly without compiling them into JavaScript first.
• @types/node: TypeScript type definitions for Node.js APIs.

Step 4: Initialize TypeScript Configuration

Run the following command to generate a tsconfig.json file, which configures the TypeScript compiler:

npx tsc --init

This file contains various options that control how TypeScript behaves. For most projects, the default settings are fine, but let’s tweak a few things for a modern setup.

Update the tsconfig.json to look like this:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "CommonJS",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

Key tsconfig.json settings:

• "target": "ES2020": Ensures that TypeScript compiles down to a modern JavaScript version.
• "module": "CommonJS": CommonJS is used by Node.js for module imports.
• "outDir": "./dist": Specifies the output directory for compiled JavaScript files.
• "rootDir": "./src": Specifies the root folder for TypeScript files.

Step 5: Project Folder Structure

Create the src directory for your TypeScript code:

mkdir src

Here’s the typical folder structure you can follow:

my-typescript-node-app
│
├── src
│   └── index.ts
├── dist
├── node_modules
├── package.json
└── tsconfig.json

Step 6: Create Your First TypeScript File

In the src directory, create index.ts and add a simple Node.js HTTP server:

import http from 'http';

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, TypeScript with Node.js!');
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}/`);
});

Step 7: Add Scripts to package.json

In your package.json, add the following scripts to automate common tasks:

"scripts": {
  "build": "tsc",
  "start": "node dist/index.js",
  "dev": "ts-node src/index.ts",
  "lint": "eslint . --ext .ts"
}

• build: Compiles TypeScript into JavaScript and stores the result in the dist folder.
• start: Runs the compiled JavaScript file.
• dev: Uses ts-node to run TypeScript files without the need to compile first (great for development).

Step 8: Install ESLint for Code Quality

Install ESLint to maintain consistent code quality across your project:

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev

Initialize ESLint:

npx eslint --init

Make sure to choose TypeScript as the language during the setup. Once done, add the following configuration to .eslintrc.js:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module'
  },
  rules: {
    // Add or customize rules here
  }
};

Step 9: Build and Run the Project

To run the project during development, simply use:

npm run dev

To build the project, run:

npm run build

To start the compiled app:

npm start

Step 10: Testing with Jest (Optional)

If you want to add tests, install Jest and its TypeScript setup:

npm install jest ts-jest @types/jest --save-dev

Create a Jest configuration file:

npx ts-jest config:init

Now you can create test files in the src directory with the .test.ts extension, and run tests using:

npm test

Final Thoughts

With TypeScript and Node.js, you get the best of both worlds: the scalability and type safety of TypeScript, combined with the speed and simplicity of Node.js. Setting up a TypeScript project in 2024 is simple and highly configurable to your needs. I hope this guide helps you streamline your setup process and kickstart your next project.

Happy coding!