TypeScript Konfiguratsiyasi: To'liq tsconfig.json Qo'llanmasi

TypeScript, JavaScript'ning ustki to'plami, veb-ishlab chiqishning dinamik dunyosiga statik tiplashtirishni olib keladi. Yaxshi sozlangan tsconfig.json fayli TypeScript'ning to'liq quvvatidan foydalanish uchun juda muhimdir. Ushbu qo'llanma tsconfig.json haqida to'liq ma'lumot beradi, unda muhim kompilyator sozlamalari, loyihani sozlash va ilg'or konfiguratsiyalar ko'rib chiqiladi.

tsconfig.json nima?

tsconfig.json fayli TypeScript loyihasi uchun kompilyator sozlamalarini belgilaydigan konfiguratsiya faylidir. U TypeScript kompilyatoriga TypeScript kodini JavaScript'ga qanday transpilyatsiya qilishni aytadi. Ushbu fayl loyiha tuzilishini aniqlash, kompilyatsiya qoidalarini o'rnatish va ishlab chiquvchilar jamoasi bir ofisda joylashganmi yoki bir nechta qit'alarda tarqalganmi, undan qat'i nazar, izchillikni ta'minlash uchun zarurdir.

tsconfig.json Faylini Yaratish

tsconfig.json faylini yaratish uchun terminalda loyihangizning ildiz katalogiga o'ting va quyidagi buyruqni bajaring:

tsc --init

Ushbu buyruq keng tarqalgan kompilyator sozlamalari bilan oddiy tsconfig.json faylini yaratadi. Keyin faylni loyihangizning maxsus talablariga mos ravishda sozlashingiz mumkin. Odatdagi tsconfig.json compilerOptions, include, va exclude kabi sozlamalarni o'z ichiga oladi.

Muhim Kompilyator Sozlamalari

compilerOptions bo'limi tsconfig.json faylining yuragi hisoblanadi. U TypeScript kompilyatorining xatti-harakatini boshqaradigan keng ko'lamli sozlamalarni o'z ichiga oladi. Quyida eng muhim kompilyator sozlamalaridan ba'zilari keltirilgan:

target

target sozlamasi yaratilgan JavaScript kodi uchun ECMAScript maqsadli versiyasini belgilaydi. Umumiy qiymatlar qatoriga ES5, ES6 (ES2015), ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext kiradi. To'g'ri maqsadni tanlash brauzerlar yoki Node.js versiyalari kabi mo'ljallangan ishga tushirish muhiti bilan mosligini ta'minlash uchun juda muhimdir.

Misol:

{
  "compilerOptions": {
    "target": "ES2020"
  }
}

module

module sozlamasi modul kodini yaratish uslubini belgilaydi. Umumiy qiymatlar qatoriga CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020, va ESNext kiradi. Modul tizimini tanlash maqsadli muhitga va ishlatiladigan modul yig'uvchiga (masalan, Webpack, Rollup, Parcel) bog'liq. Node.js uchun ko'pincha CommonJS ishlatiladi, zamonaviy veb-ilovalar uchun esa modul yig'uvchi bilan ES6 yoki ESNext afzal ko'riladi. ESNext'dan foydalanish dasturchilarga eng so'nggi xususiyatlar va optimallashtirishlardan foydalanish imkonini beradi, yakuniy modul formatini esa yig'uvchiga ishonib topshiradi.

Misol:

{
  "compilerOptions": {
    "module": "ESNext"
  }
}

lib

lib sozlamasi kompilyatsiyaga kiritilishi kerak bo'lgan kutubxona fayllari ro'yxatini belgilaydi. Bu kutubxona fayllari o'rnatilgan JavaScript API'lari va brauzer API'lari uchun tip ta'riflarini taqdim etadi. Umumiy qiymatlar qatoriga ES5, ES6, ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext, DOM, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Generator, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.Intl, ES2017.SharedMemory, ES2017.String, ES2017.TypedArrays, ES2018.Intl, ES2018.Promise, ES2018.RegExp, ES2019.Array, ES2019.Object, ES2019.String, ES2019.Symbol, ES2020.BigInt, ES2020.Promise, ES2020.String, ES2020.Symbol.WellKnown, ES2021.Promise, ES2021.String, ES2021.WeakRef, ES2022.Error, ES2022.Object, ES2022.String, va boshqalar kiradi. Tegishli kutubxonalarni tanlash TypeScript kompilyatorining maqsadli muhit uchun zarur tip ma'lumotlariga ega bo'lishini ta'minlaydi. DOM kutubxonasidan foydalanish loyihaga brauzerga xos API'lardan foydalanadigan kodni tip xatolarisiz kompilyatsiya qilish imkonini beradi.

Misol:

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

allowJs

allowJs sozlamasi TypeScript kompilyatoriga JavaScript fayllarini TypeScript fayllari bilan birga kompilyatsiya qilish imkonini beradi. Bu mavjud JavaScript loyihalarini bosqichma-bosqich TypeScript'ga o'tkazish uchun foydalidir. Buni true qilib belgilash kompilyatorga .js fayllarini qayta ishlashga imkon beradi, bu esa loyiha doirasida TypeScript'ni asta-sekin joriy etish imkonini beradi.

Misol:

{
  "compilerOptions": {
    "allowJs": true
  }
}

jsx

jsx sozlamasi JSX sintaksisini qanday qayta ishlash kerakligini belgilaydi. Umumiy qiymatlar qatoriga preserve, react, react-native, va react-jsx kiradi. preserve JSX sintaksisini chiqishda saqlaydi, react esa JSX'ni React.createElement chaqiruvlariga aylantiradi. react-jsx React 17 da joriy qilingan yangi JSX transformatsiyasidan foydalanadi, bu esa React'ni import qilishni talab qilmaydi. To'g'ri JSX sozlamasini tanlash React yoki boshqa JSX-ga asoslangan kutubxonalardan foydalanadigan loyihalar uchun juda muhimdir.

Misol:

{
  "compilerOptions": {
    "jsx": "react-jsx"
  }
}

declaration

declaration sozlamasi har bir TypeScript fayli uchun mos keladigan .d.ts deklaratsiya fayllarini yaratadi. Deklaratsiya fayllari tip ma'lumotlarini o'z ichiga oladi va boshqa TypeScript loyihalari tomonidan kompilyatsiya qilingan kodni ishlatish uchun foydalaniladi. Deklaratsiya fayllarini yaratish qayta ishlatiladigan kutubxonalar va modullarni yaratish uchun zarurdir. Bu fayllar boshqa TypeScript loyihalariga kutubxona tomonidan taqdim etilgan tiplar va interfeyslarni asl manba kodini kompilyatsiya qilmasdan tushunish imkonini beradi.

Misol:

{
  "compilerOptions": {
    "declaration": true
  }
}

sourceMap

sourceMap sozlamasi manba xaritasi fayllarini yaratadi, bu fayllar yaratilgan JavaScript kodini asl TypeScript kodiga bog'laydi. Manba xaritalari TypeScript kodini brauzerlarda va boshqa muhitlarda tuzatish uchun zarurdir. JavaScript kodida xatolik yuzaga kelganda, manba xaritasi dasturchiga tuzatuvchida mos keladigan TypeScript kodini ko'rish imkonini beradi, bu esa muammoni aniqlash va tuzatishni osonlashtiradi.

Misol:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

outDir

outDir sozlamasi yaratilgan JavaScript fayllari uchun chiqish katalogini belgilaydi. Ushbu sozlama manba kodini kompilyatsiya qilingan koddan ajratib, loyihaning yig'ilgan mahsulotini tartibga solishga yordam beradi. outDir dan foydalanish yig'ish jarayonini boshqarishni va dasturni joylashtirishni osonlashtiradi.

Misol:

{
  "compilerOptions": {
    "outDir": "dist"
  }
}

rootDir

rootDir sozlamasi TypeScript loyihasining ildiz katalogini belgilaydi. Kompilyator ushbu katalogni modul nomlarini aniqlash uchun asos sifatida ishlatadi. Bu sozlama, ayniqsa, murakkab katalog tuzilishiga ega bo'lgan loyihalar uchun muhimdir. rootDir ni to'g'ri sozlash kompilyatorning barcha kerakli modullar va bog'liqliklarni topa olishini ta'minlaydi.

Misol:

{
  "compilerOptions": {
    "rootDir": "src"
  }
}

strict

strict sozlamasi barcha qat'iy tip tekshiruvi sozlamalarini yoqadi. Bu yangi TypeScript loyihalari uchun juda tavsiya etiladi, chunki u potensial xatolarni ishlab chiqish jarayonining boshida ushlashga yordam beradi. Qat'iy rejimni yoqish qat'iyroq tip tekshiruvi qoidalarini qo'llaydi, bu esa yanada ishonchli va barqaror kodga olib keladi. Barcha yangi TypeScript loyihalarida qat'iy rejimni yoqish eng yaxshi amaliyot hisoblanadi.

Misol:

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

esModuleInterop

esModuleInterop sozlamasi CommonJS va ES modullari o'rtasidagi o'zaro muvofiqlikni ta'minlaydi. Bu ikkala turdagi modullarni ishlatadigan loyihalar uchun muhimdir. esModuleInterop yoqilganda, TypeScript CommonJS va ES modullari o'rtasidagi farqlarni avtomatik ravishda boshqaradi, bu esa ikkala tizim o'rtasida modullarni import va eksport qilishni osonlashtiradi. Bu sozlama, ayniqsa, turli xil modul tizimlaridan foydalanishi mumkin bo'lgan uchinchi tomon kutubxonalari bilan ishlashda foydalidir.

Misol:

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

moduleResolution

moduleResolution sozlamasi TypeScript'ning modul importlarini qanday aniqlashini belgilaydi. Umumiy qiymatlar qatoriga Node va Classic kiradi. Node modulni aniqlash strategiyasi standart hisoblanadi va Node.js modulni aniqlash algoritmi asosida ishlaydi. Classic modulni aniqlash strategiyasi eskiroq va kamroq ishlatiladi. Node modulni aniqlash strategiyasidan foydalanish TypeScript'ning Node.js muhitida modul importlarini to'g'ri aniqlashini ta'minlaydi.

Misol:

{
  "compilerOptions": {
    "moduleResolution": "Node"
  }
}

baseUrl va paths

baseUrl va paths sozlamalari nisbiy bo'lmagan modul importlari uchun modulni aniqlashni sozlash uchun ishlatiladi. baseUrl sozlamasi nisbiy bo'lmagan modul nomlarini aniqlash uchun asosiy katalogni belgilaydi. paths sozlamasi modul nomlarini fayl tizimidagi ma'lum joylarga xaritalash imkonini beradi. Bu sozlamalar, ayniqsa, murakkab katalog tuzilishiga ega bo'lgan loyihalar va modul importlarini soddalashtirish uchun foydalidir. baseUrl va paths dan foydalanish kodni o'qish uchun qulayroq va barqarorroq qilish mumkin.

Misol:

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

Include va Exclude Sozlamalari

include va exclude sozlamalari qaysi fayllarni kompilyatsiyaga kiritish kerakligini va qaysi fayllarni chiqarib tashlash kerakligini belgilaydi. Bu sozlamalar fayl nomlarini moslashtirish uchun glob shablonlaridan foydalanadi. include va exclude'dan foydalanish TypeScript kompilyatori tomonidan qaysi fayllar qayta ishlanishini nazorat qilish imkonini beradi, bu esa yig'ish unumdorligini oshiradi va xatolarni kamaytiradi. Kompilyatsiyaga kiritiladigan fayllarni aniq ko'rsatish eng yaxshi amaliyot hisoblanadi.

Misol:

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

Extends Sozlamasi

extends sozlamasi kompilyator sozlamalarini boshqa tsconfig.json faylidan meros qilib olishga imkon beradi. Bu bir nechta loyihalar o'rtasida umumiy konfiguratsiya sozlamalarini almashish yoki asosiy konfiguratsiyalarni yaratish uchun foydalidir. extends sozlamasidan foydalanish kodni qayta ishlatishni rag'batlantiradi va takrorlanishni kamaytiradi. Asosiy konfiguratsiyalarni yaratish va ularni alohida loyihalarda kengaytirish eng yaxshi amaliyot hisoblanadi.

Misol:

{
  "extends": "./tsconfig.base.json",
  "compilerOptions": {
    "jsx": "react-jsx"
  },
  "include": ["src/**/*"]
}

Ilg'or Konfiguratsiyalar

Asosiy kompilyator sozlamalaridan tashqari, tsconfig.json maxsus holatlar uchun ilg'or konfiguratsiyalarni qo'llab-quvvatlaydi.

Inkremental Kompilyatsiya

Katta loyihalar uchun inkremental kompilyatsiya yig'ish vaqtini sezilarli darajada yaxshilashi mumkin. TypeScript oldingi kompilyatsiyalar natijalarini keshda saqlashi va faqat o'zgargan fayllarni qayta kompilyatsiya qilishi mumkin. Inkremental kompilyatsiyani yoqish katta loyihalar uchun yig'ish vaqtini keskin qisqartirishi mumkin. Bu, ayniqsa, ko'p sonli fayllar va bog'liqliklarga ega bo'lgan loyihalar uchun muhimdir.

{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": ".tsbuildinfo"
  }
}

Loyiha Havolalari

Loyiha havolalari katta TypeScript loyihalarini kichikroq, mustaqil modullarga ajratish imkonini beradi. Bu yig'ish vaqtini va kodni tashkil etishni yaxshilashi mumkin. Loyiha havolalaridan foydalanish katta loyihalarni boshqarishni osonlashtirishi va ularni saqlashni soddalashtirishi mumkin. Katta, murakkab loyihalar uchun loyiha havolalaridan foydalanish eng yaxshi amaliyot hisoblanadi.

{
  "compilerOptions": {
    "composite": true
  },
  "references": [
    { "path": "./module1" },
    { "path": "./module2" }
  ]
}

Maxsus Tip Ta'riflari

Ba'zida sizda tip ta'riflari bo'lmagan JavaScript kutubxonalari uchun tip ta'riflarini taqdim etishingiz kerak bo'lishi mumkin. Siz ushbu kutubxonalar uchun tiplarni aniqlash uchun maxsus .d.ts fayllarini yaratishingiz mumkin. Maxsus tip ta'riflarini yaratish TypeScript kodingizda JavaScript kutubxonalaridan tip xavfsizligini yo'qotmasdan foydalanish imkonini beradi. Bu, ayniqsa, eski JavaScript kodi yoki o'z tip ta'riflarini taqdim etmaydigan kutubxonalar bilan ishlashda foydalidir.

// custom.d.ts
declare module 'my-library' {
  export function doSomething(x: number): string;
}

Eng Yaxshi Amaliyotlar

• Qat'iy rejimdan foydalaning: Kengaytirilgan tip tekshiruvi uchun strict sozlamasini yoqing.
• Maqsadni belgilang: Ishga tushirish muhitingiz uchun mos target versiyasini tanlang.
• Chiqishni tartibga soling: Manba kodini kompilyatsiya qilingan koddan ajratish uchun outDir dan foydalaning.
• Bog'liqliklarni boshqaring: Qaysi fayllar kompilyatsiya qilinishini nazorat qilish uchun include va exclude dan foydalaning.
• Extends imkoniyatidan foydalaning: extends sozlamasi bilan umumiy konfiguratsiya sozlamalarini almashing.
• Konfiguratsiyani Versiyalarni Boshqarish Tizimiga Qo'shing: Ishlab chiquvchi muhitlari va CI/CD konveyerlarida izchillikni saqlash uchun `tsconfig.json` faylini git'ga qo'shing.

Umumiy Muammolarni Bartaraf Etish

tsconfig.json ni sozlash ba'zan qiyin bo'lishi mumkin. Quyida ba'zi umumiy muammolar va ularning yechimlari keltirilgan:

Modulni Aniqlash Muammolari

Agar siz modulni aniqlash xatolariga duch kelsangiz, moduleResolution sozlamasi to'g'ri sozlanganligiga va baseUrl hamda paths sozlamalari to'g'ri o'rnatilganligiga ishonch hosil qiling. paths sozlamasida ko'rsatilgan yo'llarni to'g'riligini ikki marta tekshiring. Barcha kerakli modullar node_modules katalogiga o'rnatilganligini tekshiring.

Tip Xatolari

Agar tip ta'riflari noto'g'ri yoki yo'q bo'lsa, tip xatolari yuzaga kelishi mumkin. Siz ishlatayotgan barcha kutubxonalar uchun to'g'ri tip ta'riflari o'rnatilganligiga ishonch hosil qiling. Agar siz tip ta'riflari bo'lmagan JavaScript kutubxonasidan foydalanayotgan bo'lsangiz, maxsus tip ta'riflarini yaratishni ko'rib chiqing.

Kompilyatsiya Xatolari

Agar TypeScript kodingizda sintaksis xatolari yoki tip xatolari bo'lsa, kompilyatsiya xatolari yuzaga kelishi mumkin. Xato xabarlarini diqqat bilan ko'rib chiqing va har qanday sintaksis xatolari yoki tip xatolarini tuzating. Kodingiz TypeScript kodlash qoidalariga rioya qilishiga ishonch hosil qiling.

Xulosa

Yaxshi sozlangan tsconfig.json fayli muvaffaqiyatli TypeScript loyihasi uchun zarurdir. Muhim kompilyator sozlamalari va ilg'or konfiguratsiyalarni tushunish orqali siz o'z ishlab chiqish jarayoningizni optimallashtirishingiz, kod sifatini yaxshilashingiz va maqsadli muhit bilan mosligini ta'minlashingiz mumkin. tsconfig.json ni to'g'ri sozlashga vaqt ajratish uzoq muddatda xatolarni kamaytirish, barqarorlikni yaxshilash va yig'ish jarayonini soddalashtirish orqali o'zini oqlaydi. Bu esa yanada samarali va ishonchli dasturiy ta'minot ishlab chiqishga olib keladi. Bu yerda taqdim etilgan ma'lumotlar universal qo'llanilishi uchun mo'ljallangan va TypeScript bilan yangi loyihani boshlash uchun mustahkam poydevor yaratishi kerak.

Eng so'nggi ma'lumotlar va barcha mavjud kompilyator sozlamalarining batafsil tushuntirishlari uchun rasmiy TypeScript hujjatlariga murojaat qilishni unutmang. TypeScript hujjatlari TypeScript konfiguratsiyasining nozikliklarini tushunish uchun qimmatli manba hisoblanadi.