ریاکت برای غارنشینان 3 (تایپ اسکریپت)

شما همون اول متوجه نمیشین که به تایپ نیاز دارین..تایپ ها کمکتون میکنن که بدونین الان چیا در اختیار دارین و چه کارهایی باهاشون میتونین بکنین ..به طور مثال من روی یه متغیر متنی نمیتونم از متد مپ استفاده کنم یا نمیتونم یه فانکشن رو که خروجی متنی نداره به عنوان پارامتر href تعیین کنم و هزار تا مثال دیگه که مجبوریم اینجور چیزا رو خودمون چک کنیم و تا وقتی اون اتفاق حین اجرا نیفته متوجه نمیشیم که کارمون جایی مشکل داشته ... حالا مثلا فرض کن معلوم باشه که یه فانکشنی خروجیش چیه یا معلوم باشه که ورودیاش باید از چه نوعی باشن و اگر نوع اشتباهی استفاده شده بود همون لحظه بگه داری اشتبا میزنی عمو ..خب این خیلی کمک میکنه تا سریع تر و بهتر و کم باگ تر کد بزنیم . از طرفی نیاز به داکیومنت رو پایین میاره و خودش یه جورایی داکیومنته. قابلیت کامل کردن خودکار بهتون کمک میکنه تا خیلی سریع تر کد بزنین انتخاب هایی که برای هندل کردن تایچ ها دارید یکی از اینهاستtypescript , flow و prop-typeفلو رو فیسبوک نوشته و به ریاکت نزدیک تر و کم دردسر تره ولی تایپ اسکریپت جنرال تر , کامیونیتی بزرگتر و کارکردن باهاش در vscode دلنشین تره ...به هر حال علاوه بر تایپ اسکریپت دوتا انتخاب دیگه هم دارین که اگه خواستین میتونین در موردشون مطالعه کنین ...من تایپ اسکریپت رو عمومی تر و فراگیر تر دیدم واسه همین رفتم سمتشتایپ اسکریپت توسط مایکروسافت معرفی شده و الان نسخه ی 3.6 خودش رو معرفی کرده و خیلی خوب با vscode مچ هست .برای نیاز هایی که من تا حالا داشتم زبون ساده ای بوده و من با دیدن چند تا مثال ازش شروع به استفاده کردم..ممکنه بعضی جاها حس کنین که داره اذیتتون میکنه ولی صبور باشین و ببینین چی میگه و چیزایی که میگه رو رفع کنین.برای این که تایپ اسکریپت یه فایل رو بشناسه لازمه پسوند اون رو به tsx تغییر بدین. موقعی که میخواین اون فایل رو اجرا کنین تایپ اسکریپت میاد و اون رو برمیگردونه به jsx و درواقع شما در انتها چیزی جز jsx نخواهید داشت که خب اونم باز توسط بابل تبدیل میشه به js خودمونالان جای آموزش تایپ اسکریپت نیست و منم هنوز دارم یاد میگیرم ولی چند تا نکته رو تا الان متوجه شدم که میگمبین type و interface یه سری تفاوت کوچیک وجود داره ولی توصیه شده که توی ریاکت از type استفاده بشهتایپ اسکریپت یه ویژگی داره به اسم enum که توصیه شده ازش استفاده نکنیمهر کتابخونه ای که از تایپ اسکریپت پشتیبانی بکنی و براش تایپ نوشته باشن رو شما میتونین تایپ هاش رو نصب کنین واستفاده کنین که جلو تر بهش میرسیمکانفیگ های تایپ اسکریپت توی یه فایل به اسم tsconfig.json ذخیره میشه که جلوتر بهش میرسیمخب بریم که حال کنیم با تایپ اسکریپتبرای نصب کافیه این دستور رو بزنین npm install --save-dev typescript با زدن این دستور تایپ اسکریپت روی پروژه ی ما نصب میشه . ما چون داریم از ریاکت و node استفاده میکنیم لازمه که تایپ های این دو کتابخونه رو نصب کنیم npm install --save-dev @types/react @types/nodeهر کتابخونه ی دیگه ای شروع به استفاده ازش میکنین رو برای این که تایپ هاش شناخته بشه لازمه نصبشون کنین ...حالا ممکنه بعضیا تایپ ها رو به طور جدا و توی یه کتابخونه ی دیگه نگه داری کنن , بعضیا هم توی همون کتابخون هی اصلی میزارن و خودکار خودش نصب میشه..یادتون باشه نبود تایپ ها مشکل ساز نیست ولی دیگه تایپ اسکریپت نمیتونه متوجه ی دستورات اون کتابخونه بشهخب تا اینجا ما فقط چند تا کتابخونه نصب کردیم و پکیج فایلمون همچین چیزیهبرای نصب تایپ اسکریپت و تایپ ها از --save-dev استفاده کردیم چون این کتابخونه ها فقط موقع دولوپ نیازه و خروجی نهایی که برای پروداکشن میره قرار نیست tsx باشه. کلا هر وقت یه چیزی فقط برای دولوپ کاربرد داشت از --save-dev موقع نصبش استفاده میکنیمخب ما همچنان توی پوشه ی pages چیزی نداریم و الان اگه npm run dev رو بزنیم باز هم مثل قبل برنامه ران میشه و با رفتن به 127.0.0.1:3000 ما ارور 404 خواهیم گرفت ..از طرفی ما هنوز فایل tsconfig.json رو نساختیم .باید بگم که نکست وقتی برای اولین بار یه فایل با پسوند tsx ببینه خودکار یه فایل tsconfig.json حاوی تنظیمات اولیه همراه با یه فایل تایپ به اسم next.d.ts میسازهساختن اولین کامپوننتخب من توی پوشه ی pages اولین فایل روتینگ ام که اشاره به / میکنه رو با اسم index.tsx میسازم و کد ساده ی زیر رو داخل مینویسماز قصد عکس فرستادم که اگه میخوای شروع کنی خودت بنویسی و از قصد دارم نصب پکیج هارو تیکه تیکه میرم جلو که ببینین چی میشهخب این کامپوننت خیلی ساده هست اول React رو از کتابخونه ی react ایمپورت کردم . یه فانکشن کامپوننت به اسم Home ساختم .. دقت کنین که اسم کامپوننت ها باید با حرف بزرگ شروع شه .این کامپوننت هیچ ورودی ای نداره واسه همین پرانتز اولی خالیه..و خروجی این کامپوننت یه تگ h1 هست که متن داخلش رو رندر میکنه .در نهایت هم این کامپوننت رو اکسپورت کردم ... اگه یکی بیاد و بگه تا همینجا ما 50 درصد ریاکت رو رفتیم به نظرم بیراه نگفتهخب حالا اگه دستور npm run dev رو بزنیم نکست متوجه میشه که یه فایل با پسوند tsx موجود و میاد و فایل tsconfig.json رو میسازهفعلا با این که توی این فایل چی هست و چیکار میشه باهاش کرد کاری ندارم ...الان میریم وارد 127.0.0.1:3000 میشیم و میبینیم که دیگه ارور 404 نداریم و پروژه داره کار میکنه و تایپ اسکریپت هم فعال شده کمی در مورد تایپ اسکریپت بخونین تا من برگردم