TypeScriptni oʻrganish

Web ilovalari kattalashgani sayin va ularning murakkabligi keskin oshgani sayin, biz foydalanadigan ishlab chiqish uskunalari va tillarida sezilarli o'zgarishlar yuz berdi. Bularning markazida 'TypeScript' joylashgan bo'lib, bu JavaScriptning cheklovlarini yengish uchun paydo bo'lgan, avvalgi veb brauzerlarda oddiy dinamik skripting uchun mo'ljallangan. Ushbu maqolada TypeScriptning asosiy tushunchalarini chuqur o'rganamiz va amaliyotda to'g'ri keladigan turli xususiyatlar va ehtiyot choralarini batafsil tekshiramiz.

1. TypeScriptdan foydalanish sabablari

JavaScript dunyoda eng keng tarqalgan dasturlash tillaridan biri, ammo uning ichki moslashuvchanligi yirik loyihalarda jiddiy nuqsonlarga olib kelishi mumkin. TypeScript bu JavaScriptning kamchiliklarini bartaraf etish uchun ishlab chiqilgan. TypeScriptni qabul qilishning asosiy sabablari quyidagi tarzda, qisqacha aytib o'tish mumkin.

1.1. Kompilyatsiya paytida xatolikni aniqlash orqali barqarorlikni ta'minlash

JavaScript 'dinamik turdagi til' hisoblanadi. O'zgaruvchan turlar ishga tushirish vaqtida aniqlanadiga, dasturchilar kod yozayotganda tur xatoliklarini aniqlash qiyin. Masalan, agar bir satr tasodifan raqam kutayotgan funksiya uchun uzatilsa, JavaScript hech qanday ogohlantirmasdan kodni bajaradi, bu esa xatolikka yoki ekranda noto'g'ri operatsiya natijalarining ko'rsatilishiga olib keladi.

Boshqa tomondan, TypeScript 'statik turdagi til' bo'lib, o'zgaruvchilar va funksiyalarning turlarini kompilyatsiya (yoki qurilish) vaqtida, kodni bajarishdan oldin tekshirib chiqadi. Agar noto'g'ri tur tayinlansa yoki zarur parametr mavjud bo'lmasa, kompilyator darhol xato xabarini berdi, tajribali dasturchini xabardor qiladi. Bu rivojlanish bosqichida ishga tushirish vaqtida sodir bo'lishi mumkin bo'lgan potentsial xatolarni oldini olishga yordam beradi.

1.2. Kuchli dasturchi tajribasi (DX) va uskunalar qo'llab-quvvatlashi

Zamonaviy kod muharrirlari (masalan, VS Code) TypeScript bilan birgalikda ishlaganda, dasturchilarning ishlab chiqarish darajasi keskin oshadi. Tur ma'lumotlari aniq belgilanganligi sababli, muharrir kodni yozayotganda 'IntelliSense' xususiyati orqali mavjud metodlar va atributlar ro'yxatini real vaqtda taklif etadi.

Bundan tashqari, ob'ektlarning ichki tuzilishini eslash yoki har safar API spetsifikatsiyalarini qidirishga hojat qolmaydi, sichqoncha kursorini ushlab turganda muvofiq ma'lumotlarning tuzilishi, turi va hujjatlashtirilgan izohlarini darhol ko'rsatadi. Katta o'lchovli qayta ishlash vazifalarini bajarayotganda, o'zgaruvchilar yoki funksiyalarning nomlarini birgalikda o'zgartirish, TypeScript tizimiga hamma aloqador fayllarni xavfsiz ta'qib qilish va modifikatsiyalashga imkon beradi, bu esa kod o'zgarishlaridan kelib chiqadigan qo'rquvni keskin kamaytiradi.

1.3. Kod hujjatlarini yaxshilash va saqlash qulayligi

Eski loyihalarni yoki boshqa dasturchilar tomonidan yozilgan kodlarni saqlashdagi eng katta qiyinchiliklardan biri - 'bu funksiya qanday ma'lumotlarni oladi va nima qaytaradi'ligini aniqlashdir. JavaScriptda bu funktsiyaning butun ichki mantiqini tahlil qilish yoki alohida API hujjatiga tayanishni talab qiladi, agar hujjat yangilanmagan bo'lsa, jiddiy chalkashliklar yuzaga kelishi mumkin.

TypeScriptda, kod o'z-o'zidan to'liq spetsifikatsiya vazifasini bajaradi. Parametr va qaytarish turlari funktsiya imzolarida aniq ko'rsatilganligi sabablari bilan, kodni o'qiganda tizimning niyati va ma'lumotlarni oqimini intuitiv ravishda tushunish mumkin, alohida matn hujjatlariga ehtiyoj qolmaydi. Bu, jamoa hamkorligi va uzoq muddatli saqlash nuqtai nazaridan katta iqtisodiy xarajatlarni tejashga olib keladi.

2. TypeScript Kompilyatori

TypeScript brauzerlar yoki Node.js tomonidan to'g'ridan-to'g'ri bajarilmaydigan til bo'lib, brauzerlar faqat JavaScriptni tushunadi. Shuning uchun, TypeScript kodini JavaScript kodiga aylantirish jarayoni bajarish uchun juda muhimdir, va bu rolda asosiy vosita 'TypeScript Kompilyatori (TSC)'dir.

2.1. Kompilyatorning ikki tomonlama roli (Transpiler va tur tekshovchisi)

An'anaviy kompilyator (masalan, C, Java kompilyatori) manba kodini ikkilik kodga (Mashina Kodu) yoki kompyuter tushunadigan baytkodga aylantiradi. Biroq, TypeScript kompilyatori bir yuqori darajadagi tilni boshqa yuqori darajadagi tilga (JavaScript) aylantiradi, shuning uchun u 'Transpiler' deb aniqroq ta'riflanadi. TSC ikkita to'liq alohida vazifani mustaqil ravishda bajaradi.

• 1. Tiplarni tekshirish: U yozilgan manba kodining tip ta'riflarini tahlil qiladi va xatolar yo'qligini tasdiqlaydi.

• 2. Transpilyatsiya: U TypeScript manba fayllaridan (.ts) barcha tip sintaksisini (interfeys, tip, tip annotatsiyasi va boshqalar) tozalaydi va ularni sof JavaScript fayllariga (.js) aylantiradi.

Qiziq, bu ikkita jarayon bir-biriga ta'sir qilmaydi. Agar kodda tip xatolari bo'lsa ham, agar sintaksis xatolari bo'lmasa, TSC muvaffaqiyatli JavaScript faylini ishlab chiqadi. Bu, dasturchilar uchun qulaylikni oshirish maqsadida tiplarni tekshirish va qurish bosqichini ajratish uchun qasddan qilingan dizayndir.

2.2. TypeScript Kompilyatsiya Tizimi va AST

TSC kod faylini tahlil qilish va yakuniy JavaScriptni yaratish uchun amal qiladigan ichki pipeline tuzilmasi quyidagi bosqichlardan iborat.

• 1. Skanner: U manba fayldan matnni o'qiydi va uni 'tokenlar' deb ataladigan ma'noli minimal birliklarga bo'ladi.

• 2. Parser: Tokenlar massivi asosida kod tuzilmasini daraxt ko'rinishida ifodalovchi 'Abstrakt Sintaksis Daraxti (AST)' ni ishlab chiqadi.

• 3. Binder: U AST tugunlarini o'rganib chiqadi va har bir o'zgaruvchi, funksiyaning va sinfning qaysi doiraga tegishli ekanligini va ular qaysi belgilarning ifodalanishini xaritalaydi.

• 4. Checker: Bu aslida bog'lovchi va AST tomonidan yaratilgan simboli ishlatib, turli xil turlarni tekshirishni amalga oshiradigan asosiy dvigatel. Bu tayinlanishini, funksiya chaqiruv argumentlarini va boshqalarni batafsil tekshiradi.

• 5. Emitter: Turi tekshiruvi tugallangach, u AST dan turli sintaksisni olib tashlaydi va maqsadli JavaScript versiyasi (masalan, ES5, ES6 va boshqalar) bilan mos keladigan manba kodi va manba xaritalarini (.js.map) yaratadi.

2.3. TSConfig.json dagi Asosiy Variantlarni Tahlil Qilish

TypeScript kompilyatori xulq-atvori loyihaning asosiy papkasida joylashgan TSConfig.json fayli orqali aniq boshqariladi. Foydali loyihalar qurishda tushunilishi kerak bo'lgan asosiy variantlar quyidagilardir:

{
  "compilerOptions": {
    "target": "ES2022", // 컴파일 후 생성될 자바스크립트 버전 지정
    "module": "CommonJS", // 모듈 시스템 결정 (CommonJS, ESNext 등)
    "lib": ["DOM", "ES2022"], // 컴파일에 포함될 런타임 환경의 내장 타입 정의
    "allowJs": true, // 자바스크립트 파일도 컴파일 대상으로 허용
    "strict": true, // 강력한 타입 검사 옵션 활성화 (추천)
    "noImplicitAny": true, // 명시적 타입이 없는 경우 any 추론 금지
    "strictNullChecks": true, // null과 undefined를 고유한 타입으로 엄격히 취급
    "outDir": "./dist", // 컴파일된 자바스크립트 파일이 저장될 경로 
    "esModuleInterop": true // CommonJS와 ES 모듈 간의 호환성 확보 
   }
 }

Xususan, 'strict': true variantini o'rnatish katta hajmli, yuqori sifatli kod yozish uchun zaruriy sozlamadir. Buni yoqish noImplicitAny, strictNullChecks va boshqalarni ishga tushiradi, bu esa TypeScript kompilyatorining eng qat'iy va xavfsiz tarzda ishlashini ta'minlaydi.

3. TypeScript Qanday Turi Tekshiradi

TypeScript turlarini qanday tekshirishi va mosligini aniqlashi an'anaviy ob'ektga yo'naltirilgan tillardan (Java, C++ va boshqalar kabi) fundamental jihatdan farq qiladi. Ushbu noyob tizimni tushunish TypeScript usulida kod yozish uchun zarur.

3.1. Strukturaviy Tashqi Ko'rinish

C++ va Java kabi tillar 'Nominal Tashqi Ko'rinish' ni qabul qiladilar. Nominal tashqi ko'rinish tizimida turlar faqat sinf nomlari yoki ularning meros хususiyatlari to'liq mos kelganda mos keladi. Boshqacha qilib aytganda, hatto ichki tuzilmalar 100% mos kelganda ham, agar sinf nomlari farq qilsa, ular mutlaqo boshqa turlar sifatida qabul qilinadi.

Bunga qarama-qarshi ravishda, TypeScript 'Strukturaviy Tashqi Ko'rinish' ni qo'llab-quvvatlaydi. Strukturaviy tashqi ko'rinishda muhim bo'lgan narsa tur nomi emas, balki 'o'sha tur haqiqatan ham moslik uchun talab qilinadigan xususiyatlar va usullar (tuzilma) mavjudmi' dir. Bu dinamik tillarda keng tarqalgan 'Duck Tashqi Ko'rinish' ning statik versiyasi sifatida ko'rilib, ifodalanishi mumkin.

interface Point {
    x: number;
    y: number;
}

function printPosition(p: Point) {
    console.log(`위치: ${p.x}, ${p.y}`);
}

// 명시적으로 Point 인터페이스를 구현하지 않은 일반 객체
const myObj = { x: 10, y: 20, z: 30 };
printPosition(myObj); // 정상 작동!

Yuqaridagi kodda, myObj aniq Point interfeysini e'lon qilmagan yoki amalga oshirmagan. Bundan tashqari, u qo'shimcha xususiyat z ga ham ega. Biroq, printPosition funksiyasi myObj ni hato bermasdan qabul qiladi, chunki myObj Point interfeysining talab qiladigan 'raqam turidagi x va y tuzilmalarini' to'liq o'z ichiga oladi. Ushbu strukturaviy moslik tufayli TypeScript JavaScript ga xos bo'lgan moslashuvchan ob'ekt literal ishlatish uslublarini davom ettira oladi.

3.2. Turni Taxmin Qilish

TypeScript ga yangi boshlovchi dasturchilar ko'pincha har bir o'zgaruvchi e'lonida turlarni to'pcha (:) bilan aniqlash kerakligini noto'g'ri tushunadilar. Biroq, TypeScript juda kuchli 'Turni Taxmin Qilish' dvigateliga ega. Dasturchi aniq bir turni e'lon qilmasa ham, kompilyator avtomatik ravishda kod bajariladigan kontekstni va belgilangan qiymatlarni tahlil qilib, eng mos turni aniqlaydi.

let message = "안녕하세요"; // string 타입으로 자동 추론
let count = 42;            // number 타입으로 자동 추론

function add(a: number, b: number) {
    return a + b;          // 반환 타입이 number로 자동 추론
}

Yuqaridagi misolda, message o'zgaruvchisiga string tayinlanishi bilan, TypeScript bu o'zgaruvchining turini ichki ravishda string ga doimiy ravishda belgilab qo'yadi. Shuning uchun, agar kimdir message = 123; kabi raqamni tayinlashga harakat qilsa, bu xato beradi. Ma'lum qilib aytganda, aniq tur e'lonlari faqat murakkab biznes mantiqi yoki API ma'lumot interfeyslari hududlarida amalga oshirilishi mumkin va o'qilishi va toza kodni saqlab qoladi.

4. TypeScript kompilatsiya vaqtida aniqlay olmagan ish vaqti xatolari

TypeScript kuchli barqarorlikni ta'minlashda aniq fakt, lekin bu har qanday maqsad uchun himoya emas. TypeScript'dagi barcha tur tekshiruvlari faqat rivojlanish muhitidagi 'kompilatsiya vaqtida' ishlaydi va yuqorida aytib o'tilganidek, barcha tur kodi JavaScript'ga o'zgartirilganda, haqiqiy bajariladigan faylga aylanganda evaporatsiya bo'ladi. Natijada, asl foydalanuvchi ilovani ishga tushirganida, tizimni qulashi mumkin bo'lgan jiddiy xatolar mavjud, garchi u kompilatsiya bosqichidan engil o'tgan bo'lsa ham.

4.1. Tashqi Ma'lumotlar va Tarmoq Aloqalari (API Javob Ma'lumotlari)

Ish vaqtidagi xatolarning eng keng tarqalgan sababi API bilan orqa server o'rtasidagi aloqa hisoblanadi. Frontend dasturchilari ma'lumotlar tuzilishini server tomonidan taqdim etilishini kutayotgan holda interfeyslarni quyidagi tarzda e'lon qilishadi va qo'llaydilar.

interface UserProfile {
    id: number;
    name: string;
    email: string;
}

async function fetchUser(): Promise<UserProfile> {
    const response = await fetch('/api/user/1');
    return response.json(); // 컴파일러는 이것이 무조건 UserProfile 구조라고 믿음
}

Mushkul ish vaqtida server ma'lumotlar tuzilishini o'zgartirganda yoki xato sababli { "message": "Ichki Xato" } kabi noto'g'ri ma'lumot qaytarganda tug'iladi. TypeScript kompilyatori qurilish vaqtida serverning haqiqiy ish harakati holatini bilmaydi, shuning uchun yuqoridagi kodni muammosiz xavfsiz deb tan oladi. Biroq, user.name.toUpperCase() kabi kod haqiqiy brauzerda bajarilganda, u 'TypeError' deb ataluvchi halokatli xatoni chiqaradi, bu undefined xususiyatlarini o'qiy olmaydi va ilovani qulatar.

4.2. Tur Tasdiqlashni Noto'g'ri Ishlatish

TypeScript'da 'as' (tur tasdiqlash) deb ataluvchi kalit so'z mavjud bo'lib, dasturchilar, berilgan bir bo'lak ma'lumotning turini kompilyatoridan aniqroq bilishini e'lon qilishlariga imkon beradi. Bu kompilyatorning ogohlantirishlarini majburan rad etuvchi xavfli vositadir.

const rawData = "특정 문자열" as any;
const numberData = rawData as number; // 컴파일러는 숫자로 인정

console.log(numberData.toFixed(2)); // 런타임 에러 발생

Kompilyator dasturchining 'as number'ni tasdiqlashini tan olganligi sababli, o'zgaruvchi numberData'ni to'liq raqam sifatida qabul qiladi va kompilatsiyaga ruxsat beradi. Biroq, asl ma'lumot hali ham satr bo'lgani uchun, u ish vaqtida har qanday joyda qulaylik qilishi mumkin. Any turini mas'uliyatsiz ishlatish yoki to'liq bo'lmagan tur tasdiqlashlari butun tur tizimining ishonchliligini pasaytiradigan asosiy sabablar.

4.3. Massiv Indeksiga Murojatdagi Xatolar (Chetdagi Indekslar)

TypeScript chetdagi indekslarga murojaat qilishda odatda nazoratni yengil tutish uchun mo'ljallangan, bu esa xatolarni yuzaga chiqarishi mumkin.

const numbers: number[] = [1, 2, 3];
const fourthNumber = numbers[5];

console.log(fourthNumber.toFixed(2)); // 런타임에 undefined 에러 발생

Massivning 5-indeksida hech narsa yo'qligi sababli, chiqarilgan haqiqiy qiymat undefined hisoblanadi. Biroq, TypeScript kompilatsiyadan o'tadi, chunki raqamlar massivi raqamlardan iborat deb faraz qilingan holda, barcha indekslarga murojaat qilish natijasi ham raqam bo'ladi. Ushbu cheklovdan o'tish uchun, indekslarga murojaat qilish vaqtida undefined aralashishi kerakligini ta'minlash uchun TSConfig.json'da noUncheckedIndexedAccess variantini yoqish zarur.

5. JavaScript bilan Taqqoslash

TypeScript'ni to'liq tahlil qilishdagi oxirgi qadam asosi JavaScript'ga aniq miqdoriy va sifatli taqqoslashni amalga oshirishdir. Ikkita til o'rtasidagi farqlarni aniq tushunish, vositalarni to'g'ri joylarda mos ravishda foydalanishga imkon beradi.

5.1. Paradigma va falsafa o'rtasidagi farqlar

JavaScript ning falsafasi 'mumkin qadar moslashuvchan bo'l, lekin avvalgi ishni to'xtatma' ga asoslangan. Minor xatolar bilan bog'liq holda butun veb-sahifa to'xtab qolmasligini ta'minlash uchun ichki ravishda istisnolarni qo'ldan kelganicha boshqarish tendensiyasi kuchlidir. Aksincha, TypeScript 'agar ishonchingiz komil bo'lmasa, hatto bajarishni ham amalga oshirmang' degan qat'iy falsafani qo'llaydi. Bu dastlabki yozish xarajatlarini oshirishi mumkin bo'lsa-da, qat'iylik katta hajmdagi tizimlar barqarorligi uchun ko'proq foydalar keltiradi, degan ishonch mavjud.

6. Xulosa

Xulosa qilib aytganda, TypeScript JavaScript o'rnini bosuvchi emas, balki katta kengaytma va qo'shimchadir. U JavaScript ning ekosistemasi va standartlarini mukammal tarzda meros qilib oladi, shu bilan birga katta hajmdagi korporativ muhitlar uchun zarur bo'lgan xavfsizlik mexanizmlarini qattiq integratsiya qiladi.

Ishga tushirish xatolarini 100% oldini olish mumkin emasligini tan olib, agar to'g'ri TSConfig variantlari o'rnatilgan bo'lsa va Zod kabi ishga tushirishni tekshirish kutubxonalariga birlashtirilsa, siz deyarli qurolga chidamli xavfsiz kod yaratishingiz mumkin. JavaScript darajasida qolgan rivojlanish paradigmasini TypeScript ga o'tishni tavsiya qilamiz, yanada mustahkam va nafis dasturlar yaratish uchun.

May