### TypeScript ta'rifi va uning veb-ishlab chiqishdagi roli **TypeScript**-bu Microsoft tomonidan ishlab chiqilgan zamonaviy dasturlash tili bo'lib, u **JavaScript**-ni statik yozish va boshqa yangi xususiyatlarni qo'shish orqali kengaytiradi. Veb-ishlab chiqishda **TypeScript** tobora ommalashib borayotgan tanlov bo'lib, dasturchilarga kod bilan yanada samarali va ishonchli ishlash uchun vositalarni taqdim etadi. > TypeScriptga oid to'liq bepul kurs -> [sammi.ac/course/typescript](https://sammi.ac/course/typescript "https://sammi.ac/course/typescript") ### Nima uchun sof JavaScript o'rniga TypeScript-dan foydalanish kerak: Dasturchilar duch keladigan asosiy savollardan biri bu an'anaviy JavaScript o'rniga TypeScript-dan foydalanish zarurati. TypeScript statik yozishning afzalliklarini taqdim etadi, bu kodni bajarish paytida xatolarni kamaytiradi va dastur tuzilishini tushunishni yaxshilaydi. Bundan tashqari, TypeScript zamonaviy rivojlanish vositalarini taqdim etish orqali yangi ECMAScript imkoniyatlarini qo'llab-quvvatlaydi. ### Tilning asosiy xususiyatlari haqida qisqacha ma'lumot: **TypeScript** butunlay alohida til emas, balki JavaScript ustidagi qo'shimcha ekanligini tushunish muhimdir. **TypeScript**-ning asosiy xususiyati uning statik yozish tizimi bo'lib, u kod yozish bosqichida o'zgaruvchilar, funktsiyalar va ob'ektlarning turlarini aniqlashga imkon beradi. Bu bashorat qilishni sezilarli darajada yaxshilaydi va kodni saqlashni osonlashtiradi. Maqolada biz **TypeScript**-ning asosiy xususiyatlarini ko'rib chiqamiz, shunda siz undan foydalanishni muvaffaqiyatli boshlashingiz uchun kerakli bilimlarga ega bo'lasiz. > **TypeScript Asoslari** ### **TypeScript-dagi ma'lumotlar turlari: ibtidoiy va maxsus:** **TypeScript** o'zgaruvchilar bilan ishlash uchun turli xil ma'lumotlarni taqdim etadi. Ibtidoiy turlarga raqamli qiymatlar uchun `number`, satr qiymatlari uchun `string`, mantiqiy qiymatlar uchun `boolean`, etishmayotgan qiymatlarni ifodalash uchun `null` va `undefined`, noyob identifikatorlar uchun `symbol` va ixtiyoriy uzunlikdagi butun sonlar uchun `bigint` kiradi. Ma'lumotlarning xususiyatiga qarab mos turni tanlash juda muhimdir. ### Turlarni aniq ko'rsatadigan o'zgaruvchilarni e'lon qilish: **TypeScript**-ning asosiy afzalliklaridan biri bu o'zgaruvchilar turlarini aniq belgilash qobiliyatidir. Bu kodning o'qilishini yaxshilaydi va qo'shimcha xavfsizlik qatlamini ta'minlaydi. **Masalan:** let age: number = 25; let name: string = 'John'; let isActive: boolean = true; Bu erda biz kutilgan qiymatlarni tushunishni osonlashtiradigan `number`, `string` va `boolean` turlarini ko'rsatadigan o'zgaruvchilarni e'lon qilamiz. ### Maxsus ma'lumotlar turiga misol: Interfeyslar keyingi bo'limlarda batafsilroq ko'rib chiqilsa-da, shuni ta'kidlash kerakki, **TypeScript** sizga maxsus ma'lumotlar turlarini yaratishga imkon beradi. **Masalan:** type Point = { x: number; y: number; }; let coordinates: Point = {x: 10, y: 20}; Bu erda biz koordinatalarni ifodalash uchun `Point` turini aniqlaymiz, bu esa tegishli xususiyatlarga ega ob'ektlar uchun strukturaviy yozishni ta'minlaydi. > **Funktsiyalar va ob'ektlar bilan ishlash** ### **Parametr turlari va funktsiyalarning qaytish qiymatlari** **TypeScript**, parametr turlarini va funktsiyalarning qaytish qiymatlarini aniqlash kodning ishonchliligi va tushunilishini ta'minlashning muhim qismidir. Funktsiyani e'lon qilishda siz kirish parametrlari turlarini va qaytish turini aniq belgilashingiz mumkin. Bu xatolarning oldini olishga yordam beradi va kodning o'qilishini yaxshilaydi. **Parametr turlari va qaytish qiymati bilan misol:** // Funktsiyani aniq parametr turlari va qaytish qiymati bilan e'lon qilish function addNumbers(a: number, b: number): number { return a + b; } // Funktsiyadan foydalanish let result: number = addNumbers(10, 5); console.log(result); // Xulosa: 15 Ushbu misolda biz `number` turidagi ikkita parametrni qabul qiladigan va `number` turidagi qiymatni qaytaradigan `addNumbers` funktsiyasini yaratamiz. Funktsiyani chaqirganda, biz kutilgan parametr turlariga mos keladigan raqamli qiymatlarni uzatamiz. Parametrlar va qaytish qiymatlari uchun turlarni aniq belgilash, ayniqsa katta loyihalarda xatolarni oldini olish uchun kuchli vositadir. Bundan tashqari, u kodni avtomatik hujjatlashtirishni yaxshilaydi va uni boshqa dasturchilar uchun yanada tushunarli qiladi. ### Ob'ektlar tuzilishini tavsiflash uchun interfeyslardan foydalanish **TypeScript**, interfeyslar ob'ektlarning tuzilishini tavsiflash uchun kuchli mexanizmdir. Ular xususiyat turlarini va ularning kutilgan qiymatlarini ko'rsatib, ob'ekt shaklini belgilashga imkon beradi. Interfeyslardan foydalanish kodning o'qilishini yaxshilaydi, eskortni soddalashtiradi va statik turni tekshirishni ta'minlaydi. **Ob'ekt uchun interfeysdan foydalanish misoli:** // "Person" ob'ekti uchun interfeysni aniqlash interface Person { name: string; age: number; isStudent: boolean; } // Ob'ektni e'lon qilishda interfeysdan foydalanish let student: Person = { name: 'Alice', age: 20, isStudent: true, }; // Muayyan tuzilishga ega ob'ektni qabul qiladigan funktsiya function printPerson(person: Person): void { console.log(`Name: ${person.name}, Age: ${person.age}, Student: ${person.isStudent}`); } // Person tipidagi ob'ekt bilan funktsiyani chaqirish printPerson(student); Bu erda biz ob'ektning kutilgan tuzilishini tavsiflovchi `Person` interfeysini yaratamiz. Keyin biz interfeysga mos keladigan `student` ob'ektini e'lon qilamiz. `PrintPerson` funktsiyasi `Person` turidagi ob'ektni qabul qiladi va u haqida ma'lumot chiqaradi. Interfeyslardan foydalanish ob'ektlar tuzilishini aniq aniqlash imkonini beradi, kodni saqlashni osonlashtiradi va uni o'zgarishlarga chidamli qiladi. ### Interfeyslarni meros qilib olish va kengaytirish: **TypeScript**, interfeyslarni meros qilib olish va kengaytirish mumkin, bu esa yanada murakkab turdagi ierarxiyalarni yaratishga imkon beradi. Interfeyslarni meros qilib olish bola interfeysiga ota-ona xususiyatlarini meros qilib olishga imkon beradi va kengaytma asl nusxasini o'zgartirmasdan mavjud interfeysga yangi xususiyatlarni qo'shishga imkon beradi. **Meros va interfeyslarni kengaytirish misoli:** // Asosiy "Shape" interfeysi interface Shape { color: string; } // "Circle" interfeysi "Shape" ni meros qilib oladi va "radius"xususiyatini qo'shadi interface Circle extends Shape { radius: number; } // "Rectangle" interfeysi "Shape" ni meros qilib oladi va "width" va "height" xususiyatlarini qo'shadi interface Rectangle extends Shape { width: number; height: number; } // "Shape"interfeysi bilan ob'ektni qabul qiladigan funktsiya function draw(shape: Shape): void { console.log(`Drawing a ${shape.color} shape`); } // "Circle" va "Rectangle"kabi ob'ektlarni yaratish let myCircle: Circle = {color: 'blue', radius: 10}; let myRectangle: Rectangle = {color: 'red', width: 20, height: 30}; // Turli interfeyslarning ob'ektlari bilan funktsiyani chaqirish draw(myCircle); // Xulosa: Drawing a blue shape draw(myRectangle); // Xulosa: Drawing a red shape Ushbu misolda `Circle` va `Rectangle` interfeyslari `Shape` asosiy interfeysidan `color` xususiyatini meros qilib oladi. Bu `Circle` va `Rectangle` turidagi obyektlarni `draw` funksiyasiga o'tkazishga imkon beradi, bu esa `Shape` interfeysi bilan obyektni qabul qiladi. **TypeScript**-da interfeyslarni meros qilib olish va kengaytirish kodda moslashuvchan va toza turdagi ierarxiyalarni yaratishga yordam beradi. > **Sinflar va meros bilan ishlash** ### **TypeScript-da Class yaratish** **TypeScript**, **JavaScript**-da bo'lgani kabi, class ob'ektga yo'naltirilgan kodni yaratish vositasini taqdim etadi. Biroq, TypeScript statik yozishni qo'shish orqali class imkoniyatlarini kengaytiradi. TypeScript-da classlar yaratish xususiyatlar, konstruktor, usullar va kirish modifikatorlaridan foydalanish imkoniyatlarini aniqlashni o'z ichiga oladi. **Sinf yaratish misoli:** // "Person" classning ta'rifi class Person { // Class xususiyatlari name: string; age: number; // Class konstruktori constructor(name: string, age: number) { this.name = name; this.age = age; } // Class usuli displayInfo(): void { console.log(`Name: ${this.name}, Age: ${this.age}`); } } // "Person"sinf ob'ektini yaratish let person1: Person = new Person('John', 30); // Ob'ekt usulini chaqirish person1.displayInfo(); // Xulosa: Name: John, Age: 30 Bu erda biz `name` va `age` xususiyatlariga ega bo'lgan `Person` classni, ushbu xususiyatlarni ishga tushiradigan konstruktorni va shaxs haqidagi ma'lumotlarni chiqaradigan `displayInfo` usulini aniqlaymiz. Keyin biz `Person` class ob'ektini yaratamiz va uning usulini chaqiramiz. TypeScript-da sinflar yaratish kodni tashkil qilishning tuzilgan usulini taqdim etadi, bu esa uni yanada tushunarli va qo'llab-quvvatlashni osonlashtiradi. ### Konstruktorlar va usullardan foydalanish **TypeScript**, konstruktorlar va usullar sinf ichidagi ma'lumotlarni tartibga solish va boshqarish usulini taqdim etadi. **Konstruktor**-bu class ob'ektini yaratishda chaqiriladigan maxsus usul. Usullar ob'ektning funksionalligini ifodalaydi va operatsiyalarni bajarish uchun ishlatilishi mumkin. **Konstruktor va usuldan foydalanish misoli:** // "Car" sinfining ta'rifi class Car { // Class xususiyatlari brand: string; model: string; speed: number; // Class konstruktori constructor(brand: string, model: string, speed: number) { this.brand = brand; this.model = model; this.speed = speed; } // Mashina ma'lumotlarini chiqarish usuli displayInfo(): void { console.log(`Brand: ${this.brand}, Model: ${this.model}, Speed: ${this.speed} km/h`); } // Tezlikni oshirish usuli accelerate(acceleration: number): void { this.speed += acceleration; console.log(`Accelerating... New speed: ${this.speed} km/h`); } } // Konstruktor yordamida "Car" sinf ob'ektini yaratish let myCar: Car = new Car('Toyota', 'Camry', 120); // Mashina ma'lumotlarini chiqarish usulini chaqiring myCar.displayInfo(); // Xulosa: Brand: Toyota, Model: Camry, Speed: 120 km/h // Tezlikni oshirish usulini chaqiring myCar.accelerate(20); // Xulosa: Accelerating... New speed: 140 km/h Ushbu misolda \`Car ' classda ob'ekt xususiyatlarini ishga tushiradigan konstruktor, mashina ma'lumotlarini chiqaradigan \`displayInfo\` usuli va avtomobil tezligini oshiradigan \`accelerate\` usuli mavjud. Class ob'ektini yaratish, usullarni chaqirish va konstruktordan foydalanish class ma'lumotlari va funktsiyalari bilan qulay va samarali o'zaro ta'sir o'tkazishga imkon beradi. > **TypeScript-da Generics** ### **Umumlashtirilgan ma'lumotlar turlariga kirish:** **TypeScript**-dagi **Generics** har xil turdagi ma'lumotlar bilan ishlay oladigan va shu bilan birga tur ma'lumotlarini saqlaydigan tarkibiy qismlarni yaratish vositasini taqdim etadi. Ular universal funktsiyalar, sinflar va interfeyslarni yaratish imkoniyatini beradi, bu esa kodni yanada moslashuvchan va qayta ishlatishga imkon beradi. **Generics-ga kirish misoli:** // Umumlashtirilgan turdan foydalanadigan funktsiya function identity(value: T): T { return value; } // Turini aniq ko'rsatadigan funktsiyadan foydalanish misoli let result: number = identity(42); // Turi avtomatik ravishda chiqariladi let stringValue: string = identity('Hello, TypeScript!'); // Umumlashtirilgan funktsiyalar turli xil ma'lumotlar turlari bilan ishlatilishi mumkin let booleanValue: boolean = identity(true); Ushbu misolda `identity` funktsiyasi umumlashtirilgan bo'lib, u `value` parametrini oladi va uni o'zgarishsiz qaytaradi. Funktsiyani chaqirganda siz turni aniq belgilashingiz yoki TypeScript-ga avtomatik ravishda turini ko'rsatishga ishonishingiz mumkin. **Classlarda umumlashtirilgan ma'lumotlar turlariga kirish:** // Ma'lumotlar konteyneri uchun umumlashtirilgan class class Container { private data: T; // Class konstruktori constructor(initialValue: T) { this.data = initialValue; } // Ma'lumotlarni olish usuli getData(): T { return this.data; } // Yangi ma'lumotlarni o'rnatish usuli setData(newValue: T): void { this.data = newValue; } } // Turli xil ma'lumotlar turlari bilan umumlashtirilgan sinfdan foydalanish let numberContainer = new Container(42); console.log(numberContainer.getData()); // Xulosa: 42 let stringContainer = new Container('Hello, Generics!'); console.log(stringContainer.getData()); // Xulosa: Hello, Generics! Ushbu misolda `Container` klassi `T` turi bilan parametrlangan bo'lib, u sinf namunasini yaratishda aniqlanadi. Bu har xil turdagi ma'lumotlarga ega bo'lgan sinfdan foydalanishga imkon beradi, shu bilan birga konteyner ichidagi turlar to'g'risidagi ma'lumotlarning xavfsizligini ta'minlaydi. **Generics** har xil turdagi ma'lumotlar bilan ishlatilishi mumkin bo'lgan yanada ko'p qirrali va moslashuvchan kodni yaratish usulini taqdim etadi, shu bilan birga turlarni xavfsiz saqlaydi. > **TypeScript-ning ilg'or xususiyatlari** ### Conditional Types **Conditional Types** предоставляют возможность создания условных типов в **TypeScript** в зависимости от условия. Это позволяет определять типы, основываясь на структуре или значениях других типов. **Keling, Conditional Types dan foydalanishning oddiy misolini ko'rib chiqaylik, bu erda biz o'zgaruvchining turi raqamli yoki yo'qligini aniqlaymiz:** // Turning raqamli ekanligini aniqlaydigan shartli tur type IsNumber = T extends number ? true : false; // Foydalanish misoli const result1: IsNumber = true; // Xulosa: true, chunki raqam raqamli tur const result2: IsNumber = false; // Xulosa: false, chunki string raqamli tur emasconst result3: IsNumber = false; // Xulosa: false, chunki boolean raqamli tur emas Ushbu misolda, `number` turi berilgan turning raqamli (`number`) ekanligini tekshiradi. Agar shunday bo'lsa, unda turi `true`, aks holda `false`. ### Mapped Types **Mapped Types** mavjud turlarning tuzilishi asosida yangi turlarni yaratishga imkon beradi. Ular mavjud turlarning xususiyatlari va usullari asosida yangi turlarni yaratishning qulay usulini taqdim etadi. // "readonly"ning barcha xususiyatlarini yaratadigan Mapped Type type ReadonlyProps = { readonly [P in keyof T]: T[P]; }; // Foydalanish misoli interface Person { name: string; age: number; } // "Readonly" xususiyatlari bilan ob'ekt yaratish let readOnlyPerson: ReadonlyProps = {name: 'John', age: 30}; readOnlyPerson.name = 'Alice'; // Xato, chunki "name" xususiyati faqat o'qish uchun ## Xulosa **TypeScript-ning asosiy afzalliklari** Maqolaning oxirida, keling, **TypeScript** dasturchilarga taqdim etadigan asosiy afzalliklarni qisqacha ko'rib chiqaylik: 1. Statik yozish: **TypeScript** **JavaScript**-ga statik yozishni qo'shadi, bu rivojlanish bosqichida xatolarni aniqlash va tuzatishga imkon beradi va kodning ishonchliligini oshiradi. 2. Rivojlanishni qo'llab-quvvatlash yaxshilandi: **TypeScript**-dan foydalanish yanada kuchli ishlab chiqish vositalarini, shu jumladan avtomatik to'ldirish, maslahatlar va statik kod analizatorlarini taqdim etadi. 3. Tilning keng imkoniyatlari: **TypeScript** dasturlash tilining zamonaviy imkoniyatlarini taklif etadi, masalan classlar, interfeyslar, generiklar va boshqalar, bu kodni yanada o'qilishi, tushunilishi va qo'llab-quvvatlanishiga imkon beradi. 4. **JavaScript** ekotizimiga mos keladi: **TypeScript** **JavaScript**-ning yuqori to'plami bo'lib, mavjud **JavaScript**-koddan foydalanish, kutubxonalar va framework birlashtirish imkonini beradi. 5. Katta hamjamiyat va qo'llab-quvvatlash: **TypeScript** faol dasturchilar hamjamiyati tomonidan qo'llab-quvvatlanadi, bu muntazam yangilanishlar, xatolarni tuzatish va yangi funksiyalarni qo'llab-quvvatlaydi. **TypeScript**-da ishlab chiqish ish ko'nikmalarini oshirish va yanada ishonchli va samarali veb-ilovalarni yaratish uchun ko'plab imkoniyatlarni taqdim etadi. Ko'nikmalarni yanada o'rganish va rivojlantirish uchun tavsiya etiladi: 1. **Ilg'or dizayn naqshlarini o'rganing**: **TypeScript**-ni ishlab chiqishda qo'llash kodni yanada samarali boshqarish uchun Dependency Injection kabi ilg'or dizayn naqshlaridan foydalanishga imkon beradi. 2. **Framework integratsiyasini o'rganing**: TypeScript-ning **Angular**, **React** va **Vue** kabi mashhur veb-ishlab chiqish frameworklari bilan qanday birlashishini tushunib oling. 3. **TypeScript yangilanishlarini kuzatib boring**: yangi xususiyatlar va yaxshilanishlardan xabardor bo'lish uchun **TypeScript**-ning so'nggi versiyalarini kuzatib boring. Yangi muammolarga ochiq bo'ling va **TypeScript** yordamida veb-ishlab chiqish sohasida rivojlanishda davom eting.

TypeScript

TypeScript: yangi boshlanuvchilar uchun to'liq qo'llanma