كيفية التثبيت وبدء استخدام TypeScript

يعد TypeScript أحد الموضوعات الساخنة الحالية في تطوير الويب ، ولأسباب وجيهة.

يسمح لنا بكتابة cast عند التصريح عن المتغيرات مما يعني أننا نضبط نوع البيانات التي نتوقعها بشكل صريح. ثم يُلقي بأخطاء إذا لم تكن البيانات التي تم إرجاعها من النوع الذي توقعنا استعادته ، أو إذا كان استدعاء دالة يحتوي على وسيطات قليلة جدًا أو كثيرة جدًا. وهذا مجرد عينة من كل ما يقدمه.

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

قبل أن نبدأ ، من المهم ملاحظة أنه يمكن استخدام TypeScript جنبًا إلى جنب مع إطار عمل / مكتبة ولكن يمكن أيضًا استخدامه بشكل مستقل عن إطار العمل / المكتبة. TypeScript هو الإعداد الافتراضي في Angular projects ولدي مقال في الأعمال حول البدء به.

تفترض هذه المقالة أيضًا أن لديك فهمًا أساسيًا لبرمجة JavaScript.

لذلك ، نحن الآن جاهزون للبدء باستخدام TypeScript والبدء في الاستفادة من ميزاته الرائعة.

دعونا نحفر!

تثبيت TypeScript

هناك طريقتان رئيسيتان لتثبيت TypeScript. الأول هو من خلال Visual Studio (يجب عدم الخلط بينه وبين Visual Studio Code) وهو IDE. إصدارات 2015 و 2017 وأعتقد أن إصدارات 2019 تأتي مع TypeScript مثبتًا بالفعل.

ليس هذا هو المسار الذي سأقوم بتغطيته اليوم لأنني أستخدم Visual Studio Code بشكل أساسي لجميع احتياجاتي.

الطريقة الثانية ، والطريقة التي سنركز عليها ، هي من خلال NPM (Node Package Manager).

إذا لم يكن لديك بالفعل NPM و / أو Node مثبتًا (تحصل على NPM عند تثبيت Node) ، فهذا هو الوقت المناسب للقيام بذلك لأنه مطلب للخطوات التالية (وبالاقتران شرط لاستخدام TypeScript).

بمجرد تثبيت Node و NPM ، افتح الجهاز في VS Code وقم بتشغيل الأمر التالي:

npm install -g typescript

بمجرد الانتهاء من التثبيت ، سترى أنه تمت إضافة حزمة واحدة. سترى أيضًا رسالة توضح إصدار TypeScript الذي تم تثبيته.

هذا هو كل ما تحتاجه لبدء ترجمة TypeScript إلى JavaScript.

أنت الآن جاهز لبدء كتابة TypeScript!

بدء مشروع TypeScript

لنقم بإنشاء مشروع TypeScript حتى نتمكن من الاستفادة من كل تلك الميزات الرائعة المصاحبة لاستخدامه.

في المحرر الذي تختاره (أنا أستخدم VS Code) ، دعنا ننشئ ملف HTML ليكون الجانب المرئي من الكود الخاص بنا. هذا ما يبدو عليه ملف HTML الأساسي:

بصراحة ، نحن نستخدم HTML هذا فقط حتى يكون لدينا شيء نلقي نظرة عليه في الصفحة. ما يهمنا حقًا هو استخدام وحدة التحكم.

ستلاحظ أنني قمت app.jsبالربط في رأس index.htmlملفنا.

ربما تقول لنفسك أنني اعتقدت أن هذه مقالة عن TypeScript؟

حسنا امسك خيولك ، هو كذلك. أريد فقط تسليط الضوء على بعض الاختلافات بين JavaScript و TypeScript (ستتعلم من أين يأتي هذا الملف من الأسفل أدناه).

أدناه سترى إعلانًا بسيطًا عن متغير وبيان سجل وحدة التحكم:

كملاحظة جانبية ، إذا كنت ترغب في تعطيل بعض قواعد ES-Lint ، يمكنك وضع القواعد في الجزء العلوي في التعليقات كما فعلت أعلاه. أو إذا كنت تريد تماما تعطيل ES-لينت لهذا الملف فقط يمكنك وضع /* eslint-disable */في الجزء العلوي من الملف.

وهنا وحدة تحكم المتصفح:

دعنا نتظاهر بأنني أقوم ببناء تطبيق userNameوأتوقع دائمًا استعادة السلسلة. على طول الطريق ، قد أرتكب خطأ أو قد يتم تغيير بياناتي من مصدر آخر.

الآن userNameهو رقم :(

وهنا تظهر وحدة تحكم المتصفح التغييرات userNameالتي من المحتمل أننا لم نرغب في حدوثها إذا كان هذا تطبيقًا إنتاجيًا:

ماذا لو userNameتم تمريره بعد ذلك إلى دالة أخرى أو تم استخدامه كقطعة من أحجية بيانات أكبر؟

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

الآن ، لنجرب نفس التجربة في TypeScript. للقيام بذلك ، سنحتاج إلى إنشاء ملف جديد .tsبامتداد للإشارة إلى ملف TypeScript.

سأقوم بتسمية لي app.tsللبقاء متسقًا مع اصطلاحات التسمية وأضع نفس الكود من ملف JavaScript الخاص بنا في ملف TypeScript الجديد.

ستلاحظ أنني أستخدم كتابة النوع عند التصريح عن المتغير الخاص بي الآن ، وأنا أقول صراحة لـ TypeScript أن هذا المتغير يجب أن يشير إلى قيمة سلسلة فقط.

ستلاحظ أيضًا أن لديّ سطر خطأ أسفله userNameعندما أقوم بإعادة تعيين قيمته.

ترجمة TypeScript مع CLI

لمعرفة كيف يبدو هذا في وحدة التحكم الخاصة بنا ، يتعين علينا تحويله إلى JavaScript. نقوم بذلك عن طريق تشغيل tsc app.tsوحدة التحكم VS Code الخاصة بنا (يمكنك أيضًا تشغيل نفس الأمر في أي محطة طرفية طالما أنك في الدليل الصحيح).

عندما نقوم بتشغيل هذا الأمر ، سنقوم بترجمة TypeScript إلى JavaScript. سينشئ أيضًا ملفًا آخر بنفس الاسم ، .jsبامتداد فقط .

هذا هو المكان الذي app.jsجاء منه هذا الملف الذي ذكرته سابقًا في المقالة.

لتجميع ملفات متعددة في وقت واحد ، ما عليك سوى توفير هذه الأسماء في الأمر ، واحدة تلو الأخرى: tsc app.ts header.component.ts

من الممكن أيضًا تجميع ملفات TypeScript متعددة في ملف JavaScript واحد عن طريق إضافة --outالعلامة:

tsc *.ts --out index.js

هناك أيضًا أمر مراقبة يقوم بإعادة تجميع كل TypeScript تلقائيًا في أي وقت يتم فيه اكتشاف تغيير. هذا يمنعك من الاضطرار إلى تشغيل نفس الأمر مرارًا وتكرارًا:

tsc *.ts --out app.js --watch

هذا هو الإخراج من هذا tsc app.tsالأمر أعلاه:

يخبرنا هذا الخطأ بوجود مشكلة في إعادة تعيين userName. نظرًا لأننا قمنا بتعيين المتغير الخاص بنا بشكل صريح ليكون سلسلة ( حتى لو لم أقم بتعيين المتغير على سلسلة ، فسيظل الخطأ يحدث لأن TypeScript يستنتج أنواع البيانات ) لا يمكننا إعادة تعيينه إلى رقم.

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

استخدام المصفوفات والكائنات التعريفية

لنفترض أنني أقوم ببناء مشروع وبدلاً من تعيين روابط التنقل يدويًا ، أريد تخزين هذه المعلومات في مجموعة من الكائنات.

أتوقع تنسيقًا محددًا للمعلومات المخزنة بحيث يكون متسقًا عبر جميع الروابط.

إليك كيفية تعيين مصفوفة "معقدة" في TypeScript:

على الجانب الأيسر ، نعلن اسم المتغير navLinks، متبوعًا بنقطتين. في الأقواس المتعرجة ، نبدأ في الإعلان عن تنسيق المعلومات التي نتوقعها في هذه المجموعة.

نخبر TypeScript أننا نتوقع أن تحتوي هذه المصفوفة على كائن أو كائنات بأسماء وأنواع الخصائص هذه. نتوقع a nameوهو عبارة عن سلسلة ، linkوهي سلسلة ، وهي altأيضًا سلسلة.

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

حاولنا هنا إضافة إدخال جديد كان فارغًا وحصلنا على الخطأ التالي:

Type '{}' is missing the following properties from type '{ name: string; link: string; alt: string; }' : name, link, alt ts(2739)

نحصل على أخطاء مماثلة إذا حاولنا إضافة إدخال آخر بنوع خاطئ من المعلومات:

{ name: 'Jonathan', link: 15, alt: false }  ❌

{ name: ['Jon','Marley'], link: `//link123.net`, alt: null }  ❌

this.navLinks[0].img = '../../assets/img'

this.navLinks[0].name = 'Barnaby'✔️

تحصل على هذه الفكرة على الرغم من. بمجرد إنشاء التنسيق ، ستلزمنا TypeScript بهذا التنسيق وتبلغنا إذا / عندما ننحرف عنها بخطأ.

إليك أيضًا بعض الطرق لتعريف المصفوفة:

const arr1: Array = ['Dave', 35, true]; // سيتيح لنا الحصول على أي عدد من العناصر بأي نوع

const people: [string,string,string] = ['John', 'Sammy', 'Stephanie'];// سيظهر خطأ إذا ظهرت أكثر من 3 سلاسل أو أي عناصر غير سلسلة في المصفوفة

const people: Array = ['Jimmy', 'Theresa', 'Stanley'];// سيسمح لنا بالحصول على أي عدد من عناصر السلسلة فقط في المصفوفة الخاصة بنا

تعمل الكائنات بنفس الطريقة التي تعمل بها المصفوفات في TypeScript. يمكن تعريفها بوضوح باستخدام أنواع المجموعة أو يمكنك السماح لـ TypeScript بتنفيذ كل الاستنتاج. إليك مثال أساسي لكائن:

const person: {name:string, address: string, age: number} = {name: 'Willy', address: '123 Sunshine Ln', age: 35}

مرة أخرى ، على الجانب الأيسر ، نعلن أن الشخص هو الاسم المتغير مع المجموعة الأولى من الأقواس المتعرجة التي تحدد التنسيق الذي نريد أن تكون بياناتنا فيه.

من المهم ملاحظة أنه في الكائنات ، لا يجب أن يتطابق الترتيب الذي نحدد فيه خصائصنا مع ترتيب التنسيق:

الوظائف والمعلمات والحجج

تأتي بعض الفوائد العظيمة التي ستراها في TypeScript عند استخدام الوظائف.

هل سبق لك أن قمت ببناء وظيفة للقيام بمهمة محددة فقط لتكتشف أنها لا تعمل بالشكل الذي تريده؟

أثناء استخدام TypeScript ، لن يكون ذلك بسبب عدم حصولك على / إرسال النوع الصحيح من البيانات أو استخدام العدد الصحيح من المعلمات / الوسائط.

إليك مثال رائع:

في وظيفتنا نتوقع تلقي 3 حجج عند calculatorالتنفيذ. ومع ذلك ، إذا تلقينا عددًا خاطئًا من الوسائط (عدد قليل جدًا أو كثير جدًا) ، فسيعطينا TypeScript خطأً رائعًا:

وبالمثل ، إذا تلقينا نوعًا خاطئًا من البيانات عند تنفيذ هذه الوظيفة ، فسيقوم TypeScript بإنشاء خطأ ولن يتم تشغيل الوظيفة.

calculator('12', '11', 'add) ;

الآن قد تقول لنفسك "ماذا في ذلك؟ كل هذا جيد وجيد ولكن لا يبدو أنه صفقة ضخمة. لكن تخيل أن تطبيقك عبارة عن عشرات وعشرات من الملفات مع العديد من طبقات التجريد.

ومن الأمثلة الرائعة على ذلك تطبيق Angular مع الخدمات ونماذج البيانات والمكونات متعددة المستويات وجميع التبعيات التي تتماشى مع ذلك. يصبح من الصعب بشكل متزايد تحديد مصدر الخطأ عندما يصبح تطبيقك كبيرًا.

هذا كل شئ

نأمل أن تتمكن من رؤية فوائد TypeScript الآن. هناك الكثير أكثر من تلك التي أوضحتها هنا وأنا أشجعك على قراءة الوثائق إذا كنت تريد العثور على المزيد.

يمكنك العثور على هذه المقالة وغيرها من المقالات المشابهة في مدونتي. أنا أحب أن تتوقف!

أثناء وجودك هناك ، لماذا لا تشترك في رسالتي الإخبارية  - يمكنك القيام بذلك في أعلى يمين صفحة المدونة الرئيسية. أعدك بأنني لن أرسل بريدًا عشوائيًا إلى بريدك الوارد ولن تتم مشاركة معلوماتك مع أي شخص / موقع. أحب أحيانًا إرسال موارد مثيرة للاهتمام أجدها ، ومقالات حول تطوير الويب ، وقائمة بأحدث مشاركاتي.

إذا لم تكن قد فعلت ذلك بعد ، فيمكنك أيضًا التواصل معي على وسائل التواصل الاجتماعي! جميع الروابط الخاصة بي موجودة أيضًا في الجزء العلوي الأيمن من تلك الصفحة أيضًا. أحب التواصل مع الآخرين والتعرف على أشخاص جدد لذلك لا تخافوا من إلقاء التحية. ؟

أتمنى لك يومًا رائعًا ، صديق ، وترميز سعيد!