تثبيت واختبار TypeScript حسنًا، مرحبًا بك مرة أخرى وفي هذا الدرس سنقوم بتوجيهك خلال تثبيت TypeScript في مشروعك والتأكد من أن كل شيء آخر قد ترغب في استخدامه يتم تشغيله بشكل صحيح وكما تعلم إذا رأيت أيًا من مقاطع الفيديو الأخرى الخاصة بي أنا أحد مستخدمي Visual Studio لذلك سأستخدم ذلك لإعداد هذا وبذلك، سأقوم بإنشاء مشروع جديد تمامًا وسيكون تطبيق ويب ASP.NET Core وسأطلق عليها اسمًا هناك وسأستخدم نموذج MVC هنا غير مهيأ لـ HTTPS أنا أستخدم Core 3.1 والذي يجب أن يعمل هذا في أي إصدار آخر الذي تستخدمه من Core وأول شيء أريد القيام به لتتمكن من استخدام TypeScript هو أني سأضيف هذه الحزمة في لذلك سأستخدم NuGet للقيام بذلك وما شابه، هذا هو إصدار Microsoft مدير حزمة العقدة node package manager وسأحتاج هذه الحزمة التي تبني TypeScript الخاصة بي في JavaScript لذلك سأضيف ذلك هنا في المشروع وأي تبعيات تمامًا مثل npm يجب تثبيت أي تبعيات في نفس الوقت الشيء التالي الذي يجب أن أفعله هو أني سأضيف ملف تكوين TypeScript لذا يمكنني فعل ذلك في Visual Studio فقط عن طريق إضافة عنصر جديد وأريد البحث هنا عن TypeScript ابحث عنه حتى لا أضطر للذهاب في كل مكان هناك نذهب Tsconfig.json لذا يمكنك ترك الأمر بهذا الأسم الآن، ستحصل على مجموعة افتراضية من الخيارات عندما تضع ذلك هناك ولدي مجموعة نموذجية من الخيارات الأخرى الذي أحب أن أفعلها وهذا هو المكان حيث يمكنك تكوين الطريقة التي يعمل بها مترجم أو محول TypeScript لاحظ، على سبيل المثال، هنا أنا أستهدف ECMAScript 6 لدي مكتبة ستفهم ES2017 وتكون قادرة على معالجة نموذج كائن مستند DOM والأهم من ذلك، على الأقل أريد أن أقول ما سيكون عليه دليل الإخراج الخاص بي لملفات TypeScript الخاصة بي التي أصبحت جافا سكريبت لذلك في هذه الحالة، هم تحت wwwroot / js لذلك دعونا نتأكد من أن لدي ذلك هناك نذهب لدي هذا المجلد هناك بالفعل لذلك هذا جيد، جيد جدًا حتى الآن أنا أيضا بحاجة إلى مكان سأخزن نصوص TypeScript النصية الخاصة بي فيه لذلك سأضيف مجلدًا جديدًا هنا يسمى Scripts ليس تحت wwwroot هذا موجود خارج ذلك ودعنا نضيف ملف TypeScript هنا ونرى ما إذا كان بإمكاننا عمل شيء ما لذا فإن ملف TypeScript ينتهي فقط بـ ts ها نحن ذا، وسأسميه main.ts إذن ما الذي سيحدث هنا هو أننا سنقوم بعمل TypeScript الخاصة بنا ثم في كل مرة أقوم فيها ببناء هذا المشروع في Visual Studio في كل مرة أقوم فيها بالتجميع سيتحول هذا إلى مجرد جافا سكريبت قديم جيد لذا تتمكن من رؤية الأشياء مباشرة من البداية أن هذا مختلف بعض الشيء لدينا الكتابة هنا، على سبيل المثال يمكننا أن نقول أنها سلسلة نصية وتستخدم من قبل تعريفها أحصل على هذه الخطوط الخضراء الصغيرة المتعرجة هنا حسنًا، هذا جيد في Visual Studio بدلاً من ذلك، يتم فحص TypeScript هنا يظهر هذه الأشياء على أنها أخطاء وتحذيرات في هذه الحالة، على سبيل المثال لدي الاسم هناك ويتم الاستدلال عليه من سلسلة حرفية لذلك لم أكن بحاجة لذلك في الواقع لذلك سيبلغني عن هذه الأنواع من الأشياء ثم تم استخدام هذا المتصل قبل تحديده لكن أعتقد أننا سنكون بخير هناك ويمكنك اعتبارها مجرد تلميحات إذا كان هذا مزعجًا لك يوجد ملف يمكنك فتحه eslintrc وستجده عادةً في دليل المستخدمين مباشرة من جذر دليل المستخدمين يمكنك أن ترى هناك هناك بعض الخيارات التي يمكنك تغييرها لذلك إذا ضبطته على صفر هذا سيجعله خاطئ تأكيدات من النوع المتسق هؤلاء ليسوا سوى عدد قليل من هؤلاء التي عادة ما أغيرها لأنه مرة أخرى، إنها تلميحات في معظمها وإذا كنت تعرف أي نوع جافا سكريبت الذي تقوم بإنشائه هناك ثم هذا جيد، كلما كان ذلك أفضل لذلك يجب أن أكون قادرًا فقط على مواصلة بناء المشروع مع هذا لأنني أعتقد أن هذا مجرد تحذير لذلك دعونا نبني هنا ومعرفة ما إذا كان يعمل لقد نجحت ولذا كان يجب أن أنجح ها نحن ذا، هناك ملفي الرئيسي هذا في wwwroot ومرة أخرى، لا يوجد دليل بالضرورة أن هذا جاء من TypeScript إنه مجرد جافا سكريبت عادي قديم جيد إذا ذهبت، فلنذهب هنا وسوف أقوم بإنشاء صفحة ودعنا نختبر ونتأكد أن هذا يعمل بالفعل الآن، بعض هذه الوظائف التي سنضيفها لاحقًا في الوقت الحالي، كل ما لدي هو الأساسي main وسأستدعي دالة tsHello الخاصة بي لذلك فهو مجرد JavaScript عادي لدي رابط البرنامج النصي الخاص بي هناك أستدعي tsHello والذي ينتهي به الأمر في ملف JavaScript الرئيسي الخاص بي وسأكون قادرًا على جلب ذلك ورؤية القيمة عندما أنقر على هذا الزر وهذا من شأنه أن يعطينا فكرة جيدة على الأقل لنبدأ بما يعمل هنا ولاحظ أننا لم نر أي شيء بعد لذلك دعونا نتحقق من وحدة التحكم الخاصة بنا ويمكننا أن نرى هناك، حسنًا هذا لأن لدينا بعض JQuery على الصفحة و JQuery غير مدعوم حتى الآن لذلك دعونا نبني ذلك وبعد ذلك سنعود وسنفعل كل شيء إذن ما علينا القيام به بعد ذلك هو إضافة دعم لـ JQuery سنضيف ذلك إلى ملف package.json الخاص بنا وليس لدينا واحد بعد لذلك في Visual Studio سأفعل ذلك مرة أخرى كعنصر إضافة جديد وهذا موجود في القائمة هنا كملف تكوين npm يمكننا فقط تركها تسمى package.json وسأضيف إلى تبعيات dev الخاصة بي هناك أنني أعتمد على JQuery وأعتقد أن الإصدار الذي أستخدمه هو 3.5.1 لذا سأضيف ذلك هناك وهذا يجب أن يسمح لي لاستخدام JQuery الآن وفي الواقع أعتقد أنه يمكنني إضافة ملف TypeScript آخر وفي الواقع استخدم JQuery في هذا الملف أيضًا دعنا نرى، لذلك سنفعل ذلك وسنسميها مكتبة سنمضي قدمًا ونستحوذ على مهما كانت نسخة JQuery هنا حسنًا، سأقوم بتشغيل دالة صغيرة هناك تقول مرة أخرى لا يمكن العثور على الاسم ولكن يجب أن تكون قادرة على ذلك بحلول الوقت الذي نبني فيه مرة أخرى وبحلول الوقت الذي ندير فيه تلك الصفحة ولدينا هذا العلم غير الضروري لأي شخص إذن ts-example-2 على صفحتنا دعنا نعود إلى tsHello أنها مجرد علامة امتداد span قصيرة أننا سنلتزم بشيء ما فيه وسنطلق على نسخة العرض show version هذه من هنا حسنًا، لنجرب ذلك ونرى ما إذا كانت تعمل وسنحاول مرة أخرى ولن نرى شيئًا حسنًا، لا يزال لدينا $ غير محدد لذلك دعونا نتأكد من أنه في مكانه بالفعل حسنًا، لذلك أشير إلى ذلك من وحدات Node النمطية الخاصة بي بدلا من wwwroot إذن فهذه مشكلة خاصة في مشروعي هنا لذلك سنقوم بتضمين ذلك هناك نذهب وسوف نجربها مرة أخرى هنا الآن، إذا كنت لا تزال تواجه مشكلة في ذلك والمشكلة التي قد تواجهها هو أن JQuery لم يتم التعرف عليه هناك شيء واحد صغير عليك القيام به في حالتي الخاصة، أضفت JQuery باستخدام npm لذلك إذا قمت بتشغيل هذا البيان الصغير هذا يجب أن يجعل ذلك الدعم من JQuery لا يزال يعمل في تطبيقك وسأجعل ذلك أكبر قليلاً من أجلك لذلك إذا أضفت JQuery إذا كنت تستخدمه كجزء من النموذج الذي كان هناك بالفعل قد لا تحتاج هذا لكن في هذه الحالة، أنا مرتبط بها على صفحتي باستخدام npm لذلك يجب أن يجعلها تعمل دعنا نجلب hello world هذا مرة أخرى انظر،أحيانًا، hello world ليس بهذه السهولة، أليس كذلك؟ سنقوم بإعادة ذلك ونعرف ما إذا كان يعمل آه، لدينا الآن ورقة الأنماط الخاصة بنا هناك نذهب لقد تلقيت hello وها نحن ذا، إصدار JQuery الخاص بي هو 3.5.1 لذلك في هذا الدرس، تعلمنا كيفية تثبيت JQuery في تطبيق الويب الخاص بنا وكيف نتأكد من حصولنا على الدعم لمكتبات الجهات الخارجية ترقبوا، في درسنا التالي سنفعل نظرتنا العامة الأولى على ميزات TypeScript الجزء الأول
