ایجاد پروژه با react و TypeScript

react + TypeScript
react + TypeScript

برای من که سالهاست با #C کار می‌کنم، شروع کار در دنیای javascript با TypeScript یک نعمت هستش. من سال پیش همین موقع میخواستم UI یکی از محصولات رو با react انجام بدم. اما وقتی دیدم react در اون زمان بصورت پیشفرض فقط از javascript پشتیبانی میکنه و همچنین نگران دیباگ پروژه در زمانی که پروژه وسعت پیدا میکرد بودم، بی‌خیال react شدم. اما الان با پیشرفت‌هایی که react و TypeScript داشته میشه دست بکار شد.

من برای دستگرمی اومدم یک پروژه آزمایشی طبق مستندات react برای ایجاد یک پروژه با TypeScript را شروع کردم.

اول از همه باید در یک پوشه(Folder) که میخواستم پروژه را در آن بسازم دستور(Command) زیر را وارد می‌کردم. "قبل از اجرای فرمان زیر مطمئن بشید که نسخه نصب شده npm بر روی سیستم 5.2+ باشه"

npx create-react-app my-app --typescript

بعد از کلی انتظار ایجاد پروژه تمام شد، من جهت بررسی فایلها و پوشه‌ها را نگاه کردم اما هیچ اثری از TypeScript در پروژه نبود!!!

فکر کردم شاید من جایی رو اشتباه کردم یا در تایپ خط فرمان سوئیچ رو درست ننوشتم. پس دوباره با یک کپی پیست دستور رو مجدد اجرا کردم، باز هم نتیجه مثل قبل بود و پروژه بر اساس javascript پیاده سازی شده بود.

دستور رو با پکیج منیجرهای yarn و npm هم اجرا کردم، مستندات مخزن create-react-app رو هم کامل خوندم، به فهرست issue مخزن هم نگاه کردم، مواردی که مطرح شده مربوط به نسخه‌ی پیشین 2.1 create-react-app بود که به کار من نمی‌اومد.

رفتم سراغ مستندات npx چیز خاصی نبود، اما یک عبارت توجه من رو جلب کرد، npx به اینصورت عمل میکنه که ابتدا برای اجرا دنبال پکیج نصب شده محلی می‌گرده اگر چیزی پیدا نکرد آخرین نسخه پایدار رو آنلاین دریافت و اجرا میکنه. یکدفعه به یاد سال گذشته افتادم و فکر کردم احتمالا نسخه قدیمی create-react-app روی سیستم نصبه، جهت اطمینان دستور زیر رو وارد کردم تا ببینم آیا این پکیج نصبه و اگر نصب هستش چه نسخه‌ای نصب هست.

create-react-app --version

دیدم بله نسخه 1.5.6 نصبه 😡

پس تصمیم گرفتم این پکیج رو آپدیت کنم، دستور زیر رو وارد کردم.

npm update -g create-react-app

خوب نتیجه مورد انتظار رخ نداد و پکیج آپدیت نشد🤷😅

پس با توجه به نوع رفتار npx تصمیم گرفتم این پکیج رو حذف کنم. "اصلا چه کاریه؟!!!😁 وقتی همیشه میشه آخرین نسخه رو آنلاین اجرا کرد". دستور حذف رو بصورت زیر وارد کردم.

npm uninstall -g create-react-app

جهت اطمینان تست کردم ببینم این پکیج نصب هستش یا نه که فرمان بررسی نسخه رو وارد کردم. خوشبختانه پکیج حذف شده بود و نتیجه نشون میداد که چنین فرمانی قابل اجرا نیست. در آخر دوباره دستور ایجاد پروژه به کمک npx رو وارد کردم.

npx create-react-app my-app --typescript

بعد از یک انتظار کشنده و کلی بالا و پایین زدن خلاصه پروژه react با TypeScript ایجاد شد😍😍😍