كيفية استخدام TypeScript في تطبيقات React

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

إنشاء مشروع React باستخدام TypeScript

يتيح لك الأمر create-reaction-app إنشاء مشاريع Typescript باستخدام امتداد --قالب اختيار.

إلى إنشاء مشروع React جديد باستخدام TypeScript ، قم بتشغيل الأمر التالي:

npx خلقتطبيق -react-app-اسم- نص قالب مطبوع

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

للقيام بذلك ، انتقل إلى المشروع الذي تريد إضافة TypeScript إليه وقم بتشغيل الكود التالي:

تثبيت npm - حفظ الكتابة المطبوعة types/node types/react types/react-dom types/jest

ثم قم بتبديل امتداد الملف .js مع .tsx للملفات التي تريد تحويلها إلى TypeScript. بمجرد القيام بذلك ، ستحصل على "يشير React إلى UMD global ، لكن الملف الحالي عبارة عن وحدة نمطية ". خطأ. يمكنك حلها عن طريق استيراد React في كل ملف مطبوع مثل هذا:

يستورد تتفاعل من "تتفاعل"

كحل أكثر وضوحًا ، أنشئ tsconfig.json واضبط jsx على رد فعل jsx.

{
"خيارات المترجم": {
"شبيبة": "رد فعل- jsx",
"استهداف": "es6",
"وحدة": "esnext",
 },
}

يمكنك العثور على جميع إعدادات التكوين من ملف مستندات TypeScript.

إنشاء مكون دالة React في TypeScript

أنت تحدد مكون دالة React بنفس طريقة وظيفة JavaScript.

يوجد أدناه مثال لمكون دالة يسمى Greetings.

يصدّرإفتراضيوظيفةتحيات() {
إرجاع (
<شعبة>مرحبا بالعالم</div>
 )
}

يقوم هذا المكون بإرجاع سلسلة "Hello world" ، ويستنتج TypeScript نوع الإرجاع الخاص به. ومع ذلك ، يمكنك إضافة تعليق توضيحي على نوع الإرجاع الخاص به:

يصدّرإفتراضيوظيفةتحيات(): JSX.عنصر{
إرجاع (
<شعبة>مرحبا بالعالم</div>
 )
}

سينتج عن TypeScript خطأ إذا قام مكون Greetings بإرجاع قيمة ليست JSX.element.

استخدام React Props مع TypeScript

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

يوجد أدناه المكون الذي تم تحريره مع اسم كعنصر. لاحظ إعلان النوع المضمن.

وظيفةتحيات({name}: {name: string}) {
إرجاع (
<شعبة>مرحبًا {name}</div>
 )
}

إذا قمت بتمرير الاسم "Jane" ، فسيرجع المكون الرسالة "Hello Jane".

بدلاً من كتابة إعلان النوع في الوظيفة ، يمكنك تعريفه خارجيًا على النحو التالي:

يكتب تحياتي الدعوات = {
 الاسم: سلسلة ؛
};

ثم قم بتمرير النوع المحدد إلى المكون على النحو التالي:

وظيفةتحيات({name}: تحياتي) {
إرجاع (
<شعبة>مرحبًا {name}</div>
 )
}

استخدم الكلمة الأساسية للواجهة إذا كنت تقوم بتصدير هذا النوع وتريد توسيعه:

يصدّر واجهه المستخدمتحياتي{
 الاسم: سلسلة ؛
};

لاحظ أن الاختلاف في بناء الجملة بين النوع والواجهة - لا تحتوي الواجهة على علامة يساوي.

يمكنك توسيع واجهة باستخدام الكود التالي:

يستورد {تحياتي} من './تحيات'
واجهه المستخدممرحبا بكميمتدتحياتي{
 زمن: "سلسلة"
}

يمكنك بعد ذلك استخدام الواجهة الموسعة في مكون آخر.

وظيفةأهلا وسهلا({الاسم ، الوقت}: WelcomeProps) {
إرجاع (
<شعبة>
 {وقت} رائع ، {name}!
</div>
 )
}

استخدم ال "؟" رمز بواجهة الدعائم لتعريف الدعائم الاختيارية. فيما يلي مثال لواجهة ذات خاصية اسم اختيارية.

واجهه المستخدمتحياتي{
 الاسم ؟: سلسلة ؛
};

إذا لم تقم بتمرير خاصية name ، فلن ينتج عن TypeScript أي خطأ.

استخدام حالة React مع TypeScript

في جافا سكريبت عادي ، أنت تحدد خطاف useState () كالآتي:

const [customerName، setCustomerName] = useState ("");

في هذا المثال ، يمكن أن يستنتج TypeScript بسهولة نوع الاسم الأول كسلسلة لأن القيمة الافتراضية هي سلسلة.

ومع ذلك ، في بعض الأحيان لا يمكنك تهيئة الحالة إلى قيمة محددة. في هذه الحالات ، يجب عليك تحديد نوع قيمة الحالة.

فيما يلي بعض الأمثلة حول كيفية تعريف الأنواع في الخطاف useState ().

const [customerName، setCustomerName] = useState<سلسلة>("");
const [age، setAge] = useState<رقم>(0);
مقدار ثابت [isSubscribe، setIsSubscrib] = useState <قيمة منطقية>(خاطئة);

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

واجهه المستخدمiCustomer{
 اسم العميل: سلسلة ؛
 العمر: الرقم ؛
 مشترك: قيمة منطقية ;
}

استخدم الواجهة المخصصة في الخطاف كما يلي:

const [customer، setCustomer] = useState<iCustomer>({
 اسم الزبون: "جين",
 العمر: 10،
 مشترك: خاطئة
 });

استخدام الأحداث مع TypeScript

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

للتوضيح ، ضع في اعتبارك مكون تسجيل الدخول التالي باستخدام الحدثين onClick () و onChange ().

يستورد {useState} من 'تتفاعل'؛
يصدّرإفتراضيوظيفةتسجيل الدخول() {
 const [email، setEmail] = useState ('');
مقدار ثابت handleChange = (حدث) => {
تعيين البريد الإلكتروني(حدث.استهداف.القيمة);
 };
مقدار ثابت handleClick = (حدث) => {
 console.log ('مُقَدَّم!');
 };
إرجاع (
<شعبة>
<نوع الإدخال ="البريد الإلكتروني" القيمة = {البريد الإلكتروني} onChange = {handleChange} />
<زر onClick = {() => مقبض انقر}>يُقدِّم</button>
</div>
 );
}

هذه هي الطريقة التي ستتعامل بها مع الأحداث في JavaScript عادي. ومع ذلك ، يتوقع TypeScript منك تحديد نوع معلمة الحدث في وظائف معالج الحدث. لحسن الحظ ، توفر React عدة أنواع من الأحداث.

على سبيل المثال ، استخدم النوع changeEvent لمعالج الأحداث handleChange ().

يستورد {ChangeEvent، useState} من 'تتفاعل'؛
const handleChange = (الحدث: ChangeEvent<HTMLInputElement>) => {
تعيين البريد الإلكتروني(حدث.استهداف.القيمة);
};

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

يوضح المثال أعلاه كيفية كتابة الحدث. يوضح الكود أدناه كيف يمكنك كتابة معالج الأحداث بدلاً من ذلك.

يستورد {ChangeEventHandler، useState} من 'تتفاعل'؛
const handleChange: ChangeEventHandler<HTMLInputElement> = (حدث) => {
تعيين البريد الإلكتروني(حدث.استهداف.القيمة);
};

بالنسبة للحدث handleClick () ، استخدم MouseEvent ().

يستورد {useState ، MouseEvent} من 'تتفاعل'؛
مقدار ثابت handleClick = (event: MouseEvent) => {
 console.log ('مُقَدَّم!');
};

مرة أخرى ، يمكنك إرفاق النوع بمعالج الحدث نفسه.

يستورد {useState ، MouseEventHandler} من 'تتفاعل'؛
مقدار ثابت handleClick: MouseEventHandler = (event) => {
 console.log ('مُقَدَّم!');
 };

لأنواع الأحداث الأخرى ، تحقق من رد فعل ورقة الغش TypeScript.

إذا كنت تقوم بإنشاء نماذج كبيرة ، فمن الأفضل أن تقوم بذلك استخدم مكتبة نماذج مثل Formik، لأنه مبني باستخدام TypeScript.

لماذا يجب عليك استخدام TypeScript؟

يمكنك توجيه مشروع React جديد لاستخدام TypeScript أو تحويل مشروع موجود. يمكنك أيضًا استخدام TypeScript مع مكونات دالة React والحالة وأحداث React.

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