TypeScript loyihani sozlash va JS'dan ko'chirish

Bo’limning boshida tsconfig.json ga beshta sozlama yozgan edingiz. Amalda esa tayyor loyihalarda o’nlab sozlama uchraydi.

Bu darsda ikki savolga javob topasiz: qaysi sozlama nima qiladi va mavjud JavaScript loyihasini TypeScript’ga qanday ko’chirish kerak.

tsconfig.json ni avtomatik yaratish

Qo’lda yozish o’rniga buyruq berish mumkin:

npx tsc --init

Created a new tsconfig.json

You can learn more at https://aka.ms/tsconfig

Hosil bo’lgan fayl uzun: unda ko’p sozlama izoh bilan o’chirilgan holda turadi. Boshlash uchun qisqa variant qulayroq.

Amaliy minimal sozlama

Kundalik ish uchun shu yetarli:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "nodenext",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
}

Har sozlama nima qilishini ko’ramiz.

target — qaysi JavaScript versiyasi

target natija qaysi JavaScript versiyasida yozilishini belgilaydi.

ES2022 zamonaviy Node.js va brauzerlar uchun xavfsiz tanlov. Undan past qo’ysangiz, TypeScript yangi sintaksisni eski shaklga aylantiradi va kod uzayadi.

module — modul tizimi

Qiymat	Qachon
nodenext	Node.js loyihalari uchun
esnext	Brauzer va bundler bilan ishlaganda
commonjs	Eski Node.js kodi bilan

Modullar darsidagi import va export yozuvlari shu sozlamaga qarab tarjima qilinadi.

strict — asosiy himoya

strict: true bitta sozlama emas — u bir nechta tekshiruvni birdan yoqadi:

Ichki sozlama	Nima qiladi
noImplicitAny	Tip yozilmagan parametrni ushlaydi
strictNullChecks	null va undefined ni tekshirishga majburlaydi
strictFunctionTypes	Funksiya tiplarini qat’iy solishtiradi
strictPropertyInitialization	Sinf maydoni to’ldirilganini tekshiradi
useUnknownInCatchVariables	catch dagi qiymatni unknown qiladi

Bu bo’limdagi deyarli har xato aynan shu sozlama tufayli chiqdi: DOM darsidagi null tekshiruvi, any darsidagi TS7006 ogohlantirishi.

Qo’shimcha foydali sozlamalar

Sozlama	Nima qiladi
skipLibCheck	Kutubxona tip fayllarini tekshirmaydi — tezlashtiradi
esModuleInterop	Eski CommonJS paketlarini import bilan ishlatishga imkon beradi
forceConsistentCasingInFileNames	Fayl nomidagi katta-kichik harf farqini ushlaydi
noUnusedLocals	Ishlatilmagan o’zgaruvchini ko’rsatadi
noUncheckedIndexedAccess	Massiv elementiga undefined qo’shadi

include va exclude

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

include qaysi papka tekshirilishini, exclude qaysi biri chetlab o’tilishini aytadi. node_modules sukut bo’yicha ham chetlanadi, lekin uni aniq yozish niyatni ravshan qiladi.

Mavjud JavaScript loyihasini ko’chirish

Butun loyihani bir kunda qayta yozish shart emas. TypeScript bosqichma-bosqich ko’chirishga mo’ljallangan.

1-qadam: allowJs bilan boshlash

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "nodenext",
    "rootDir": "src",
    "outDir": "dist",
    "strict": true,
    "allowJs": true
  },
  "include": ["src"]
}

allowJs: true — .js fayllar ham loyihaga kiradi. Hech narsa buzilmaydi: mavjud kod avvalgidek ishlaydi.

2-qadam: bitta faylni tekshirishga qo’yish

Butun loyihani birdan tekshirish o’rniga, bitta fayl tepasiga izoh qo’ying:

// @ts-check

/**
 * @param {number} value
 * @returns {number}
 */
function double(value) {
  return value * 2;
}

console.log(double("salom"));

src/legacy.js(11,20): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Diqqat qiling: bu .js fayl. Tiplar izoh ichida yozilgan, lekin tekshiruv xuddi TypeScript’dagi kabi ishladi.

Bu usul foydali: fayl nomini o’zgartirmasdan, kodga tegmasdan tekshiruvni sinab ko’rasiz.

3-qadam: fayllarni birma-bir ko’chirish

Tayyor bo’lgan faylni .js dan .ts ga o’zgartiring va izohdagi tiplarni kodga ko’chiring:

function double(value: number): number {
  return value * 2;
}

console.log(double(21));

npx tsc --noEmit

Xato bo’lmasa, keyingi faylga o’ting.

4-qadam: checkJs bilan qolganini ko’rish

Barcha .js fayllarni birdan tekshirish uchun:

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

src/legacy.js(1,17): error TS7006: Parameter 'value' implicitly has an 'any' type.

Bu qadam qancha ish qolganini ko’rsatadi.

Node.js loyihasi uchun @types/node

Node.js modullari bilan ishlasangiz, ularning tip tavsiflari alohida paketda keladi:

npm install --save-dev @types/node

Busiz fs yoki path modullarini import qilganda xato chiqadi.

Node.js va TypeScript darsida bu paket va server tomonidagi ish batafsil ko’rilgan.

Tekshiruvni odatga aylantirish

package.json ga skript yozing:

{
  "scripts": {
    "check": "tsc --noEmit",
    "build": "tsc"
  }
}

npm run check

Bu buyruqni kod saqlashdan oldin yuritish odati vaqt tejaydi: xato serverga chiqmasdan topiladi.

Bo’limda nimalarni o’rgandingiz

Dars	Asosiy natija
TypeScript nima	Tiplar xatoni ishga tushirishdan oldin topadi
Asosiy tiplar	string, number, boolean va tip chiqarish
Obyekt tiplari	type, ixtiyoriy maydon, readonly
Union va literal	Toraytirish va ruxsat etilgan qiymatlar
Generiklar	Tipni parametr sifatida uzatish
Utility tiplar	Bitta tipdan boshqalarini yasash

Amaliy mashq

1. npx tsc --init bilan sozlama faylini yaratib, ichidagi izohlarni ko’rib chiqing;
2. Yuqoridagi minimal sozlamani o’z loyihangizga qo’llang va npm run check skriptini qo’shing;
3. Kichik JavaScript faylini allowJs: true bilan loyihaga qo’shing;
4. Shu fayl tepasiga // @ts-check yozib, JSDoc bilan tip qo’shing va xato chiqarib ko’ring;
5. Faylni .ts ga o’zgartirib, tiplarni izohdan kodga ko’chiring;
6. checkJs: true yoqib, loyihada qancha tekshirilmagan fayl qolganini sanang.

4-qadam eng muhimi: u butun loyihani o’zgartirmasdan tekshiruvni sinab ko’rish imkonini beradi — aynan shu yondashuv katta loyihani ko’chirishni amalga oshirib bo’ladigan ishga aylantiradi.

Qisqacha xulosa

• npx tsc --init sozlama faylini yaratadi, lekin qisqa qo’lda yozilgan variant amaliyroq.
• strict: true bir nechta tekshiruvni birdan yoqadi va birinchi kundan qo’yiladi.
• skipLibCheck yig’ishni tezlashtiradi, forceConsistentCasingInFileNames Linux serveridagi xatoni oldindan ushlaydi.
• Mavjud loyiha bosqichma-bosqich ko’chiriladi: allowJs → // @ts-check → .ts → checkJs.
• JSDoc izohlari .js faylda ham tip tekshiruvini beradi.
• Node.js modullari uchun @types/node kerak.
• Muharrir ochiq fayllarni tekshiradi — butun loyiha uchun npm run check yuritiladi.

Bo’limni tugatdingiz. Endi TypeScript’ni amalda ishlatish uchun Node.js va TypeScript darsiga o’ting yoki o’z loyihangizni ko’chirishni boshlang.