كيفية استخدام TypeScript مع مشروع Node.js الخاص بك

يعد TypeScript مفيدًا لتصميم التطبيقات المعقدة والبنى القوية مثل الخدمات المصغرة. بالطبع ، لا يمكن لـ TypeScript القيام بأي شيء لا تستطيع JavaScript القيام به ، ولكن يمكنها جعل المشاريع المعقدة أكثر قابلية للإدارة. تعني كتابة TypeScript الصارمة ودعمها للواجهات أنها رائعة للبرمجة الموجهة للكائنات. لقد رأينا العديد من الشركات تلجأ إلى TypeScript لترميز الخلفية الخاصة بها.

ليس هناك وقت أفضل من الآن لبدء استخدام TypeScript في مشروع Node.js الخاص بك. ولكن كيف يمكنك إعداده لمشروع Node.js الخاص بك؟ ستجد في هذا المقال.

ما هو TypeScript؟

TypeScript هو نسخة مجمعة ومكتوبة بدقة من JavaScript تم تطويرها وصيانتها بواسطة Microsoft. يتم تحويل رمز TypeScript إلى JavaScript.

تساعد طبيعة الكتابة الصارمة لـ TypeScript المطورين على تجنب الأخطاء في التعليمات البرمجية الخاصة بهم. سيقوم فقط بتجميع الكود الذي يفي بقواعد أنواع البيانات المحددة الخاصة به. هذا يجعل كود TypeScript أكثر قوة من نظيره في JavaScript النقي.

كما أنه يدعم كل من البرمجة الوظيفية والموجهة للكائنات. كل هذه الميزات تجعله قابلاً للتطوير بدرجة كبيرة ومناسب لتطوير التطبيقات المعقدة.

كيفية إعداد TypeScript في العقدة. شبيبة

سيتعين عليك سحب بعض التكوينات هنا وهناك لبدء استخدام TypeScript مع مشروع Node.js الخاص بك. لكن لا تقلق ، إنه سهل.

ومع ذلك ، تأكد من أنك قم بتثبيت حزمة Node.js npm قبل المتابعة.

قم بتهيئة ملف package.json

افتح الجهاز الطرفي وأنشئ مجلد مشروع. بعد ذلك ، أدخل هذا الدليل الجديد وقم بتهيئة مشروع Node.js:

الحرف الأول npm

يقوم الأمر أعلاه بإنشاء ملف package.json ملف لتخزين التبعيات الخاصة بك.

قم بتثبيت TypeScript وغيرها من التبعيات

بعد ذلك ، انطلق وقم بتثبيت TypeScript في مشروع Node.js الخاص بك:

npm i -D الكتابة المطبوعة

ال -د تضمن الكلمة الأساسية تثبيت TypeScript كجزء من ملف تبعيات التنمية في package.json.

سيتعين عليك أيضًا التثبيت @ أنواع / صريح، تعريف TypeScript لـ Express.js:

تثبيت npm -D types/express

بعد ذلك ، قم بتهيئة ملف tsconfig.json ملف. يوضح هذا بالتفصيل خيارات المترجم الأساسي لمشروعك:

npx tsc --فيه

يقوم الأمر أعلاه بإنشاء ملف tsconfig.json ملف في مجلد جذر المشروع الخاص بك.

أيضًا ، قم بتثبيت Express.js. يمكنك تخطي هذا إذا كنت تنوي فقط إدارة الخوادم باستخدام أساسيات HTTP المضمنة في Node.js. لكن Express.js يجعل ذلك سهلاً:

npm التثبت التعبير

بعد ذلك ، قم بتثبيت nodemon، وهي حزمة تعيد تشغيل الخادم الخاص بك تلقائيًا عندما تكون هناك تغييرات في التعليمات البرمجية الخاصة بك. تأكد من تثبيت هذا عالميًا حتى يعمل:

npm التثبت -g nodemon

تكوين TypeScript مع العقدة. شبيبة

افتح ال tsconfig.json الملف الذي قمت بتهيئته مسبقًا باستخدام ملف محرر الكود المختار. قد يكون هناك الكثير في هذا الملف. بينما يمكنك تكوين هذا الملف في شكله الحالي ، يمكنك استبدال محتواه بالكامل بالمحتوى أدناه لتبسيطه.

هذا كل ما تحتاجه tsconfig.json من أجل الذهاب:

{
"خيارات المترجم": {
"وحدة": "Commonjs",
"إنتيروب": حقيقي،
"هدف": "es6",
"وحدة": "العقدة",
"مصدر الخريطة": حقيقي،
"outdir": "حي" // يحدد دليل الناقل. 
 },
"ليب": ["es2015"]
}

مفتوح الان package.json. إليك كيفية ظهوره حاليًا بعد تثبيت TypeScript و Express:

بعد ذلك ، أضف التكوينات التالية إلى ملف نصوص مجموعة مصفوفة:

"نصوص": {
"اختبار": "صدى صوت \"خطأ: لم يتم تحديد اختبار \"&& خروج 1",
"يبني": "npx tsc",
"البداية": "العقدة ./dist/app.js",
"حي": "tsc -p.",
 "dev": "nodemon ./src/app.ts"، //يحل محل هذه مع الصحيح الدليلطريقل app.ts في لك قضية
"يكتب": "وحدة"
}

يشير التكوين أعلاه إلى بدء الخادم الخاص بك app.js، المترجمة. لا تقلق ، هذا ملف افتراضي سيتم إنشاؤه تلقائيًا في ملف حي المجلد عند تشغيل ملف يبني النصي. ستفعل ذلك لاحقًا.

يحدد التكوين بعد ذلك البرنامج النصي الأساسي للتطوير كـ app.ts.

ومن ثم ، عندما تبدأ بيئة التطوير ، nodemon أشواط app.ts. يقوم Node.js بعد ذلك بتجميع هذا في JavaScript بالداخل app.js—الذي يتصل بخادم HTTP.

بعد ذلك ، قم بإنشاء ملف src مجلد في الدليل الجذر لمشروعك. داخل هذا المجلد ، أنشئ ملف TypeScript فارغًا وقم بتسميته app.ts.

قم بإنشاء دليل Transpiler

المرشح هو ملف JavaScript يقوم بترجمة كود TypeScript إلى JavaScript أصلي. لذا فإن هذا يضمن أن الخادم يمكنه الارتباط بالكود الخاص بك مثل JavaScript بدلاً من النص المكتوب بدقة.

لذلك بينما يتعامل TypeScript مع بنية التعليمات البرمجية ، يقوم ملف transpiler بتجميعها في JavaScript.

الآن قم بتشغيل ملف يبني البرنامج النصي لإنشاء ملف حي دليل الناقل تلقائيًا:

npm تشغيل البناء

يقوم الأمر أعلاه بترجمة كود TypeScript الخاص بك إلى JavaScript. يحتوي المجلد الذي تم إنشاؤه على ملفين ؛ app.js و app.js.map.

يفتح package.json تكرارا. سترى مفتاحًا في المصفوفة المسمى الأساسية. يمكنك أن ترى أن قيمتها تشير إلى index.js. استبدل هذا بـ app.js دليل ملف (transpiler):

"الأساسية": "./dist/app.js",

بعد التنسيق ، package.json يجب أن يبدو مثل هذا:

هذا كل شيء بالنسبة لجزء التكوينات.

إنشاء وتشغيل طلب HTTP

حاول الآن إنشاء وتشغيل طلب HTTP عبر خادم Express.js لمعرفة ما إذا كان الرمز الخاص بك يجمع كما ينبغي.

داخل app.ts:

يستورد صريح ، {طلب ، استجابة} من عند 'التعبير'
مقدار ثابت التطبيق = صريح ()
app.get ('/'، غير متزامن (req: Request، res: Response) =>{
 console.log ('مرحبا بالعالم')
 res.send ('مرحبا بالعالم')
})
مقدار ثابت المنفذ = 8080
app.listen (المنفذ ، (): فارغ=>{
وحدة التحكم.سجل(التطبيق يستمع عند http://localhost:$ {منفذ}`)
})

بعد ذلك ، افتح سطر الأوامر إلى الدليل الجذر لمشروعك وقم بتشغيل ملف ديف البرنامج النصي لبدء مشروعك:

npm تشغيل dev

افتح متصفحك وانتقل إلى المضيف المحلي: 8080 ، وسترى الرد (مرحبا بالعالم). سترى هذا أيضًا في المحطة إذا قمت بتطبيق وحدة التحكم الأمر كما فعلنا في المثال أعلاه.

لدى TypeScript آفاق طلب عالية

لا يكاد يوجد فرق كبير بين TypeScript و JavaScript. لكن السابق يسهل التطور من خلال إضافته للطباعة الصارمة.

تعد TypeScript لغة قيمة في أطر الواجهة الأمامية مثل Angular ، ولا يمكننا إنكار أدائها وقابليتها للتوسع. لقد أصبح أكثر شيوعًا ، وتستمر آفاق العمل لمطوري TypeScript في الارتفاع.

مقدمة في Angular

اقرأ التالي

نبذة عن الكاتب