TypeScript nima? Nima uchun kerak, JavaScript dan farqi
Muammodan boshlaylik
Siz e-commerce sayti yozdingiz. Unda mahsulot ob'ekti bor:
const mahsulot = {
nomi: "Noutbuk",
narxi: 8000000,
};
Bir kuni chegirma funksiyasi yozildi. Hamkasbingiz yozdi, siz ishlatdingiz:
function chegirmaHisoblash(narx, foiz) {
return narx - (narx * foiz / 100);
}
const yangiNarx = chegirmaHisoblash(mahsulot.narxi, "o'n"); // ← foiz o'rniga matn!
console.log(yangiNarx); // NaN
Dastur xato bermadi. Hisob qilindi — lekin natija NaN. Foydalanuvchi ekranda "0 so'm" ko'rdi. Kechqurun yuzlab buyurtma bekor bo'ldi. Muammo topildi — bir kecha-kunduz o'tgandan keyin.
JavaScript bu xatoni yozilayotganda ko'rsatmaydi. Faqat ishlayotganda bilinadi. Ba'zan ancha vaqt o'tgandan keyin.
Bu — JavaScript ning eng katta muammosi: xatolar yashirinib qoladi.
TypeScript nima?
TypeScript — JavaScript ga tur tizimi (type system) qo'shilgan til. Microsoft tomonidan 2012 yilda yaratilgan, ochiq manba.
"Tur tizimi" degani: har bir o'zgaruvchi, funksiya parametri, qaytish qiymati — qanday tur ekanini belgilash mumkin. TypeScript bu belgilarga qarab, kod yozilayotganda xatolarni topadi.
Yuqoridagi misol TypeScript da:
function chegirmaHisoblash(narx: number, foiz: number): number {
return narx - (narx * foiz / 100);
}
chegirmaHisoblash(8000000, "o'n");
// ❌ Muharrirda darhol ko'rsatiladi:
// Argument of type 'string' is not assignable to parameter of type 'number'
Kod yozilayotgan paytda — muharrirda qizil chiziq chiqdi. Saqlashdan oldin. Serverga yuborishdan oldin. Foydalanuvchi ko'rishidan oldin.
Hayotiy o'xshatma
Word da matn yozganda imlo xatolari darhol qizil chiziq bilan belgilanadi. Siz har gapni alohida tekshirib o'tirmasdan ham — noto'g'ri so'z tugab qolmasdan bilinadi.
TypeScript — kod uchun o'sha imlo tekshiruvchi. Funksiyaga noto'g'ri argument berilsa, mavjud bo'lmagan xususiyatga murojaat qilinsa, son o'rniga matn yuborilsa — muharrir darhol ko'rsatadi.
Imlo tekshiruvsiz ham Word da yozish mumkin. JavaScript da ham yozish mumkin. Lekin xatolar — faqat o'qiyotganda bilinadi. Kech.
TypeScript JavaScript bilan qanday bog'liq?
Bu muhim savol — ko'pchilik noto'g'ri tushunadi.
TypeScript — JavaScript ning ustiga qurilgan. Har qanday to'g'ri JavaScript kodi — to'g'ri TypeScript kodi. Siz hech narsani qaytadan o'rganmaysiz — JavaScript bilimingiz to'liq saqlanadi.
JavaScript kodi
⊂
TypeScript kodi
TypeScript — JavaScript ga qo'shimcha imkoniyatlar beradi. Bular asosan turlar — number, string, boolean va murakkab tuzilmalar. Mantiq o'zgarmaydi.
Lekin brauzer va Node.js TypeScript ni tushunmaydi. Faqat JavaScript ishlatiladi. Shuning uchun TypeScript kodi ishga tushishdan oldin kompilyatsiya qilinadi — TypeScript → JavaScript:
Siz yozasiz (.ts fayl)
↓ tsc — TypeScript compiler
Brauzer/Node.js ishlaydi (.js fayl)
Tur belgilari faqat kompilyatsiya vaqtida tekshiriladi. JavaScript ga aylantirilganda ular o'chib ketadi. Dastur tezligi o'zgarmaydi.
Nima uchun kerak — besh sabab
1. Xatolar yozilayotganda topiladi
Yuqoridagi misol — asosiy sabab. Runtime da emas, yozish vaqtida. Foydalanuvchi xatoni ko'rishidan oldin siz bilasiz.
2. Muharrir yanada aqlliroq ishlaydi
TypeScript bo'lsa, VS Code ob'ektning barcha xususiyatlarini taklif qiladi. Nuqta bosilishi bilanoq:
const mahsulot = {
nomi: "Noutbuk",
narxi: 8000000,
ombor: 15,
};
mahsulot. // ← bu nuqtani bosganingizda: nomi, narxi, ombor — hammasi chiqadi
TypeScript siz uchun "eslaydi" — qaysi ob'ektda qaysi xususiyat bor. Siz eslab turish o'rniga muammoni hal qilishga e'tibor qaratishingiz mumkin.
3. Kod o'z-o'zini tushuntiradi
TypeScript da funksiyani ko'rganda — darhol nima kutilishini bilasiz:
// TypeScript da: narx number, foiz number, natija number
function chegirmaHisoblash(narx: number, foiz: number): number
// JavaScript da: nima kerak? nima qaytadi? — bilish uchun kodni o'qish kerak
function chegirmaHisoblash(narx, foiz)
Hamkasbingiz yozgan funksiyani ishlatishda README o'qishga hojat qolmaydi. Tur belgilari — tirik dokumentatsiya.
4. O'zgartirish xavfsiz
O'zgaruvchi nomini, funksiya parametrini o'zgartirsangiz — TypeScript qayerda ishlatilganini ko'rsatadi. Bitta joyda o'zgartirib, boshqa joylarda unutib qo'yishning imkoni yo'q.
// ism → fullName ga o'zgartirish kerak
type Foydalanuvchi = {
ism: string; // ← shu nomni o'zgartirganingizda
};
// TypeScript barcha ishlatilgan joylarni qizil qiladi — hech birini o'tkazib yubormaslisiz
5. Katta loyihalarda tartib saqlaydi
10 ta fayl, 100 ta fayl — kod o'sib boradi. JavaScript da kimdir noto'g'ri ob'ekt yuborsa yoki parametrni tushirib qo'ysa — hech narsa ko'rinmaydi. TypeScript bilan loyiha qanchalik katta bo'lsa ham — tur tizimi "to'siq" bo'ladi.
Qachon TypeScript, qachon JavaScript?
TypeScript foydali bo'lgan hollar:
- Loyiha bir necha fayldan ortiq
- Jamoa bilan ishlash — 2+ dasturchi
- Uzoq muddat ishlatiladigan ilova
- Kutubxona yozish — boshqalar ishlatadi
JavaScript yetarli bo'lgan hollar:
- 50 qatorlik bir martalik skript
- Tez prototip — g'oyani sinab ko'rish
- O'rganish maqsadida — yangi frameworkni tushunish uchun
Qoida: loyiha o'sib borsa yoki jamoa bilan ishlasangiz — TypeScript qo'shing. Kichik va vaqtinchalik narsa uchun — JavaScript yetarli.
Qanday ko'rinadi — amaliy farq
Bir xil mantiq, ikki xil yozuv:
// JavaScript
function foydalanuvchiTabriklash(foydalanuvchi) {
return `Salom, ${foydalanuvchi.ism}! Sizda ${foydalanuvchi.ballari} ball bor.`;
}
// Bu funksiyani ishlatuvchi hech narsani bilmaydi:
// foydalanuvchi qanday ob'ekt? ism bo'lishi kerakmi? ballari number mi?
// TypeScript
type Foydalanuvchi = {
ism: string;
ballari: number;
};
function foydalanuvchiTabriklash(foydalanuvchi: Foydalanuvchi): string {
return `Salom, ${foydalanuvchi.ism}! Sizda ${foydalanuvchi.ballari} ball bor.`;
}
// Endi hammasi aniq:
// - foydalanuvchi: { ism: string, ballari: number }
// - qaytadi: string
// Noto'g'ri ob'ekt bersangiz — darhol xato
Kod hajmi bir oz ko'paydi — lekin aniqlik ikki barobar ortdi.
"Yana bir narsa o'rganish kerakmi?" — savol
Ko'pchilik "TypeScript — yangi til, hamma narsani qaytadan o'rganamanmi?" deb xavotir oladi.
Yo'q. TypeScript — JavaScript + tur belgilari. Siz JavaScript bilasiz — demak 70% allaqachon o'rgangan. Qolgan 30% — tur tizimining sintaksisi va qo'shimcha imkoniyatlar.
Yana bir yaxshi yangilik: TypeScript o'rganish JavaScript ni chuqurroq tushunishga yordam beradi. "Bu qiymat aslida qanday tur?" deb o'ylash — kod sifatini oshiradi.
Xulosa
TypeScript — JavaScript ga tur tizimi qo'shilgan til. Xatolar yozilayotganda topiladi — foydalanuvchi ko'rishidan oldin.
TypeScript → JavaScript kompilyatsiya. Brauzer faqat JavaScript ko'radi, tezlik o'zgarmaydi.
Har qanday JavaScript kodi — to'g'ri TypeScript kodi. Siz hech narsani qayta o'rganmaysiz.
Katta loyihalarda, jamoada, uzoq muddatli ilovalar uchun — TypeScript vaqt va xatolarni tejaydi.
Keyingi dars
2-dars: O'rnatish — tsc, Node.js, birinchi TypeScript fayl