Programming TypeScript

Frontend Frameworks

TypeScript frontend ilovalari dunyosi uchun tabiiydir. JSX-ni boy qo'llab-quvvatlashi va o'zgaruvchanlikni xavfsiz modellash qobiliyati bilan TypeScript ilovangizga tuzilma va xavfsizlikni ta'minlaydi va tezkor muhitda to'g'ri, qo'llab-quvvatlanadigan kod yozishni osonlashtiradi.
Albatta, barcha o'rnatilgan DOM API turlari xavfsizdir. Ularni TypeScript-dan foydalanish uchun loyihangizning tsconfig.json fayliga ularning turi deklaratsiyasini kiritish kifoya :
{
"compilerOptions" : { "lib" : [ "dom" , "es2015" ]
}
}
lib.dom.d.ts - uning o'rnatilgan brauzeri va DOM turi deklaratsiyasini kiritishini aytadi .
l ib _ tsconfig.json opsiyasi TypeScript-ga loyihangizdagi kodni qayta ishlashda ma'lum turdagi deklaratsiyalar to'plamini kiritishni aytadi; u qo'shimcha kod chiqarmaydi yoki ish vaqtida mavjud bo'lgan JavaScript-ni yaratmaydi. Bu, masalan, DOM-ni NodeJS muhitida sehrli tarzda ishlashiga imkon bermaydi (sizning kodingiz kompilyatsiya qilinadi, lekin u ish vaqtida muvaffaqiyatsiz bo'ladi) - sizning turdagi deklaratsiyalaringiz JavaScript muhitingiz aslida qo'llab-quvvatlaydigan narsaga mos kelishiga ishonch hosil qilishingiz kerak. ish vaqtida. Batafsil ma’lumot olish uchun 249-sahifadagi “TypeScript loyihangizni yaratish” bo‘limiga o‘ting .
DOM turi deklaratsiyasi yoqilgan boʻlsa, siz quyidagi ishlarni bajarish uchun DOM va brauzer APIʼlarini xavfsiz ishlatishingiz mumkin boʻladi:
// Global oyna obyektidan xususiyatlarni o'qing
ruxsat bering model = {
url : window.location.href }
// elementini yarating kiritish = hujjat . createElement ( "kirish" )
// Unga ba'zi CSS sinflarini kiriting . sinflar ro'yxati . qo'shish ( 'Kirish' , 'URLInput' )
// Foydalanuvchi yozganda, model kiritishni yangilang . addEventListener ( 'o'zgartirish' , () => model . url = kiritish . qiymat . toUpperCase () )
// DOM hujjatiga kiriting . tanasi . appendChild ( kirish )
Albatta, bu kodlarning barchasi tekshiriladi va tahrirlovchini avtomatik to'ldirish kabi oddiy sovg'alar bilan birga keladi. Masalan, shunga o'xshash narsani ko'rib chiqing:
hujjat . querySelector ( '.Element' ). innerHTML // Xato TS2531: Ob'ekt // ehtimol "null".
TypeScript xatoga yo'l qo'yadi, chunki querySelector qaytish turi null bo'ladi.
brauzer uchun xavfsiz, turi bo'yicha boshqariladigan dasturlashni amalga oshirishingiz kerak bo'lgan narsalarni beradi , lekin ko'pchilik real dunyo frontend ilovalari DOMni qanday ko'rsatish va qayta ko'rsatishni abstrakt qilish uchun ramkadan foydalanadi. , ma'lumotlarni bog'lash va hodisalar ishlaydi. Quyidagi bo'limlar bir nechta eng mashhur brauzer ramkalari bilan TypeScript-dan qanday samarali foydalanish bo'yicha ba'zi ko'rsatmalar beradi.