TypeScript Konfiguratsiyasi: TSConfig Kompilyator Opsiyalarini O'zlashtirish

tsconfig.json fayli har qanday TypeScript loyihasining yuragidir. U TypeScript kompilyatori (tsc) sizning .ts fayllaringizni JavaScript-ga qanday aylantirishini belgilaydi. Yaxshi sozlangan tsconfig.json kod sifatini saqlash, turli muhitlarda moslikni ta'minlash va qurish jarayonini optimallashtirish uchun juda muhimdir. Ushbu keng qamrovli qo'llanma TypeScript loyihalaringizni yuqori unumdorlik va qo'llab-quvvatlanuvchanlik uchun sozlash imkonini beruvchi ilg'or tsconfig.json opsiyalarini chuqur o'rganadi.

Asoslarni Tushunish: Nima Uchun TSConfig Muhim

Ilg'or opsiyalarga kirishishdan oldin, keling, nima uchun tsconfig.json juda muhim ekanligini eslab o'tamiz:

• Kompilyatsiyani Boshqarish: U loyihangizga qaysi fayllar kiritilishi va ular qanday kompilyatsiya qilinishi kerakligini belgilaydi.
• Tiplarni Tekshirish: U tiplarni tekshirish qoidalari va qat'iyligini belgilaydi, bu esa ishlab chiqish siklining boshida xatolarni aniqlashga yordam beradi.
• Chiqishni Boshqarish: U maqsadli JavaScript versiyasini, modul tizimini va chiqish katalogini belgilaydi.
• IDE Integratsiyasi: U IDE'larga (VS Code, WebStorm va boshqalar kabi) kodni to'ldirish, xatolarni ajratib ko'rsatish va refaktoring kabi xususiyatlar uchun qimmatli ma'lumotlarni taqdim etadi.

tsconfig.json faylisiz TypeScript kompilyatori standart sozlamalardan foydalanadi, bu esa barcha loyihalar uchun mos kelmasligi mumkin. Bu kutilmagan xatti-harakatlarga, moslik muammolariga va ideal bo'lmagan ishlab chiqish tajribasiga olib kelishi mumkin.

O'z TSConfig Faylingizni Yaratish: Tez Boshlash

tsconfig.json faylini yaratish uchun loyihangizning ildiz katalogida quyidagi buyruqni bajaring:

            tsc --init
            

              
                Copy
              
            
          

Bu ba'zi umumiy opsiyalarga ega bo'lgan asosiy tsconfig.json faylini yaratadi. Keyin siz ushbu faylni loyihangizning maxsus talablariga mos ravishda sozlashingiz mumkin.

Asosiy Kompilyator Opsiyalari: Batafsil Sharh

tsconfig.json fayli compilerOptions obyektini o'z ichiga oladi, bu yerda siz TypeScript kompilyatorini sozlay olasiz. Keling, eng muhim va keng tarqalgan opsiyalardan ba'zilarini ko'rib chiqamiz:

target

Ushbu opsiya kompilyatsiya qilingan JavaScript kodining ECMAScript maqsad versiyasini belgilaydi. U kompilyator qaysi JavaScript xususiyatlaridan foydalanishini aniqlaydi va maqsad muhit (masalan, brauzerlar, Node.js) bilan moslikni ta'minlaydi. Keng tarqalgan qiymatlar: ES5, ES6 (ES2015), ES2017, ES2018, ES2019, ES2020, ES2021, ES2022, ESNext. ESNext dan foydalanish eng so'nggi qo'llab-quvvatlanadigan ECMAScript xususiyatlariga mo'ljallangan bo'ladi.

Misol:

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

              
                Copy
              
            
          

Ushbu konfiguratsiya kompilyatorga ECMAScript 2020 bilan mos keladigan JavaScript kodini yaratishni buyuradi.

module

Ushbu opsiya kompilyatsiya qilingan JavaScript kodida ishlatiladigan modul tizimini belgilaydi. Keng tarqalgan qiymatlar: CommonJS, AMD, System, UMD, ES6 (ES2015), ES2020, va ESNext. Modul tizimini tanlash maqsad muhitga va ishlatilayotgan modul yuklovchisiga (masalan, Node.js, Webpack, Browserify) bog'liq.

Misol:

            "compilerOptions": {
  "module": "CommonJS"
}
            

              
                Copy
              
            
          

Ushbu konfiguratsiya odatda CommonJS modul tizimidan foydalanadigan Node.js loyihalari uchun mos keladi.

lib

Ushbu opsiya kompilyatsiya jarayoniga kiritiladigan kutubxona fayllari to'plamini belgilaydi. Ushbu kutubxona fayllari o'rnatilgan JavaScript API'lari va brauzer API'lari uchun tip ta'riflarini taqdim etadi. Keng tarqalgan qiymatlar: ES5, ES6, ES7, DOM, WebWorker, ScriptHost, va boshqalar.

Misol:

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

              
                Copy
              
            
          

Ushbu konfiguratsiya ECMAScript 2020 va brauzerga asoslangan loyihalar uchun zarur bo'lgan DOM API uchun tip ta'riflarini o'z ichiga oladi.

allowJs

Ushbu opsiya TypeScript kompilyatoriga JavaScript fayllarini TypeScript fayllari bilan birga kompilyatsiya qilishga imkon beradi. Bu JavaScript loyihasini TypeScript-ga o'tkazishda yoki mavjud JavaScript kod bazalari bilan ishlashda foydali bo'lishi mumkin.

Misol:

            "compilerOptions": {
  "allowJs": true
}
            

              
                Copy
              
            
          

Ushbu opsiya yoqilganda, kompilyator ham .ts, ham .js fayllarini qayta ishlaydi.

checkJs

Ushbu opsiya JavaScript fayllari uchun tip tekshiruvini yoqadi. allowJs bilan birgalikda ishlatilganda, u TypeScript-ga sizning JavaScript kodingizdagi potensial tip xatolarini aniqlashga imkon beradi.

Misol:

            "compilerOptions": {
  "allowJs": true,
  "checkJs": true
}
            

              
                Copy
              
            
          

Ushbu konfiguratsiya ham TypeScript, ham JavaScript fayllari uchun tip tekshiruvini ta'minlaydi.

jsx

Ushbu opsiya JSX sintaksisi (React va boshqa freymvorklarda qo'llaniladi) qanday o'zgartirilishini belgilaydi. Keng tarqalgan qiymatlar: preserve, react, react-native, va react-jsx. preserve JSX sintaksisini o'z holicha qoldiradi, react uni React.createElement chaqiruvlariga aylantiradi, react-native React Native ishlab chiqish uchun, va react-jsx uni JSX fabrikasi funksiyalariga aylantiradi. react-jsxdev ishlab chiqish maqsadlari uchun.

Misol:

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

              
                Copy
              
            
          

Ushbu konfiguratsiya React loyihalari uchun mos keladi va JSX-ni React.createElement chaqiruvlariga aylantiradi.

declaration

Ushbu opsiya sizning TypeScript kodingiz uchun deklaratsiya fayllarini (.d.ts) yaratadi. Deklaratsiya fayllari kodingiz uchun tip ma'lumotlarini taqdim etadi, bu esa boshqa TypeScript loyihalari yoki JavaScript loyihalariga kodingizdan to'g'ri tip tekshiruvi bilan foydalanish imkonini beradi.

Misol:

            "compilerOptions": {
  "declaration": true
}
            

              
                Copy
              
            
          

Ushbu konfiguratsiya kompilyatsiya qilingan JavaScript fayllari bilan birga .d.ts fayllarini yaratadi.

declarationMap

Ushbu opsiya yaratilgan deklaratsiya fayllari uchun manba xarita fayllarini (.d.ts.map) yaratadi. Manba xaritalari sozlovchilar (debuggers) va boshqa vositalarga deklaratsiya fayllari bilan ishlashda asl TypeScript manba kodiga qaytish imkonini beradi.

Misol:

            "compilerOptions": {
  "declaration": true,
  "declarationMap": true
}
            

              
                Copy
              
            
          

sourceMap

Ushbu opsiya kompilyatsiya qilingan JavaScript kodi uchun manba xarita fayllarini (.js.map) yaratadi. Manba xaritalari sozlovchilar va boshqa vositalarga brauzerda yoki boshqa muhitlarda sozlash paytida asl TypeScript manba kodiga qaytish imkonini beradi.

Misol:

            "compilerOptions": {
  "sourceMap": true
}
            

              
                Copy
              
            
          

outFile

Ushbu opsiya barcha chiqish fayllarini birlashtirib, bitta faylga chiqaradi. Bu odatda brauzerga asoslangan ilovalar uchun kodni birlashtirishda ishlatiladi.

Misol:

            "compilerOptions": {
  "outFile": "dist/bundle.js"
}
            

              
                Copy
              
            
          

outDir

Ushbu opsiya kompilyatsiya qilingan JavaScript fayllari uchun chiqish katalogini belgilaydi. Agar belgilanmagan bo'lsa, kompilyator chiqish fayllarini manba fayllari bilan bir xil katalogga joylashtiradi.

Misol:

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

              
                Copy
              
            
          

Ushbu konfiguratsiya kompilyatsiya qilingan JavaScript fayllarini dist katalogiga joylashtiradi.

rootDir

Ushbu opsiya TypeScript loyihasining ildiz katalogini belgilaydi. Kompilyator ushbu katalogdan modul nomlarini topish va chiqish fayl yo'llarini yaratish uchun foydalanadi. Bu, ayniqsa, murakkab loyiha tuzilmalari uchun foydalidir.

Misol:

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

              
                Copy
              
            
          

removeComments

Ushbu opsiya kompilyatsiya qilingan JavaScript kodidan izohlarni olib tashlaydi. Bu chiqish fayllari hajmini kamaytirishga yordam beradi.

Misol:

            "compilerOptions": {
  "removeComments": true
}
            

              
                Copy
              
            
          

noEmitOnError

Ushbu opsiya har qanday tip xatolari aniqlansa, kompilyatorning JavaScript fayllarini chiqarmasligini ta'minlaydi. Bu faqat to'g'ri kod yaratilishini kafolatlaydi.

Misol:

            "compilerOptions": {
  "noEmitOnError": true
}
            

              
                Copy
              
            
          

strict

Ushbu opsiya barcha qat'iy tip tekshiruvi opsiyalarini yoqadi. Bu yangi loyihalar uchun juda tavsiya etiladi, chunki u potensial xatolarni aniqlashga va eng yaxshi amaliyotlarni qo'llashga yordam beradi.

Misol:

            "compilerOptions": {
  "strict": true
}
            

              
                Copy
              
            
          

Qat'iy rejimni yoqish quyidagi opsiyalarni yoqish bilan bir xil:

• noImplicitAny
• noImplicitThis
• alwaysStrict
• strictNullChecks
• strictFunctionTypes
• strictBindCallApply
• noImplicitReturns
• noFallthroughCasesInSwitch

esModuleInterop

Ushbu opsiya CommonJS va ES modullari o'rtasidagi o'zaro ishlashni yoqadi. U sizga CommonJS modullarini ES modullarida import qilishga va aksincha imkon beradi.

Misol:

            "compilerOptions": {
  "esModuleInterop": true
}
            

              
                Copy
              
            
          

forceConsistentCasingInFileNames

Ushbu opsiya fayl nomlarida bir xil registrdan (casing) foydalanishni talab qiladi. Bu platformalararo moslik uchun muhim, chunki ba'zi operatsion tizimlar registrga sezgir, boshqalari esa sezgir emas.

Misol:

            "compilerOptions": {
  "forceConsistentCasingInFileNames": true
}
            

              
                Copy
              
            
          

baseUrl va paths

Ushbu opsiyalar modulni topishni sozlash imkonini beradi. baseUrl nisbiy bo'lmagan modul nomlarini topish uchun asosiy katalogni belgilaydi va paths sizga maxsus modul taxalluslarini (aliases) belgilashga imkon beradi.

Misol:

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

              
                Copy
              
            
          

Ushbu konfiguratsiya sizga @components/MyComponent va @utils/myFunction kabi taxalluslar yordamida modullarni import qilish imkonini beradi.

Ilg'or Konfiguratsiya: Asoslardan Tashqari

Endi, TypeScript ishlab chiqish tajribangizni yanada yaxshilaydigan ba'zi ilg'or tsconfig.json opsiyalarini ko'rib chiqamiz.

Inkremental Kompilyatsiya

TypeScript inkremental kompilyatsiyani qo'llab-quvvatlaydi, bu katta loyihalar uchun qurish jarayonini sezilarli darajada tezlashtirishi mumkin. Inkremental kompilyatsiyani yoqish uchun incremental opsiyasini true ga o'rnating va tsBuildInfoFile opsiyasini belgilang.

Misol:

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

              
                Copy
              
            
          

tsBuildInfoFile opsiyasi kompilyator qurish ma'lumotlarini saqlaydigan faylni belgilaydi. Ushbu ma'lumotlar keyingi qurishlar paytida qaysi fayllarni qayta kompilyatsiya qilish kerakligini aniqlash uchun ishlatiladi.

Loyiha Havolalari

Loyiha havolalari kodingizni kichikroq, boshqarish osonroq bo'lgan loyihalarga bo'lish imkonini beradi. Bu katta kod bazalari uchun qurish vaqtini va kod tashkilotini yaxshilashi mumkin. Bu konsepsiyaga yaxshi o'xshashlik Mikroservis arxitekturasi bo'lishi mumkin - har bir servis mustaqil, ammo ekotizimdagi boshqalariga tayanadi.

Loyiha havolalaridan foydalanish uchun har bir loyiha uchun alohida tsconfig.json faylini yaratishingiz kerak. Keyin, asosiy tsconfig.json faylida references opsiyasidan foydalanib havola qilinishi kerak bo'lgan loyihalarni belgilashingiz mumkin.

Misol:

            {
  "compilerOptions": {
    ...
  },
  "references": [
    { "path": "./project1" },
    { "path": "./project2" }
  ]
}
            

              
                Copy
              
            
          

Ushbu konfiguratsiya joriy loyiha ./project1 va ./project2 kataloglarida joylashgan loyihalarga bog'liqligini belgilaydi.

Maxsus Transformerlar

Maxsus transformerlar TypeScript kompilyatorining chiqishini o'zgartirishga imkon beradi. Bu turli maqsadlarda, masalan, maxsus kod o'zgartirishlarini qo'shish, ishlatilmaydigan kodni olib tashlash yoki ma'lum muhitlar uchun chiqishni optimallashtirish uchun ishlatilishi mumkin. Ular odatda i18n xalqarolashtirish va lokalizatsiya vazifalari uchun ishlatiladi.

Maxsus transformerlardan foydalanish uchun kompilyator tomonidan chaqiriladigan funksiyani eksport qiladigan alohida JavaScript faylini yaratishingiz kerak. Keyin, tsconfig.json faylidagi plugins opsiyasi yordamida transformer faylini belgilashingiz mumkin.

Misol:

            {
  "compilerOptions": {
    ...
    "plugins": [
      { "transform": "./transformer.js" }
    ]
  }
}
            

              
                Copy
              
            
          

Ushbu konfiguratsiya ./transformer.js fayli maxsus transformer sifatida ishlatilishi kerakligini belgilaydi.

Fayllar, Include va Exclude

compilerOptions dan tashqari, tsconfig.json dagi boshqa ildiz darajasidagi opsiyalar kompilyatsiya jarayoniga qaysi fayllar kiritilishini boshqaradi:

• files: Kompilyatsiyaga kiritiladigan fayl yo'llari massivi.
• include: Kiritiladigan fayllarni belgilovchi glob naqshlari massivi.
• exclude: Istisno qilinadigan fayllarni belgilovchi glob naqshlari massivi.

Ushbu opsiyalar TypeScript kompilyatori tomonidan qaysi fayllar qayta ishlanishini nozik darajada boshqarish imkonini beradi. Masalan, siz test fayllarini yoki generatsiya qilingan kodni kompilyatsiya jarayonidan chiqarib tashlashingiz mumkin.

Misol:

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

              
                Copy
              
            
          

Ushbu konfiguratsiya src katalogi va uning quyi kataloglaridagi barcha fayllarni o'z ichiga oladi, shu bilan birga node_modules va dist kataloglaridagi fayllarni, shuningdek, .spec.ts kengaytmali har qanday fayllarni (odatda birlik testlari uchun ishlatiladi) istisno qiladi.

Maxsus Stsenariylar uchun Kompilyator Opsiyalari

Turli loyihalar optimal natijalarga erishish uchun turli xil kompilyator sozlamalarini talab qilishi mumkin. Keling, bir nechta maxsus stsenariylarni va har biri uchun tavsiya etilgan kompilyator sozlamalarini ko'rib chiqamiz.

Veb-Ilovalarni Ishlab Chiqish

Veb-ilovalarni ishlab chiqish uchun odatda quyidagi kompilyator sozlamalaridan foydalanish tavsiya etiladi:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "jsx": "react-jsx",
    "esModuleInterop": true,
    "strict": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "sourceMap": true,
    "outDir": "dist"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Ushbu sozlamalar React yoki boshqa shunga o'xshash freymvorklardan foydalanadigan zamonaviy veb-ilovalar uchun mos keladi. Ular eng so'nggi ECMAScript xususiyatlariga mo'ljallangan, ES modullaridan foydalanadi va qat'iy tip tekshiruvini yoqadi.

Node.js Backend Ishlab Chiqish

Node.js backend ishlab chiqish uchun odatda quyidagi kompilyator sozlamalaridan foydalanish tavsiya etiladi:

            {
  "compilerOptions": {
    "target": "ESNext",
    "module": "CommonJS",
    "esModuleInterop": true,
    "strict": true,
    "sourceMap": true,
    "outDir": "dist",
    "resolveJsonModule": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}
            

              
                Copy
              
            
          

Ushbu sozlamalar CommonJS modul tizimidan foydalanadigan Node.js ilovalari uchun mos keladi. Ular eng so'nggi ECMAScript xususiyatlariga mo'ljallangan, qat'iy tip tekshiruvini yoqadi va JSON fayllarini modul sifatida import qilishga imkon beradi.

Kutubxona Ishlab Chiqish

Kutubxona ishlab chiqish uchun odatda quyidagi kompilyator sozlamalaridan foydalanish tavsiya etiladi:

            {
  "compilerOptions": {
    "target": "ES5",
    "module": "UMD",
    "declaration": true,
    "declarationMap": true,
    "sourceMap": true,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}
            

              
                Copy
              
            
          

Ushbu sozlamalar ham brauzer, ham Node.js muhitlarida ishlatilishi mumkin bo'lgan kutubxonalarni yaratish uchun mos keladi. Ular ishlab chiquvchilar tajribasini yaxshilash uchun deklaratsiya fayllari va manba xaritalarini yaratadi.

TSConfig Boshqaruvi uchun Eng Yaxshi Amaliyotlar

tsconfig.json fayllaringizni boshqarishda yodda tutish kerak bo'lgan ba'zi eng yaxshi amaliyotlar:

• Asosiy konfiguratsiyadan boshlang: Umumiy sozlamalarga ega bo'lgan asosiy tsconfig.json faylini yarating va keyin uni extends opsiyasi yordamida boshqa loyihalarda kengaytiring.
• Qat'iy rejimdan foydalaning: Potensial xatolarni aniqlash va eng yaxshi amaliyotlarni qo'llash uchun qat'iy rejimni yoqing.
• Modulni topishni sozlang: Import xatolarini oldini olish uchun modulni topishni to'g'ri sozlang.
• Loyiha havolalaridan foydalaning: Kodingizni loyiha havolalari yordamida kichikroq, boshqarish osonroq loyihalarga bo'ling.
• tsconfig.json faylingizni yangilab turing: tsconfig.json faylingizni muntazam ravishda ko'rib chiqing va loyihangiz rivojlanishi bilan uni yangilang.
• tsconfig.json faylingizni versiya nazoratiga oling: tsconfig.json faylingizni boshqa manba kodingiz bilan birga versiya nazoratiga qo'shing.
• Konfiguratsiyangizni hujjatlashtiring: Har bir opsiyaning maqsadini tushuntirish uchun tsconfig.json faylingizga izohlar qo'shing.

Xulosa: TypeScript Konfiguratsiyasini O'zlashtirish

tsconfig.json fayli TypeScript kompilyatorini sozlash va qurish jarayonini boshqarish uchun kuchli vositadir. Mavjud opsiyalarni tushunish va eng yaxshi amaliyotlarga rioya qilish orqali siz TypeScript loyihalaringizni optimal ishlash, qo'llab-quvvatlanuvchanlik va moslik uchun sozlashingiz mumkin. Ushbu qo'llanma tsconfig.json faylida mavjud bo'lgan ilg'or opsiyalarning keng qamrovli sharhini taqdim etdi va sizga TypeScript ishlab chiqish ish jarayonini to'liq nazorat qilish imkonini berdi. Eng so'nggi ma'lumotlar va yo'l-yo'riqlar uchun har doim rasmiy TypeScript hujjatlariga murojaat qilishni unutmang. Loyihalaringiz rivojlanishi bilan, ushbu kuchli konfiguratsiya vositalarini tushunishingiz va ulardan foydalanishingiz ham rivojlanishi kerak. Omadli dasturlash!