TypeScript e tsconfig.json

Questo articolo spiega TypeScript e tsconfig.json.

Partendo dal ruolo di base di TypeScript, spiegheremo con esempi specifici come funziona tsconfig.json all'interno di un progetto.

YouTube Video

TypeScript e tsconfig.json

TypeScript è 'JavaScript con i tipi.'. Tuttavia, per utilizzare TypeScript efficacemente nei progetti reali, è essenziale comprendere tsconfig.json correttamente e configurarlo intenzionalmente.

Perché abbiamo bisogno di TypeScript?

Innanzitutto, il motivo principale per usare TypeScript è 'la capacità di individuare gli errori prima dell'esecuzione.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Questo codice non causerebbe un errore in JavaScript fino al runtime, ma in TypeScript provoca un errore di tipo in fase di compilazione.

Questa 'rilevazione precoce' migliora notevolmente l'efficienza e la qualità dello sviluppo.

Come viene eseguito TypeScript?

In linea di principio, TypeScript non può essere eseguito così com'è. Devi convertirlo in JavaScript utilizzando tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

• Eseguendo questa operazione, viene generato tsconfig.json, che rappresenta il file centrale che definisce il comportamento del progetto TypeScript.

Qual è il ruolo di tsconfig.json?

tsconfig.json è un file di configurazione che determina 'quali file,' 'con quali regole,' e 'come convertirli.'. Sebbene possa sembrare complesso all'inizio, solo alcune impostazioni sono veramente importanti.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Con queste sole impostazioni, è possibile uno sviluppo moderno e sicuro in TypeScript.

target: La versione di JavaScript da generare

target determina il livello di specifica del JavaScript in output.

1"target": "ES2020"

Con questa impostazione, TypeScript genererà JavaScript equivalente a ES2020. Per ambienti più vecchi, seleziona ES5; solo per gli ambienti più recenti, scegli ES2022, ecc.

Quando si specifica ESNext

1"target": "ESNext"

• ESNext indica che verrà generata la sintassi JavaScript più recente così com'è. TypeScript non transpila la sintassi, lasciando il compito di gestirla all'ambiente di esecuzione, come Node.js o i browser.

• Pertanto, ESNext è adatto quando si mira solo alle versioni più recenti di Node.js o se si utilizza Babel o un bundler per la transpilation separatamente. D'altra parte, se l'ambiente di esecuzione non supporta la sintassi più recente, ciò potrebbe causare errori in fase di esecuzione, quindi è necessaria cautela.

module: Specifica il formato dei moduli

module specifica il formato dei moduli.

1"module": "ESNext"

• ESNext è lo standard nel frontend e nei moderni ambienti Node.js.
• Scegli "CommonJS" solo se hai bisogno di CommonJS.

strict: Massimizza la sicurezza dei tipi

strict è un interruttore per massimizzare la sicurezza di TypeScript.

1"strict": true

• Abilitando questa opzione, verranno rilevati tipi ambigui e potenziali bug.

modalità strict e any implicito

Quando abiliti strict, TypeScript considera come errore le variabili per cui non può dedurre il tipo.

1function printValue(value) {
2	console.log(value);
3}

• Questa variabile value non ha informazioni sul tipo alla dichiarazione, quindi TypeScript non può determinarne il tipo. Come risultato, viene usato any implicitamente, il che genera un avviso (errore) in modalità strict.

1function printValue(value: number) {
2	console.log(value);
3}

• Specificando esplicitamente il tipo in questo modo, TypeScript capisce che 'questa variabile gestisce solo numeri.'. In TypeScript è più importante che il tipo sia determinabile in modo univoco piuttosto che poter essere omesso.

include/exclude: Controllo su quali file compilare

In tsconfig.json puoi specificare quali file includere e quali file escludere dalla compilazione.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• In questo modo saranno gestiti da TypeScript solo i file presenti in src.
• node_modules specificato in exclude sarà escluso dalla compilazione anche se incluso in un percorso definito in include.

outDir: Specifica la directory di output

Specifica outDir per gestire la posizione dell'output del build.

1"outDir": "dist"

• Così, tutti i risultati compilati saranno scritti nella cartella dist. In pratica, separare il codice sorgente dagli artefatti di build è la norma.

rootDir: Specifica la directory sorgente

rootDir specifica la directory che TypeScript considera come radice del codice sorgente.

1"rootDir": "src"

• Questa impostazione consente a TypeScript di preservare la struttura delle cartelle basata su src durante la generazione dei file. Ad esempio, src/index.ts verrà emesso come dist/index.js.

• La struttura della directory specificata in rootDir verrà replicata in outDir.

esModuleInterop: Ponte tra CommonJS ed ES Modules

Ora diamo un'occhiata a esModuleInterop.

1"esModuleInterop": true

• Se abilitata, puoi utilizzare in modo sicuro moduli CommonJS con la sintassi import.

1import fs from "fs";

• Questa impostazione è quasi essenziale quando si utilizza Node.js.

noImplicitAny: Vietare i tipi impliciti 'any'

È anche importante rafforzare i controlli dei tipi in tsconfig.json.

1"noImplicitAny": true

• Con questa opzione puoi vietare i tipi any impliciti. In questo modo puoi rilevare facilmente i punti in cui hai dimenticato di specificare un tipo.

Configurazione per rilevare codice inutilizzato

Le impostazioni per rilevare codice inutilizzato sono utili anche per migliorare la manutenibilità.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Così, variabili e argomenti inutili saranno subito segnalati con avvisi.

lib: Definisci le API integrate disponibili

lib è un'impostazione che specifica le API standard che TypeScript presuppone esistano.

1"lib": ["ES2020", "DOM"]

• Con questa impostazione, i seguenti tipi diventano disponibili:. Con ES2020, funzionalità moderne come Promise, Map e Set sono disponibili. Con DOM, sono disponibili API del browser come document, window e HTMLElement.

Nel frontend, includi DOM; per progetti solo Node.js, rimuovi DOM per evitare che vengano inclusi tipi globali non necessari.

moduleResolution: Regole per la risoluzione dei moduli

moduleResolution determina come vengono risolti i moduli specificati negli import.

1"moduleResolution": "Node"

Le due opzioni principali sono le seguenti:.

• Se specifichi Node, verranno utilizzate le regole di risoluzione dei moduli di Node.js.
• Classic è il vecchio metodo specifico di TypeScript, ma oggi è raramente usato.

Negli ambienti che usano Node.js o un bundler, è sicuro specificare esplicitamente Node.

Un tsconfig.json minimale e pronto per la produzione

Sulla base di quanto visto finora, un tsconfig.json minimale e pronto per la produzione potrebbe essere così:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Questa configurazione offre una base sicura sia per progetti frontend che Node.js.

Riassunto: tsconfig.json è un 'regolamento'

tsconfig.json non è solo un file di configurazione, ma un 'regolamento' che si applica all'intero progetto. Con tsconfig.json, vengono definite chiaramente politiche importanti come le seguenti:.

• Il livello di sicurezza dei tipi.
• Le convenzioni di codifica per il tuo team.
• Prevenzione di bug futuri.

Comprendendo tsconfig.json, sarai in grado di non solo scrivere TypeScript, ma anche progettare i tuoi progetti per un uso sicuro di TypeScript.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video