TypeScript - tsconfig.json: Una Guida per Principianti

Ciao ciao, futuro superstar del coding! ? Oggi ci imbarcheremo in un viaggio emozionante nel mondo di TypeScript e del suo fedele compagno, il file tsconfig.json. Non preoccuparti se non hai mai scritto una riga di codice prima - sarò la tua guida amichevole, e affronteremo tutto insieme, passo dopo passo.

Cos'è tsconfig.json?

Prima di immergerci, parliamo di cosa sia effettivamente il file tsconfig.json. Immagina di costruire una casa (il tuo progetto TypeScript). Il file tsconfig.json è come il progetto della tua casa. Indica a TypeScript come vuoi che il tuo progetto venga costruito, quali funzionalità vuoi utilizzare e quanto rigorose vuoi che siano le regole.

Struttura di Base del File tsconfig.json

Ora, esaminiamo la struttura di base di un file tsconfig.json. È scritto in formato JSON, che è un modo per organizzare i dati che sia gli esseri umani che i computer possono facilmente comprendere.

Ecco un esempio semplice:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
]
}

Scopriamolo:

1. L'intero file è racchiuso tra parentesi graffe {}.
2. Dentro, abbiamo diverse sezioni come compilerOptions, include e exclude.
3. Ogni sezione contiene impostazioni specifiche.

CompilerOptions

La sezione compilerOptions è dove avviene la magia. È come dire al cuoco (il compilatore TypeScript) come vuoi che prepari il tuo piatto (codice). Esaminiamo alcune opzioni comuni:

{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"outDir": "./dist",
"rootDir": "./src",
"sourceMap": true
}
}

Spieghiamo ognuna di queste:

• target: Indica a TypeScript a quale versione di JavaScript compilare. "es5" è ampiamente supportato dai browser.
• module: Specifica quale sistema di moduli utilizzare. "commonjs" è comunemente utilizzato per i progetti Node.js.
• strict: Quando impostato su true, abilita un set di opzioni di controllo del tipo rigoroso.
• outDir: È dove TypeScript placing i file JavaScript compilati.
• rootDir: È dove TypeScript dovrebbe cercare i tuoi file sorgente.
• sourceMap: Quando impostato su true, genera file di mappatura sorgente, che sono utili per il debug.

Include e Exclude

Le sezioni include e exclude indicano a TypeScript quali file compilare e quali ignorare:

{
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

• include: Indica a TypeScript di compilare tutti i file nella cartella src e nelle sue sottocartelle.
• exclude: Indica a TypeScript di ignorare la cartella node_modules e qualsiasi file che termina con .spec.ts (tipicamente utilizzato per i file di test).

Scenari e Configurazioni Comuni

Ora che abbiamo capito le basi, esaminiamo alcuni scenari comuni che potresti incontrare e come configurare tsconfig.json per loro.

Scenario 1: Progetto React

Se stai lavorando su un progetto React, potresti voler utilizzare una configurazione come questa:

{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react"
},
"include": [
"src"
]
}

Questa configurazione è ottimizzata per lo sviluppo React. Permette di utilizzare JSX, abilita il controllo del tipo rigoroso e imposta la risoluzione dei moduli per una struttura di progetto React tipica.

Scenario 2: Progetto Backend Node.js

Per un progetto backend Node.js, potresti utilizzare una configurazione come questa:

{
"compilerOptions": {
"target": "es2018",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
},
"include": [
"src/**/*"
],
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}

Questa configurazione è adatta per un progetto backend Node.js. Compila a una versione più recente di JavaScript (ES2018), utilizza moduli CommonJS e imposta le directory di input e output.

Opzioni Utili di tsconfig.json

Ecco una tabella di alcune opzioni utili di tsconfig.json che potresti voler utilizzare:

Opzione	Descrizione
noImplicitAny	Genera un errore su espressioni e dichiarazioni con un tipo implicito 'any'
strictNullChecks	Abilita il controllo rigoroso dei null
strictFunctionTypes	Abilita il controllo rigoroso dei tipi di funzione
strictBindCallApply	Abilita il controllo rigoroso dei metodi 'bind', 'call' e 'apply' sulle funzioni
noUnusedLocals	Segnala errori sui locali non utilizzati
noUnusedParameters	Segnala errori sui parametri non utilizzati
noImplicitReturns	Segnala un errore quando non tutte le strade del codice in una funzione restituiscono un valore
noFallthroughCasesInSwitch	Segnala errori per i casi di transizione nel comando switch

Ricorda, puoi sempre fare riferimento alla documentazione ufficiale di TypeScript per un elenco completo delle opzioni e delle loro descrizioni.

Conclusione

Eccoci, mio apprendista di coding! Abbiamo viaggiato attraverso il territorio di tsconfig.json, dalla sua struttura di base agli scenari comuni e alle opzioni utili. Ricorda, tsconfig.json è come un coltello svizzero per i tuoi progetti TypeScript - è incredibilmente versatile e può essere personalizzato per soddisfare le tue esigenze specifiche.

Mentre continui la tua avventura con TypeScript, non aver paura di sperimentare con diverse configurazioni. Ogni progetto potrebbe richiedere una configurazione leggermente diversa, e questo è perfetto! Più esplori tsconfig.json, più ti sentirai a tuo agio con i suoi poteri.

Continua a codificare, continua ad apprendere e, soprattutto, divertiti! Finché non ci vediamo, ti auguro che i tuoi tipi siano forti e i tuoi errori siano pochi. Buon TypeScripting! ??‍??‍?

Credits: Image by storyset