Treci la conținutul principal

Configurarea TypeScript

Acest capitol explică fișierul tsconfig.json: la ce servește, setările pe care le vei întâlni cel mai des și cum să eviți greșelile obișnuite.


Introducere

Fișierul tsconfig.json este inima oricărui proiect TypeScript.

El îi spune compilatorului TypeScript cum să prelucreze codul tău, ce fișiere fac parte din proiect și ce funcționalități să activeze sau să dezactiveze.

Un tsconfig.json bine configurat îți oferă o experiență de dezvoltare fără probleme și compilări fiabile.


Concepte cheie și explicații

Cele mai importante câmpuri de nivel superior sunt:

  • compilerOptions: controlează modul în care TypeScript compilează codul tău (de exemplu ținta, sistemul de module și stricteța).
  • include: fișierele sau folderele care trebuie incluse în compilare.
  • exclude: fișierele sau folderele care trebuie lăsate deoparte.
  • files: o listă explicită de fișiere de inclus (rar folosită împreună cu include).
  • extends: moștenește opțiuni dintr-un alt fișier de configurare.
  • references: activează referințele între proiecte pentru monorepo-uri sau configurații cu mai multe pachete.

Exemple pas cu pas

Un tsconfig.json minimal are nevoie doar de o țintă, un sistem de module și fișierele de inclus:

  • "compilerOptions": { "target": "es6", "module": "commonjs" }
  • "include": ["src/**/*"]

O configurare mai completă pentru o aplicație adaugă verificare strictă, aliasuri de căi și un folder de ieșire:

  • "target": "es2020"
  • "module": "esnext"
  • "strict": true
  • "baseUrl": "."
  • "paths": { "@app/*": ["src/app/*"] }
  • "outDir": "dist"
  • "esModuleInterop": true
  • "include": ["src"]
  • "exclude": ["node_modules", "dist"]

Pentru a genera un tsconfig.json de pornire, cu comentarii pentru fiecare opțiune, rulează tsc --init.


Scenarii din lumea reală

  • Monorepo: folosește references și extends pentru a partaja setările între pachete.
  • Bibliotecă: setează declaration și outDir astfel încât fișierele cu definiții de tipuri să fie produse lângă rezultatul JavaScript.
  • Aplicație: folosește strict și esModuleInterop pentru cea mai bună compatibilitate.

Greșeli frecvente și depanare

  • Un include sau exclude greșit poate face ca fișierele să dispară din compilare sau poate aduce fișiere la care nu te așteptai.
  • Căile nu se rezolvă? Verifică setările baseUrl și paths.
  • Erori de tip noi după activarea lui strict? Este de așteptat. Parcurge codul semnalat și fă-l sigur din punctul de vedere al tipurilor.

Bune practici

  • Activează întotdeauna strict pentru un cod mai sigur.
  • Folosește extends ca să nu repeți aceeași configurare în monorepo-uri sau în mai multe proiecte.
  • Nu adăuga folderele cu rezultatul compilării (cum este dist) în sistemul de versionare.