تعريف Typescript و شرح الفرق بينه و بين Javascript

بزاف ديال المبرمجين مدوخهم Typescript و معارفينش الفرق بينو و بين Javascript و شحال من واحد كايسول واش نتعلم Javascript ولا Typescript . هاد السؤال خاطئ و المصيبة الكبيرة كاتلقا شي واحد كايجاوبو و كايقوليه, تعلم Typescript أحسن ليك من Javascript.

فهاد المقال غانتعرفو على شناهو Typescript و الفرق بينو و بين Javascript ونصححو الفاهيم الخاطئة.

شناهو Typescript ؟؟

أبسط تعريف : Typescript هو Javascript لابس الخوذة و داير حزام السلامة.

Typescript من إنشاء شركة Microsoft.

باش نزيدو نشرحو هاد التعريف خاصنا نعرفو شناهوما المشاكيل اللي كاينين في Javascript. ملي كاتعرف شي متغير في Javascript مكاتحددش النوع ديالو واش String ولا Number .... بحيث أنه بإمكان نفس المتغير يحمل أي نوع من القيم.

مثلا :

let foo = 'hello';

foo = 10;

foo = true;

foo = []

كيف ما كاتشوفو فهاد المثال, نشأت متغير سميتو foo و عطيتو قيم من أنواع مختلفة, هادشي صحيح و مزيان حيت كايعطيك الحرية في العمل, لكن ملي كايكبر ل code غاطيح فالمشاكيل. مثال على المشكل.

function printHello(name){
console.log('hello ' + name);
}

printHello('hicham'); // hello hicham

درت function كاتعطيها إسم يعني String و كاطبع في ل console ديك hello و حداها داك الإسم اللي عطيتيها.

دبا تخيل نعطيو ل function قيمة من نوع Array بدلا من String. بطبيعة الحال غايوقع خطئ لكن المشكل هو أن الخطئ مغايباليكش فالحين و حتا ملي تخدم ل code مغايبانش المشكل حتى إوصل الوقت فين ديك ل function خاصها تخدم. ملي كايكون المشروع كبير تقدر ما تشوفش الخطئ.

هنا جا Typescript و حل هاد المشكل, بحيث انه ملي كاتبغي تنشئ شي متغير خاصك تحدد النوع ديالو بهاد الطريقة.

let name: string = 'hello';

name = 10 //  ERROR - name cannot change from string to number

Typescript كاينبهك بالخطئ قبل ما تشغل ل code ديالك مثلا في vscode كاتلقى سطر أحمر تحت الخطئ. نرجعو للمثال ديال ل function.

function printHello(name : string) : void{
console.log('hello ' + name);
}

printHello('hicham'); // hello hicham

ستعملنا string : باش نحددو باللي هاد ل function كاتقبل غير String و أيضا إستعملنا void : باش نحددو باللي هاد ل function مكاترد والو.

إلى مثلا بدلا من String عطيتيها Number غيباليك خط أحمر تحتها كايبين ليك الخطئ و حتا إلى ما شفتيهش ملي تبغي تشغل ل code مغايتشغلش و غايطلعليك الخطئ.

حاجة أخرى هي انك ملي كاتحط مؤشر الفأرة على ل function غايطلع ليك شرح ديالها شنو كاتقبل و واش كترد ليك شي حاجة و إلى كترد شناهو نوع القيمة اللي غاتردها ليك.

واش تتعلم Javascript ولا Typescript ؟؟ :

هاد السؤال خاطئ حيت javascript هو typescript مايمكنش تتعلم typescript إلى ما كنتيش كاتعرف javascript و أيضا المتصفحات كاتفهم غير javascript لذلك خاصك ضروري تحول ل code اللي كتبتي ب typescript ل javascript بإستخدام ما يسمى بال Compiler. طبعا ملي كاتكون خدام ب react ولا vite و لا أدوات أخرى, إلى إستخدمت typescript مكاتحتاش دير هاد التحويل يدويا حيت في كل مرة كادير حفظ للملف كايتم تحويل typescript ل javascript تلقائيا.

ملخص :

typescript مزيان و كايقدم ليك العديد من الإمتيازات اللي مايمكنش نهضر عليهم كاملين فهاد المقال لكن كايزيد عليك code خاصك تكتبو. بإمكانك تتعلم typescript في أسبوع أو أقل حيت كيف ما قلت هو مجرد إضافات للغة javascript باش تتجنب الأخطاء و المشاكيل اللي بعض الأحيان كاتكون بسيطة ككتابة إسم المتغير بشكل خاطئ, مثلا بدل name كاتكتب nam . هاد الأخطاء تقدر تاخدليك مدة طويلة باش تلقاها لكن typescript مغايخليكش الطيح فهاد الأخطاء بحيث انه غاينبهك على الفور.