تایپ اسکریپت در ری اکت ! آموزش TypeScript در ریکت !

تایپ اسکریپت یک زبان برنامه نویسیه که میشه به چشم جاوا اسکریپت پیشرفته بهش نگاه کرد:) در حقیقت تایپ اسکریپت همون زبان برنامه نویسی جاوا اسکریپت هست با این تفاوت که بهش یکسری امکانات و ویژگی ها اضافه شده. تو این مقاله میخوایم تایپ اسکریپت در ری اکت رو بررسی کنیم و ببینیم چطور میشه از تایپ اسکریپت در ریکت استفاده کرد ؟تایپ اسکریپت چیست ؟زبان برنامه نویسی جاوااسکریپت کم و کاستی و مشکلات زیادی داشت که باعث شده بود خیلی از برنامه نویس ها ازش به عنوان یک زبان برنامه نویسی خوب ایراد بگیرن!این برنامه نویس ها حق داشتن! همین موضوع باعث شد که مایکروسافت یک زبان برنامه نویسی جدید بر پایه جاوااسکریپت منتشر کنه و کم و کاستی ها و ایراد های جاوااسکریپت رو تو این زبان رفع کنه و کلی ویژگی و قابلیت جدید بهش اضافه کنه.اسم این زبان برنامه نویسی جدید که نسخه ارتقا یافته جاوااسکریپت بود، تایپ اسکریپت هست.حالا شاید سوال برامون پیش بیاد که چه ویژگی هایی به جاوا اسکریپت اضافه شد که باعث تولد تایپ اسکریپت شد ؟ویژگی های تایپ اسکریپما گفتیم که تایپ اسکریپت یکسری از کم و کاستی های جاوااسکریپت رو رفع کرد و چندین ویژگی جدید بهش اضافه کرد.حالا بریم ببینیم این ویژگی های جدید چی بودن که بهش اضافه شدن…تایپ اسکریپت همون جاوااسکریپت هست با این تفاوت که بهش syntax تایپ و امکان مشخص کردن تایپ داده های ذخیره شده هنگام تعریف کردن متغیر اضافه شده.همچنین تایپ اسکریپت یک کامپایلر داره که باعث میشه هنگام برنامه نویسی کد ما کامپایل بشه و ارور ها به ما نمایش داده بشه درصورتیکه جاوااسکریپت یک زبان کامپایلری نبود و کدهای ما بصورت run-time اجرا میشد و خطاهای اپیکیشن ما هنگام اجرا در مرورگر نمایان میشدن.تو جاوااسکریپت ما تایپ های داینامیک داشتیم، یعنی تو یک متغیر میتونستیم انواع مختلف داده ای رو ذخیره کنیم ( string number , boolean و .. ) اما تو تایپ اسکریپت ما تایپ های استاتیک داریم!یعنی در زمان تعریف یک متغیر، مشخص میکنیم که قراره چه نوع داده ای در این متغیر ذخیره بشه ( مثلا number )اینجوری احتمال بروز خطا و اشتباه در اپیکیشن کمتر میشه و درصورتیکه یک داده با نوع اشتباه در اون متغیر قرار بگیره، کامپایلر تایپ اسکریپت همون لحظه بهمون خطا میده.تایپ اسکریپت در ری اکت !خبر خوب اینکه ما میتونیم از تایپ اسکریپت در ری اکت استفاده کنیم! ( به جای استفاده از جاوااسکریپت )استفاده از تایپ اسکریپت در ریکت باعث میشه پروژه اصولی تر و توسعه پذیر تری داشته باشیم. همچنین دیباگ و نگهداری از پروژه راحت تر میشه و انرژی و زمان کمتری از ما میگیره.زمانیکه از تایپ اسکریپت در ری اکت استفاده میکنیم، میتونیم تایپ Props ها و hook های اپیکیشن رو مشخص کنیم.برای اینکه یک پروژه ری اکت به کمک تایپ اسکریپت بسازیم، میتونیم از دستور زیر استفاده کنیم:npx create-react-app my-app --template typescriptبعد از ایجاد پروژه ری اکت به همراه typeScript ، میبینیم که فایل های ما پسوند .ts دارن ( پسوند تایپ اسکریپت ) اینجوری کامپایلر تایپ اسکریپت متوجه میشه که ما از تایپ اسکریپت در چه فایلهایی استفاده کردیم.فایل tsconfig.json در تایپ اسکریپتزمانیکه یک پروژه تایپ اسکریپت ایجاد میکنیم، بصورت خودکار یک فایل tsconfig.json در روت پروژه برای ما ایجاد میشه.به کمک این فایل میتونیم تنظیمات کامپایلر تایپ اسکریپت رو انجام بدیم .چطور از تایپ اسکریپت در ری اکت استفاده کنیم؟زمانیکه ما از typeScript در ری اکت استفاده میکنیم، امکان استفاده از 2 قابلیت زیر رو داریم:بررسی تایپ Props های کامپوننتبررسی تایپ hook هابریم ببینیم چطور میشه تایپ یک Props در تایپ اسکریپت رو بررسی کرد.بررسی تایپ Props کامپوننت در تایپ اسکریپتما میخوایم تایپ Props های یک کامپوننت رو به کمک تایپ اسکریپت چک کنیم. تو تیکه کد زیر یک کامپوننت داریم که یک عدد رو نمایش میده و حاوی یک دکمه برای افزایش عدد هست.ما این عدد رو در کامپوننت والد به کمک useState ذخیره کردیم و به کمک Props به کامپوننت فرزند پاس دادیم.توجه داشته باشید که تو تیکه کد زیر از تایپ اسکریپت استفاده نکردیم :const Counter = ({ counter, setCounter }) => { return ( <> <div>{counter}</div> <button ={() => setCounter(prev => prev+1)} > افزایش عدد </button> </> ) } export default Counterتو تیکه کد بالا ما تایپ Props رو چک نکردیم اما تو تیکه کد زیر اینکار رو به کمک تایپ اسکریپت در ریکت انجام دادیم:import React, { Dispatch, SetStateAction } from 'react' interface CounterProps { counter: number setCounter: Dispatch<SetStateAction<counter>> } const Counter:React.FC<CounterProps> = ({ counter, setCounter }) => { return ( <> <div>{counter}</div> <button ={() => setCounter(prev => prev+1)} > افزایش عدد </button> </> ) } export default Counterتو تیکه کد بالا، ما همون کامپوننت رو به کمک تایپ اسکریپت در react ساختیم. همونطور که میبینیم ما تایپ همه چیز رو کنترل کردیم!تو خط 8، ما از React.FC استفاده کردیم. اینجوری به کامپایلر تایپ اسکریپت اطلاع دادیم که Counter یک کامپوننت تابعی هست ( Functional Component )تو همون خط 8 ما از <CounterProps> استفاده کردیم. در حقیقت CounterProps تایپ Props های کامپوننت مارو مشخص میکنه که در خط 3 تعریفشون کردیم.تو خط 3 یک interface تعریف کردیم. interface در تایپ اسکریپت روشی برای مشخص کردن تایپ یک Object هست.تو خط 4 گفتیم که یک Props به نام Counter داریم که نوعش number ( عدد ) هست.تو خط 5 گفتیم یک Props به نام setCounter داریم که یک تابع هست. اگه دقت کنید میبینید که تایپ این Props رو Dispatch<SetStateAction> گذاشتیم.در حقیقت نوع ( تایپ ) Props های کامپوننت ما بصورت زیر میشه :interface CounterProps { counter: number setCounter: Dispatch<SetStateAction<counter>> }به همین سادگی تونستیم تایپ Props های کامپوننت خودمون رو مشخص کنیم. ما میتونیم به CounterProps خودمون Props های بیشتری اضافه کنیم. مثلا ممکنه یک Props به نام name داشته باشیم که باید نوع string داشته باشه :interface CounterProps { counter: number setCounter: Dispatch<SetStateAction<counter>> name:string }جالب اینجاست زمانیکه میخوایم به کامپوننت خودمون Props پاس بدیم، کامپایلر تایپ اسکریپت بهمون نشون میده که هر Props باید از چه نوعی باشه. مثلا زمانیکه میخوایم name رو بهش پاس بدیم بهمون میگه باید از نوع string (رشته باشه) و اگه چیزی جز string بهش بدیم بهمون خطا میده.تو تصویر بالا نشون دادن Props های هر کامپوننت در تایپ اسکریپت رو میبینید! ( توسط کامپایلر typeScript )خب حالا بیاید یکم بیشتر تایپ اسکریپت در ریکت رو بررسی کنیم :)ری اکت و تایپ اسکریپت ترکیب خوبیه ؟لطفا برای مطالعه ادامه این مقاله در وبسایت فِرانت اِندی روی لینک زیر کلیک کنید :تایپ اسکریپت در ریکت