مرحبا يا هابر!في الآونة الأخيرة ، في مجال الواجهة الأمامية ، أصبح الجمع بين React + TypeScript شائعًا بشكل خاص. وفقًا لذلك ، تزداد أهمية الترحيل المختص من JavaScript إلى TypeScript ، ويفضل أن يتم ذلك في وقت قصير. نود اليوم مناقشة هذا الموضوع معك.
كيفية إنشاء وحقن مكونات React TypeScript في مشروع React JS الخاص بك.لماذا قد تحتاج إلى الترحيل من JS إلى TS؟ قد يكون هناك العديد من الأسباب لذلك ، لكن هذه ليست النقطة. الحقيقة (الافتراضية) هي: تحتاج إلى البدء في استخدام TypeScript ، وتحتاج إلى طريقة سهلة لتنفيذها في مشروعك. علاوة على ذلك ، كل هذا يحتاج إلى القيام به بطريقة أو بأخرى ، دون انتهاك بنية كل الكود المتاح ، وإقناع الفريق بالحاجة إلى مثل هذا الانتقال.سنعرض هنا إعادة هيكلة تدريجية خطوة بخطوة: كيفية تضمين مكونات React في قاعدة رمز أخرى ، ثم استخدام Bit لإدخالها بأمان في تطبيق JavaScript فعال .تضمين مكونات TS بشكل آمن في مشروع JS باستخدام Bit
هناك العديد من الطرق للترقية من React JS إلى React TS. جوهر هذه المقالة هو إظهار كيف يتم ذلك تدريجيا. طريقة مماثلة قابلة للتطبيق في حالات أخرى.الفكرة الأساسية هي تحقيق أقصى استفادة من مكونات React + مع Bit لعزلها عن بعضها البعض في بيئة تطوير Bit الخاصة بك. يسمح لك هذا معًا بتجميع مكونات TS وحقنها بأمان في تطبيق React JS يعمل بكامل طاقته.قليلاهي أداة مفتوحة المصدر لاستخراج المكونات من مستودعات Git. يتيح لك Bit بناء مكونات TS خارج مشروع مكتوب بلغة JS ، مع تخصيص كل بيئة تطوير منفصلة معزولة ، والتي يمكن أن تعمل في مشاريع أخرى ، بغض النظر عن تكويناتها. ثم يمكنك ببساطة إصدار و "استيراد بت" هذه المكونات في مشروع JS وستعمل.إلى جانب Bit ، يوجد Bit.dev ، مركز بعيد حيث يمكنك تخزين هذه المكونات ثم إعادة استخدامها. سنحتفظ بمكونات TS في Bit.dev ، ومن هناك سنبدأ في تقديمها إلى مشروع React JS.
مثال: البحث عن تفاعل المكونات المشتركة في bit.devمثال للاستخدام
لأغراض هذه المقالة ، سنحلل مثالًا في عالم الواجهة الأمامية يشبه "hello world" الكلاسيكي: سنتحدث عن تطبيق لتخطيط الحالات.لا تقلق ، لن أخبرك كيف تكتب مثل هذا الطلب لـ React. أفترض أنك تعرف بالفعل كيفية القيام بذلك ، وبصراحة ، فإن الموضوع ليس جديدًا ، لذا رفضه.لكني سأستخدم هذا التطبيق كمثال - يمكنك شوكة ذلك بشكل صحيح ، أو على الأقل فتح رابط والاطلاع على جميع التعليمات البرمجية الخاصة به.
github.com/deleteman/react-todo-demoهذا رمز قاعدة تتكون من العناصر التالية:TodoList: هذا هو المكون الرئيسي المعروض في شكل حقل إدخال نص مع الزر المعتاد. كل شيء في النموذج ، بعد إرسال النص الذي تمت إضافته إلى القائمة التي يدعمها التطبيق الرئيسي. كود هذا المكون بسيط للغاية:import React, { Component } from 'react'
class TodoList extends Component {
render() {
return (
<div className="todoListMain">
<div className="header">
<form onSubmit={this.props.addItem}>
<input placeholder="Task"
ref={this.props.inputElement}
value={this.props.currentItem.text}
onChange={this.props.handleInput}
/>
<button type="submit"> Add Task </button>
</form>
</div>
</div>
)
}
}
export default TodoList
TodoItems : عنصر قائمة بسيط جدًا يستخدم لعرض قائمة داخلية بالعناصر المضافة من خلال المكون السابق. كل عنصر من العناصر قابل للنقر ، وبعد النقر عليه يتم إزالته من القائمة. الرمز بسيط للغاية:import React, { Component } from 'react'
class TodoItems extends Component {
createTasks(item) {
return <li key={item.key} onClick={() => this.props.deleteItem(item.key)}>{item.text}</li>
}
render() {
const todoEntries = this.props.entries || []
const listItems = todoEntries.map(this.createTasks.bind(this))
return <ul className="theList">{listItems}</ul>
}
}
export default TodoItems
في كلتا الحالتين ، يتم قبول الطرق المقابلة باعتبارها خصائص (الدعائم) من المكون الرئيسي للتطبيق. الكود الكامل لهذا المكون موجود هنا.أوافق على أن هذا التطبيق بسيط للغاية ، ولكن ، أؤكد مرة أخرى ، من المحتمل أن يكون هناك أي تطبيق React الذي تعمل عليه حاليًا - وفجأة تحصل على المهمة لبدء الترحيل إلى TypeScript. ماذا أفعل؟- الخيار رقم 1: بعد مسح الدموع ، تبدأ في إعادة كتابة القاعدة الكاملة لشفرة المصدر.
- الخيار رقم 2: إعادة تسمية جميع ملفات .js الخاصة بك إلى .ts ، وتهيئة الخطوات اللازمة في عملية التجميع وغسل يديك.
- الخيار رقم 3: أنت تقرر أن الوقت قد حان بالفعل للانتقال إلى الترحيل التدريجي لجميع الشفرات القديمة ، وكتابة جميع الشفرات الجديدة مباشرة على TypeScript.
أريد مناقشة الخيار رقم 3 بمزيد من التفصيل ، ولكن ، من حيث المبدأ ، لا أرفضك أنه في نفس التطبيق يمكنك التعايش بين المكونات المكتوبة بلغة جافا سكريبت وكذلك في TypeScript.أدخل TypeScript
لذا ، كمثال ، لنفترض أننا مكلفون بإضافة زر تبديل إلى كل مكون في قائمة المهام لدينا. بعد النقر على عنصر ما ، يجب تبديله في الخلفية.لا شيء خارق ، لكن كما تتذكر ، في هذه الحالة نحن مهتمون بالعملية ، وليس الشفرة على هذا النحو.لذلك ، لن نحاول إضافة TypeScript إلى مشروعك المخصص ، حتى لا يتم تقسيم التجميع الحالي إلى عدة أيام عن طريق الخطأ ، ولكن إنشاء مشروع جديد تمامًا باستخدام TypeScript خالص:$ npx create-react-app ts-components --template typescript
يرجى ملاحظة ما يلي: لاستخدام npx ، تحتاج فقط إلى الإصدار الجديد من NPM ، ويتم تضمينه في عملية التثبيت في الإصدار 5.2.0 والإصدارات الأحدث.تمامًا كما كان من قبل ، في هذه الحالة يتم إنشاء نموذج للمشروع ، ولكن هذه المرة نستخدم TypeScript كلغة أساسية.بالإضافة إلى ذلك ، مكون تبديل بسيط ، مناسب للإدراج في مشروع آخر ، دون تقديم تبعيات إضافية. إذا كنت مهتمًا بكيفية القيام بذلك ، فاقرأ المقالة التالية حول كيفية كتابة المكونات القابلة لإعادة الاستخدام .import React, {useState} from 'react';
interface IActionProps {
action: (status:boolean) => void,
buttonText?: string
}
const Toggle = ({action, buttonText="Toggle"}: IActionProps) => {
const [isSelected, setSelected] = useState(false)
return (
<button onClick={() => {
setSelected(!isSelected)
action(isSelected)
}} >{buttonText}</button>
)
}
export default Toggle
الآن بعد كتابة هذا المكون ، يمكنك استخدام Bit (هذه أداة مفتوحة المصدر لإصدار ونشر مكونات فردية) لاستخراج هذا المكون المحدد ومشاركته بحيث يمكنك استيراده لاحقًا من مشروعنا المستند إلى JavaScript.// Bit
$ yarn global add bit-bin
$ bit init --package-manager yarn// ( , bit.dev)
$ bit login//
$ bit add src/components/Toggle.tsx // ( env)
$ bit import bit.envs/compilers/react-typescript --compiler//
$ bit tag –all
لذلك تقوم بتكوين مشروعك وتكوين مكون التبديل الجديد (التبديل) فيه بحيث يمكن مشاركته مع مشاريع أخرى. ولكن ، قبل أن تتمكن من القيام بذلك عمليًا ، تحتاج إلى تسجيل الدخول إلى Bit.dev (هذا هو مركز المكون - موقع به سجل ووثائق يكمل Bit كنظام أساسي لنشر ومعاينة المكونات).بمجرد تسجيل الدخول ، ما عليك سوى إنشاء مجموعة جديدة تسمى "toggler" ، وجعلها عامة ، ثم قم بتشغيل الأمر التالي في نافذة المحطة الطرفية:$ bit export user-name.toggler
إذا كان "اسم المستخدم" هو حقًا اسم المستخدم الخاص بك ، فسيتم تصدير المكون نتيجة لذلك ، ويمكنك رؤيته على Bit.dev. يجب أن يبدو شيئًا مثل هذا:
لاحظ كيف يقوم البرنامج افتراضيًا بإنشاء ملف عينة index.jsلاختبار المكون. في الوقت نفسه ، قد لا يكون المحتوى المكتوب على هذا الملف افتراضيًا مثاليًا ، لذا فإن النظام الأساسي يجعل من السهل إضافة رمز إضافي إليه ، حتى يفهم الآخرون كيفية استخدام المكون العام في التعليمات البرمجية الخاصة بهم.على سبيل المثال ، قمت هنا بتحديث نموذج ملفي ، وإضافة توضيحات حول كيفية استخدام مكون Toggler (تذكر فقط النقر فوق الزر "حفظ" عند الانتهاء!):
الآن دعونا نلقي نظرة على كيفية استيراد هذا المكون الجديد إلى تطبيق React القائم على JS الخاص بك.استيراد مكون خارجي
تهتم بت بتجميع كود TypeScript في JavaScript بفضل المحول البرمجي الذي أضفناه. هذا يحل جميع مشاكلنا ، وكل ما تبقى لنا هو إضافة هذا المكون إلى مشروعك كاعتماد.لجميع الأغراض ، استخدمت الغزل هنا ، ولكن يمكنك استخدام NPM بنفس النجاح ، كل ما تحتاجه لهذا:$ yarn add @bit/your-username.your-collection.your-component
في حالتي ، يتحول هذا الرمز إلى:$ yarn add @bit/deleteman.toggler.toggle
يرجى ملاحظة: أنك لن تكون قادرًا على تثبيت المكونات بدون تسجيل الدخول (تذكر الجزء المتعلق $ bit loginبهذا الدليل؟). إذا كنت ترغب في تثبيت مكونات من تسجيل Bit ، فأنت بحاجة إلى تكوين التسجيل يدويًا ، مثل هذا:$ npm config set '@bit:registry' https://node.bit.dev
وبالتالي ، سيتم تضمين مكون TypeScript (الذي تم تجميعه بالفعل في JavaScript) في المشروع ، وستتمكن من الرجوع إلى هذا المكون من التعليمات البرمجية الخاصة بهم كما يلي:import React, { Component, useState } from 'react'
import Toggle from '@bit/deleteman.toggler.toggle';
const TodoItem = ({text, itemKey}) => {
const [iClass, setIClass] = useState("white")
const toggleBackground = status => {
setIClass(status ? "white" : "black")
}
const toggleProps = {
action: toggleBackground,
buttonText: "Select"
}
return <li className={iClass} key={itemKey} >{text}<Toggle {...toggleProps}/></li>
}
export default TodoItem
انتبه إلى السطر 2 ، حيث أقوم باستيراد المكون الخارجي الذي أنوي استخدامه كجزء من بيان الإرجاع. لا يوجد شيء معقد ، لا يلزم إجراء تغييرات تكوين إضافية في مشروعك أو في أي مكان آخر.تهانينا ، لديك الآن مشروع عمل يستخدم كل من TypeScript و JavaScript ، يمكنك القيام بذلك حتى لا تلاحظه!كما ذكرت أعلاه ، يتم نشر رمز المشروع بالكامل على GitHub !استنتاج
إذا كنت مهتمًا بالترحيل إلى TypeScript ، أو تريد فقط تجربتها ومعرفة كيفية عملها ، فهذه هي الطريقة المناسبة لإدخال اللغة تدريجيًا في مشروع موجود ، دون المخاطرة بإسقاط عملية التجميع بأكملها.انتبه إلى Bit وانظر إلى Bit.dev ، واعثر على مكونات أخرى مكتوبة بلغة JavaScript و TypeScript في نفس الوقت لفهم كيفية كتابة الآخرين لها!