Capitolo 7: Tooling e produttività con TypeScript

Affrontiamo in questo capitolo i tool del mondo TypeScript:

Linters (ESLint)
Formatter (Prettier)
Integrazione con Webpack/Vite
Ambienti di test con Jest o Vitest

🔗 Ti piace Techelopment? Dai un’occhiata al sito per tutti i dettagli!

🧹 1. Linter: usare ESLint con TypeScript

ESLint è uno strumento fondamentale per mantenere uno stile coerente e prevenire errori a tempo di sviluppo.

▶️ Installazione:

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

▶️ Configurazione base `.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"
  }
}

Puoi poi eseguire:

npx eslint src --ext .ts

🧠 Consiglio: integralo con l’IDE (VS Code lo supporta perfettamente).

🎨 2. Formattazione: Prettier + TypeScript

Prettier si occupa di formattazione del codice automatica (niente più discussioni su spazi, virgole o indentation 😅).

▶️ Installazione:

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

Crea un file .prettierrc:

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

E integra ESLint con Prettier modificando extends:

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

Ora Prettier e ESLint collaborano senza pestarsi i piedi.

⚒️ 3. Tool di build: Webpack o Vite

Entrambi sono strumenti potenti per bundlare, trasformare e servire codice frontend.

🆚 Differenza rapida:

Tool	Veloce per dev	Complesso/Configurabile	Moderno
Vite	✅veloce	❌ meno personalizzabile	✅ Top
Webpack	❌ lento	✅ ultra configurabile	✅ Ma più legacy

⚡ Esempio: usare Vite + TypeScript

npm create vite@latest

Scegli vanilla e poi TypeScript. Voilà: pronto.

Il tsconfig.json, vite.config.ts, e tutto il necessario è già configurato.
Perfetto anche per React, Vue, Svelte ecc.

🧪 4. Testare codice TypeScript

▶️ Jest

Installazione base:

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

Esempio test:

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

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

test('somma di 2 + 3 è 5', () => {
  expect(somma(2, 3)).toBe(5);
});

Poi lanci con:

npx jest

▶️ Alternativa moderna: Vitest

Se usi Vite, puoi usare Vitest, che è super veloce e nativamente TypeScript-friendly.

npm install --save-dev vitest

Configurazione minimale e pronta all’uso.

🔁 5. Watch mode & Dev mode

In sviluppo, conviene sempre usare:

npx tsc --watch

Oppure:

vite dev

Oppure:

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

Con tool giusti, scrivi, salvi e… il codice parte da solo.

🧠 6. Debugger in TypeScript (VS Code)

VS Code ha un’ottima integrazione con TypeScript:

Intellisense preciso
Debug diretto su file .ts con ts-node
Supporto ai breakpoints, step, inspect

Puoi creare un launch.json per il debug diretto da editor.

🧰 7. Tool extra utili

Tool	Scopo
`ts-node`	Eseguire `.ts` direttamente senza compilare
`type-fest`	Raccolta di tipi avanzati (partialDeep, etc.)
`zod` o `io-ts`	Validazione dati runtime con tipi TypeScript
`typedoc`	Generare documentazione automatica da tipi

🧷 In sintesi

Un buon progetto TypeScript ha:

✅ Linting (ESLint)
✅ Formattazione (Prettier)
✅ Tool di build moderno (Vite/Webpack)
✅ Test automatici (Jest/Vitest)
✅ Dev experience fluida (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

Techelopment

Cerca nel blog