Come configurare un progetto TypeScript + Node.js

Questa guida molto breve ti guiderà attraverso l'impostazione di TypeScript con progetti Node.js nuovi (o esistenti!).

Prerequisiti:

• Dovresti avere una certa familiarità con Node e JavaScript
• Dovresti avere un editor di codice installato (preferibilmente VSCode)
• Questa guida presuppone che tu sia su Linux, MacOS o un altro sistema operativo simile a UNIX.
• Questa guida presuppone anche che tu stia utilizzando npm come gestore di pacchetti (sentiti libero di usare invece yarn, pnpm o il tuo gestore di pacchetti preferito)

• Questo ti mostrerà come iniziare molto rapidamente con TypeScript
• Questa guida ti mostrerà anche come utilizzare pacchetti popolari come nodemon per supportare il ricaricamento a caldo delle tue applicazioni

• TypeScript è un superset di JavaScript che ci fornisce tipizzazione statica opzionale. È stato creato da Microsoft ed è probabilmente l'unica cosa buona che hanno rilasciato da VS Code (sto scherzando )
• Serve come documentazione e riduce il sovraccarico di onboarding e quindi migliora l'esperienza dello sviluppatore
• Ci consente di identificare rapidamente bug/problemi aumentando così la qualità complessiva del software
• Leggi il manuale di TypeScript per maggiori dettagli

1. Crea una directory e vai nella cartella appena creata

mkdir typescript-example
cd typescript-example

npm init -y

npm install typescript --save-dev

npm install @types/node --save-dev

5. Crea il tuo tsconfig.json

npx tsc --init

6. Compila il tuo codice usando il comando tsc usando Node package executer (npx) .

npx tsc

Migliorare la tua esperienza di sviluppatore locale

1. Ricaricamento a caldo: questo migliorerà notevolmente il tuo dev ex, in quanto consentirà alla tua applicazione di ricaricarsi a caldo in caso di modifiche in tempo reale. Possiamo configurarlo tramite Nodemon nelle nostre app Node.js.

npm install --save-dev ts-node nodemon

Quanto sopra dovrebbe essere sufficiente per configurare rapidamente un progetto TypeScript + Node in locale. Puoi migliorarlo ulteriormente:

• Usa un linter: usa qualcosa come ESLint . Questo è uno strumento di analisi del codice statico che ci consente di impostare uno standard nel nostro codice. Possiamo usarlo per applicare standard e modelli di codifica per la nostra base di codice.
• Introduci strumenti di eliminazione profonda: Rimraf per rimuovere i file indesiderati prima di passare alla produzione
• Aggiungi un bundler di moduli statici: usa webpack (o turbopack). Questo sarà probabilmente eccessivo per un piccolo progetto, ma man mano che la tua applicazione si ridimensiona, avrai bisogno di un meccanismo per gestire tutti i tuoi JS/TS .
• Automazione: come puoi automatizzare quanto sopra per la tua azienda?