TypeScript ta'rifi va uning veb-ishlab chiqishdagi roli

-bu Microsoft tomonidan ishlab chiqilgan zamonaviy dasturlash tili bo'lib, u 

-ni statik yozish va boshqa yangi xususiyatlarni qo'shish orqali kengaytiradi. Veb-ishlab chiqishda 

 tobora ommalashib borayotgan tanlov bo'lib, dasturchilarga kod bilan yanada samarali va ishonchli ishlash uchun vositalarni taqdim etadi.

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:

 butunlay alohida til emas, balki JavaScript ustidagi qo'shimcha ekanligini tushunish muhimdir. 

-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 

-ning asosiy xususiyatlarini ko'rib chiqamiz, shunda siz undan foydalanishni muvaffaqiyatli boshlashingiz uchun kerakli bilimlarga ega bo'lasiz.

TypeScript-dagi ma'lumotlar turlari: ibtidoiy va maxsus:

 o'zgaruvchilar bilan ishlash uchun turli xil ma'lumotlarni taqdim etadi. Ibtidoiy turlarga raqamli qiymatlar uchun 

, etishmayotgan qiymatlarni ifodalash uchun 

 va ixtiyoriy uzunlikdagi butun sonlar uchun 

 kiradi. Ma'lumotlarning xususiyatiga qarab mos turni tanlash juda muhimdir.

Turlarni aniq ko'rsatadigan o'zgaruvchilarni e'lon qilish:

-ning asosiy afzalliklaridan biri bu o'zgaruvchilar turlarini aniq belgilash qobiliyatidir. Bu kodning o'qilishini yaxshilaydi va qo'shimcha xavfsizlik qatlamini ta'minlaydi. 

let age: number = 25;
let name: string = 'John';
let isActive: boolean = true;

Bu erda biz kutilgan qiymatlarni tushunishni osonlashtiradigan 

 turlarini ko'rsatadigan o'zgaruvchilarni e'lon qilamiz.

Interfeyslar keyingi bo'limlarda batafsilroq ko'rib chiqilsa-da, shuni ta'kidlash kerakki, 

 sizga maxsus ma'lumotlar turlarini yaratishga imkon beradi. 

type Point = {
  x: number;
  y: number;
};
let coordinates: Point = {x: 10, y: 20};

Bu erda biz koordinatalarni ifodalash uchun 

 turini aniqlaymiz, bu esa tegishli xususiyatlarga ega ob'ektlar uchun strukturaviy yozishni ta'minlaydi.

Parametr turlari va funktsiyalarning qaytish qiymatlari

, 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

 turidagi ikkita parametrni qabul qiladigan va 

 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

, 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 

 interfeysini yaratamiz. Keyin biz interfeysga mos keladigan 

 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:

, 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

 funksiyasiga o'tkazishga imkon beradi, bu esa 

 interfeysi bilan obyektni qabul qiladi. 

-da interfeyslarni meros qilib olish va kengaytirish kodda moslashuvchan va toza turdagi ierarxiyalarni yaratishga yordam beradi.

-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.

// "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

 classni, ushbu xususiyatlarni ishga tushiradigan konstruktorni va shaxs haqidagi ma'lumotlarni chiqaradigan 

 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 usullar sinf ichidagi ma'lumotlarni tartibga solish va boshqarish usulini taqdim etadi. 

-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.

Umumlashtirilgan ma'lumotlar turlariga kirish:

 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.

// Umumlashtirilgan turdan foydalanadigan funktsiya
function identity<T>(value: T): T {
  return value;
}
// Turini aniq ko'rsatadigan funktsiyadan foydalanish misoli
let result: number = identity<number>(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);

 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<T> {
  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<number>(42);
console.log(numberContainer.getData()); // Xulosa: 42
let stringContainer = new Container<string>('Hello, Generics!');
console.log(stringContainer.getData()); // Xulosa: Hello, Generics!

 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.

 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.

 предоставляют возможность создания условных типов в 

 в зависимости от условия. Это позволяет определять типы, основываясь на структуре или значениях других типов.

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> = T extends number ? true : false;
// Foydalanish misoli
const result1: IsNumber<number> = true; // Xulosa: true, chunki raqam raqamli tur
const result2: IsNumber<string> = false; // Xulosa: false, chunki string raqamli tur emasconst result3: IsNumber<boolean> = false; // Xulosa: false, chunki boolean raqamli tur emas

) ekanligini tekshiradi. Agar shunday bo'lsa, unda turi 

 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<T> = {
  readonly [P in keyof T]: T[P];
};
// Foydalanish misoli
interface Person {
  name: string;
  age: number;
}
// "Readonly" xususiyatlari bilan ob'ekt yaratish
let readOnlyPerson: ReadonlyProps<Person> = {name: 'John', age: 30};
readOnlyPerson.name = 'Alice'; // Xato, chunki "name" xususiyati faqat o'qish uchun

 dasturchilarga taqdim etadigan asosiy afzalliklarni qisqacha ko'rib chiqaylik:

-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:

 yordamida veb-ishlab chiqish sohasida rivojlanishda davom eting.

TypeScript: yangi boshlanuvchilar uchun to'liq qo'llanma

Samar Badriddinov