Easy Steps to Set Up TypeScript with Node.js and Express

Setting up TypeScript with Node.js and Express involves several steps. TypeScript adds static typing to JavaScript, making it easier to catch errors during development.

Step 1: Install Node.js and npm

Ensure you have Node.js and npm installed on your machine. You can download them from the official website: Node.js.

Step 2: Create a New Node.js Project

mkdir my-ts-express-app
cd my-ts-express-app

Step 3: Initialize a New Node.js Project

Run the following command to initialize a new Node.js project. This will create a package.json file.

npm init -y

Upon initializing a package.json file, the resultant file could resemble the code snippet below:

{
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "Your project description",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Your Name",
  "license": "MIT"
}

Step 4: Install TypeScript and Related Dependencies

Install TypeScript and other required dependencies:

npm install express
npm install -D @types/express typescript ts-node

• typescript: The TypeScript compiler.
• ts-node: Enables running TypeScript files directly with Node.js.
• @types/express: Provides TypeScript definitions for Express.

Step 5: Create a tsconfig.json File

Create a tsconfig.json file in the project root to configure TypeScript.

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

Step 6: Create a Source Folder

Create a src folder in the project directory to store your TypeScript files.

mkdir src

Step 7: Create an Express App in TypeScript

Inside the src folder, create an index.ts file with a basic Express setup:

// src/index.ts
import express from 'express';

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

app.get('/', (req, res) => {
  res.send('Hello, TypeScript with Express!');
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Step 8: Update the package.json File

Update the scripts section in your package.json file to include a start script that uses ts-node to run your TypeScript code.

"scripts": {
  "start": "ts-node src/index.ts"
},

Step 9: Run Your TypeScript Express App

You can now run your TypeScript Express app using the following command:

npm start

Visit http://localhost:3000 in your browser, and you should see “Hello, TypeScript with Express!”

That’s it! You’ve successfully set up TypeScript with Node.js and Express.

Feel free to expand your project by adding more routes, middleware, and features as needed.