TypeScript introduction

Starter configuration of a basic TypeScirpt application with Express.js.

Advantages of TypeScript over JavaScript on the server - Why use TypeScript?

TypeScript on the backend brings better security and code stability.

  1. Static type checking → Fewer runtime errors

    • JavaScript → Errors are detected at runtime (undefined is not a function)
    • TypeScript → Errors are detected at compile time (before deployment)

    JavaScript

    function add(a, b) {
  return a + b;
}
console.log(add(5, "10")); // Output: "510" (wrong)

    TypeScirpt

    function add(a: number, b: number): number {
  return a + b;
}
// console.log(add(5, "10")); // ❌ Compilation error!

  2. Better work with APIs and databases (e.g. Prisma, MongoDB, PostgreSQL)

    • TypeScript helps ensure that you send and receive the right data.
    • You can define the exact types of API responses → Both backend and frontend will be consistent.

    JavaScript

    app.get("/user/:id", (req, res) => {
  const user = db.find(req.params.id); // What if `id` is not a number?
  res.json(user);
});

    TypeScirpt

    app.get("/user/:id", (req: Request<{ id: string }>, res: Response) => {
  const user = db.find(parseInt(req.params.id, 10)); // ✔ Type-safe
  res.json(user);
});

  3. Better support for VS Code & IntelliSense

    • Code completion
    • Documentation as you type
    • Smarter refactoring
    interface User {
  id: number;
  name: string;
}
const user: User = { id: 1, name: "Alice" };
// user.age = 30; // ❌ TypeScript will throw an error because `age` is not part of User

Creating First TypeScript app

From the terminal / command tool window:

  1. Create a directory for the app 
    mkdir ts-express-app && cd ts-express-app
  2. Initialize app configuration file 
    npm init -y
  3. Install required packages 
    npm install express
    npm install --save-dev typescript ts-node-dev @types/node @types/express
  4. Configurate TypeScript
    • Initialize a TypeScript configuration file 
      npx tsc --init
    • Open tsconfig.json and update compilerOptions params below to following values:
      • "target": "ES6"
      • "module": "CommonJS"
      • "outDir": "./dist"
      • "rootDir": "./src",
      • "strict": true
  5. Create a basic app wrapper 
    mkdir src && mkdir src/routes
    • Create a root app file 
      echo. > src\index.ts
      And copy the code below into it: 
      import express from "express";
import routes from "./routes/index"; 

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

app.use("/", routes);

app.listen(PORT, () => {
  console.log(`Server running at http://localhost:${PORT}`);
});
    • Create a route index file 
      echo. > src\routes\index.ts
      And copy the code below into it: 
      import { Router, Request, Response, NextFunction } from "express";

const router = Router();

router.get("/", (req: Request, res: Response, next: NextFunction) => {
  next();
}, Render);

function Render(req: Request, res: Response){
  res.send("Hello World from Express TypeScript!");
}

export default router;
  6. Modify scripts section at package.json file to 
    "scripts": {
  "dev": "ts-node-dev --respawn --transpile-only src/index.ts",
  "build": "tsc",
  "start": "node dist/index.js"
}
  7. Start the TypeScript (dev) app 
    npm run dev
  8. Compile the TypeScript app into JavaScript (production) app 
    npm run build
  9. Run the JavaScript App 
    npm start

Other sources