TypeScript: yangi boshlanuvchilar uchun to'liq qo'llanma

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

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<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);

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

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

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

Xulosa

TypeScript-ning asosiy afzalliklari

Maqolaning oxirida, keling, TypeScript dasturchilarga taqdim etadigan asosiy afzalliklarni qisqacha ko'rib chiqaylik:

Statik yozish: TypeScript JavaScript-ga statik yozishni qo'shadi, bu rivojlanish bosqichida xatolarni aniqlash va tuzatishga imkon beradi va kodning ishonchliligini oshiradi.
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.
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.
JavaScript ekotizimiga mos keladi: TypeScript JavaScript-ning yuqori to'plami bo'lib, mavjud JavaScript-koddan foydalanish, kutubxonalar va framework birlashtirish imkonini beradi.
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:

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.
Framework integratsiyasini o'rganing: TypeScript-ning Angular, React va Vue kabi mashhur veb-ishlab chiqish frameworklari bilan qanday birlashishini tushunib oling.
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.