tsconfig.json to'liq — target, lib, paths, project references

~20 daq · TypeScript · Modullar, Sozlash va Amaliy

tsconfig.json — TypeScript kompilyatorining bosh sozlash fayli. 4-darsda asoslarni ko'rdik. Bu darsda amalda kerak bo'lgan barcha muhim parametrlar.

target va lib

{
  "compilerOptions": {
    "target": "ES2020",
    "lib": ["ES2020", "DOM"]
  }
}

target — JavaScript ning qaysi versiyasiga kompilyatsiya:

ES5      — eski brauzerlar
ES2015   — modern, arrow function, class, Promise
ES2020   — optional chaining, nullish coalescing
ESNext   — eng yangi

lib — qaysi kutubxona turlarini qo'llash:

ES2020   — Promise, Map, Set, optional chaining turlari
DOM      — window, document, HTMLElement
DOM.Iterable — DOM da for...of

module va moduleResolution

{
  "compilerOptions": {
    "module": "NodeNext",
    "moduleResolution": "NodeNext"
  }
}

Node.js uchun NodeNext, brauzer/bundler uchun ESNext/Bundler.

strict — barcha tekshiruvlarni yoqish

{
  "compilerOptions": {
    "strict": true
  }
}

strict: true bir vaqtda yoqadi:

strictNullChecks      — null/undefined alohida tur
noImplicitAny         — any bo'lmasa xato
strictFunctionTypes   — funksiya parametrlar tekshiruvi
useUnknownInCatchVariables — catch da e: unknown

paths — import yo'llari

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"],
      "@utils/*": ["src/utils/*"]
    }
  }
}

import { Button } from "@components/Button"; // ✅
// o'rniga
import { Button } from "../../components/Button";

include va exclude

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

outDir va rootDir

{
  "compilerOptions": {
    "rootDir": "src",   // kirish manba papkasi
    "outDir": "dist"    // chiqish papkasi
  }
}

To'liq ishchi tsconfig (Node.js)

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "lib": ["ES2020"],
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "declaration": true,
    "sourceMap": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

Xulosa

{
  "compilerOptions": {
    "target": "ES2020",          // JS versiya
    "lib":    ["ES2020", "DOM"], // kutubxona turlari
    "module": "NodeNext",        // modul tizimi
    "strict": true,              // barcha tekshiruvlar
    "outDir": "dist",            // chiqish
    "rootDir": "src",            // kirish
    "paths":  { "@/*": ["src/*"] }, // import alias
    "declaration":  true,        // .d.ts yaratish
    "sourceMap":    true,        // debug uchun
    "esModuleInterop": true,     // CommonJS import
    "skipLibCheck": true         // .d.ts fayllarni tekshirmaslik
  }
}

Keyingi dars

60-dars: TypeScript bilan React — props, hooks, events, children tiplari