Chapter 0 — TypeScript'ga Kirish: Muammo, Yechim va Sozlash

TypeScript — Microsoft tomonidan yaratilgan, JavaScript ustiga statik tip tekshiruvini qo'shuvchi til. Bu bob boshqalarga qaraganda kengroq — TypeScript'ning "nega"sini, kompilyatsiya jarayonini va loyihani sozlashni chuqur yoritadi.

---

0.1 JavaScript'ning Muammosi

Simple Explanation

JavaScript — dinamik tipli til: o'zgaruvchining turi runtime'da (dastur ishlayotgan paytda) aniqlanadi. Bu moslashuvchanlik beradi, lekin katta loyihalarda xatolarni kech (foydalanuvchida) aniqlashga olib keladi.

Real-World Muammo

script.js
JavaScriptNusxalash
01function calculateTotal(price, quantity) {
02  return price * quantity;
03}
04 
05calculateTotal("100", 5);   // "100100100100100" — kutilmagan natija!
06calculateTotal(100);         // NaN — quantity undefined

Bu ikkala chaqiruv ham JavaScript'da hech qanday xato bermaydi — muammo faqat dastur ishga tushgandan keyin, kutilmagan natija sifatida namoyon bo'ladi.

Why Does TypeScript Exist?

TypeScript — aynan shu turdagi xatolarni yozish paytida (compile vaqtida), dastur ishga tushishidan oldin aniqlash uchun yaratilgan.

0.2 TypeScript Qanday Ishlaydi: Kompilyatsiya Jarayoni

Simple Explanation

TypeScript — brauzerda to'g'ridan-to'g'ri ishlamaydi. U avval "compile" (aniqrog'i, "transpile") qilinib, oddiy JavaScript'ga aylantiriladi, tiplar esa bu jarayonda olib tashlanadi.

Diagram

code.text
TEXTNusxalash
01.ts fayl (tiplar bilan)
02     ↓
03TypeScript Compiler (tsc)
04     ↓
05Tip tekshiruvi (xatolar shu yerda aniqlanadi)
06     ↓
07.js fayl (tiplarsiz, brauzer tushunadigan)

Example

index.ts
TypeScriptNusxalash
01// input.ts
02function greet(name: string): string {
03  return `Salom, ${name}`;
04}

script.js
JavaScriptNusxalash
01// output.js (compile qilingandan keyin)
02function greet(name) {
03  return `Salom, ${name}`;
04}

0.3 Loyihani Sozlash

Example

terminal.sh
BashNusxalash
01npm install -D typescript
02npx tsc --init   # tsconfig.json yaratadi
03npx tsc          # barcha .ts fayllarni compile qiladi

tsconfig.json Asosiy Sozlamalari

data.json
JSONNusxalash
01{
02  "compilerOptions": {
03    "target": "ES2020",
04    "module": "ESNext",
05    "strict": true,
06    "outDir": "./dist",
07    "rootDir": "./src"
08  }
09}

💡 Key Idea
"strict": true — TypeScript'ning eng qattiq tip tekshiruvi rejimini yoqadi. Yangi loyihalar uchun bu deyarli har doim tavsiya etiladi, chunki u ko'plab potentsial xatolarni oldindan aniqlaydi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: TypeScript'ni loyihangizga o'rnating va oddiy .ts faylini compile qiling.

🟡 Exercise 2 — Medium

Task: tsconfig.json yaratib, strict rejimini yoqing va bitta atayin xato (masalan noto'g'ri tur bilan funksiya chaqiruvi) yozib, compiler xatosini kuzating.

🐛 Debugging Challenge

index.ts
TypeScriptNusxalash
01function add(a: number, b: number) {
02  return a + b;
03}
04 
05console.log(add("5", "10"));

Your Task: Bu kod compile vaqtida xato beradimi? Nega?

<details> <summary>Solution</summary> Ha, xato beradi: `Argument of type 'string' is not assignable to parameter of type 'number'`. TypeScript `a` va `b`ning `number` turida bo'lishini talab qiladi, `"5"` va `"10"` — string. Bu — aynan JavaScript'da yashirin qolib, TypeScript'da ochiq bo'ladigan xato turiga misol. </details>

📌 Chapter Summary

TypeScript — JavaScript'ga statik tip tekshiruvini qo'shib, xatolarni compile vaqtida aniqlash imkonini beradi. U brauzerda to'g'ridan-to'g'ri ishlamaydi — avval JavaScript'ga compile qilinadi, tiplar esa bu jarayonda olib tashlanadi. tsconfig.json — loyiha konfiguratsiyasining markazi, strict: true esa eng qattiq tip xavfsizligini yoqadi.

🎯 Key Takeaways

• JavaScript — dinamik tipli, TypeScript — statik tip tekshiruvi qo'shadi
• TypeScript kodi runtime'da ishlamaydi, avval JS'ga compile qilinadi
• Tiplar compile vaqtida "o'chiriladi" (type erasure)
• strict: true — yangi loyihalar uchun tavsiya etiladigan sozlama

⚡ Quick Cheat Sheet

terminal.sh
BashNusxalash
01npm install -D typescript
02npx tsc --init
03npx tsc

data.json
JSONNusxalash
01{ "compilerOptions": { "strict": true, "target": "ES2020" } }

---