Chapter 7: Tooling and Productivity with TypeScript

   

In this chapter we will deal with the tools of the TypeScript world:

• Linters (ESLint)

• Formatter (Prettier)

• Integration with Webpack/Vite

• Test environment with Jest or Vitest

🔗 Do you like Techelopment? Chek out the website for all details!

🧹 1. Linter: Using ESLint with TypeScript

ESLint is a fundamental tool for maintaining a consistent style and preventing errors during development.

▶️ Installation:

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

▶️ Basic configuration .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "env": {
    "es6": true,
    "node": true
  },
  "rules": {
    "semi": ["error", "always"],
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

Then run:

npx eslint src --ext .ts

🧠 Tip: Integrate it with your IDE (VS Code supports it perfectly).

🎨 2. Formatting: Prettier + TypeScript

Prettier takes care of automatic code formatting (no more arguing about spaces, commas or indentation 😅).

▶️ Installation:

npm install --save-dev prettier eslint-config-prettier

Create a file .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100
}

And integrates ESLint with Prettier by modifying extends:

"extends": [
  "eslint:recommended",
  "plugin:@typescript-eslint/recommended",
  "prettier"
]

Now Prettier e ESLint collaborate without stepping on each other's toes.

⚒️ 3. Tool for building: Webpack or Vite

Both are powerful tools for bundling, transforming, and serving frontend code.

🆚 Quick differences:

Tool	Fast for dev	Complex/Configurable	Modern
Vite	✅fast	❌ less customizable	✅ Top
Webpack	❌ slow	✅ ultra configurable	✅ But more legacy

⚡ Example: Vite + TypeScript usage

npm create vite@latest

Choose vanilla then TypeScript. Voilà: ready.

The tsconfig.json, vite.config.ts, and all needs it is already configured.
Perfect also for React, Vue, Svelte etc.

🧪 4. Testing TypeScript code

▶️ Jest

Basic installation:

npm install --save-dev jest ts-jest @types/jest
npx ts-jest config:init

Test example:

// sum.ts
export const sum = (a: number, b: number): number => a + b;

// sum.test.ts
import { sum } from './sum';

test('sum of 2 + 3 is 5', () => {
  expect(sum(2, 3)).toBe(5);
});

The run it with:

npx jest

▶️ Modern alternative: Vitest

If you use Vite, you can use Vitest, which is super fast and natively TypeScript-friendly.

npm install --save-dev vitest

Minimal and ready-to-use configuration.

🔁 5. Watch mode & Dev mode

In development, it is always best to use:

npx tsc --watch

Or:

vite dev

Or:

nodemon --watch src --exec "tsc && node dist/index.js"

With the right tools, you write, save and… the code runs by itself.

🧠 6. Debugger in TypeScript (VS Code)

VS Code has great integration with TypeScript:

• Precise Intellisense

• Debug direct on .ts file with ts-node

• Support for breakpoints, steps, inspect

You can create a launch.json to debug directly in the editor.

🧰 7. Useful extra tools

Tool	Scopo
ts-node	Run .ts directly without compiling
type-fest	Collection of advanced types (partialDeep, etc.)
zod o io-ts	Runtime data validation with TypeScript types
typedoc	Generate automatic documentation from types

🧷 In summary

A good TypeScript project has: 

✅ Linting (ESLint)
✅ Formatting (Prettier)
✅ Moderno building tool (Vite/Webpack)
✅ Testing automation (Jest/Vitest)
✅ Fluid dev experience (watch mode, debug, intellisense)

Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment