امروزه بسیاری از توسعهدهندگان از React و تایپ اسکریپت، که دو فناوری برجسته هستند برای توسعه برنامههای خود استفاده میکنند. تایپ اسکریپت یک زبان برنامه نویسی متن باز است که هنگام اجرا به جاوااسکریپت ساده کامپایل میشود. React یک کتابخانه برای طراحی رابط کاربری میباشد که با زبان جاوااسکریپت نوشته شده است.
در این مقاله قصد داریم تا درباره نحوه استفاده از تایپ اسکریپت در پروژههای React صحبت کنیم. همچنین این موضوع که چرا استفاده از تایپ اسکریپت در React مفید است و همچنین نحوه نصب و راه اندازی آن را هم بررسی خواهیم کرد.
زبان برنامه نویسی تایپ اسکریپت یک زبان شیگرا است که از تایپهای مختلف پشتیبانی میکند. کد نوشته شده در تایپ اسکریپت به جاوااسکریپت تبدیل میشود و میتواند در هر محیطی که از جاوااسکریپت پشتیبانی میکند مانند مرورگرها، Node.js و غیره مورد استفاده قرار بگیرد.
Anders Hejlsberg تایپ اسکریپت را در مایکروسافت طراحی کرد. تایپ اسکریپت در جهت پاسخ به محدودیتهایی که جاوااسکریپت در ساخت برنامههای کاربردی در مقیاس بزرگتر داشت توسعه پیدا کرد.
زبان برنامه نویسی تایپ اسکریپت یک نسخه از جاوااسکریپت با چند ویژگی اضافی است که برای ارائه یک interface قویتر، جاوااسکریپت را با سینتکس اضافی extend میکند.
React برای اولین بار در سال ۲۰۱۳ توسط فیس بوک به صورت متن باز منتشر شد و از آن زمان تاکنون به یکی از محبوبترین کتابخانهها در دنیای فرانتاند تبدیل شده است. این کتابخانه با فریمورکهایی مانند Redux میتواند به سادگی برای یکپارچهسازی عملکردهایی مانند مسیریابی و الگوهای مدیریت state گسترش پیدا کند.
React یک کتابخانه جاوااسکریپت برای ساخت رابطهای کاربری قابل تنظیم و کارآمد است. این کتابخانه اجازه میدهد تا رابطهای کاربری پیچیده را از کامپوننتها، که قطعات کوچک و مستقلی از کد هستند بسازیم.
خواندن و درک کردن کد به زبان تایپ اسکریپت آسان است. این واقعیت که در تایپ اسکریپت تایپ متغیرها در زمان کامپایل مشخص میشود بسیار مهم است. تمایز بین زبانهای برنامه نویسی با تایپ ایستا و پویا زمانی خود را نشان میدهد که بررسی تایپ رخ میدهد. تایپ متغیرها در زبانهای ایستا چک میشود.
میتوانیم تایپهای پیچیده را به عنوان interface در تایپ اسکریپت تعریف کنیم. این موضوع برای استفاده از یک تایپ پیچیده، مانند یک آبجکت با ویژگیهای متعدد بسیار مفید است. زیرا باعث میشود مشکلات به حداقل برسند.
در پروژههای React، تایپ اسکریپت به ما این اجازه را میدهد تا بتوانیم کد HTML را مستقیما بنویسیم. تایپ اسکریپت هنگامی که با React استفاده میشود IntelliSense و تکمیل کد را برای JSX (javaScript XM) ارائه میکند.
هنگام استفاده از IDEهایی مانند Visual Studio، Visual Studio Code، Atom، Webstorm، Eclipse و غیره تایپ اسکریپت انتخاب خوبی است. زیرا همه اینها با بهبود تکمیل خودکار و تولید snippet، توسعه بهتری را امکانپذیر میکنند.
ما میتوانیم تایپ اسکریپت را به تدریج در پروژههایی که داریم اضافه کنیم. در این موقعیت میتوانیم کامپایلر تایپ اسکریپت را نیز پیکربندی کنیم.
برای نصب تایپ اسکریپت با استفاده از npm، دستور زیر را اجرا میکنیم:
npm install -g typescript
سپس باید تایپ اسکریپت را متصل کنیم، زیرا ما آن را به صورت سراسری نصب کردهایم و اکنون میخواهیم npm بداند که در کجا قرار دارد. برای این کار دستور را اجرا میکنیم:
npm link typescript
پس از آن برای اطمینان از نصب درست تایپ اسکریپت دستور زیر را اجرا میکنیم:
tsc --v
دستور بالا شماره ورژن تایپ اسکریپت نصب شده را در خروجی نشان میدهد. پس از نصب موفقیت آمیز برنامه، فولدری برای نگهداری آن ایجاد میکنیم تا بتوانیم کار روی پروژه را شروع کنیم.
یک دایرکتوری جدید میسازیم:
mkdir typescript-react-project
آدرس را به فهرست فولدر جدید تغییر میدهیم:
cd typescript-react-project
با استفاده از دستور زیر میتوانیم پروژه خود را شروع کنیم:
npm init
اکنون برای نصب React با create-react-app
دستور زیر را در ترمینال خود اجرا میکنیم:
npx create-react-app
دستور بالا یک ساختار فولدر حداقلی برای برنامه ما ایجاد کرده و همچنین تمام ماژولهای مورد نیاز را نصب میکند.
فایل App.ts
را باز میکنیم و برای این که پیام Hello World را اجرا کنیم قطعه کد زیر را در آن مینویسیم:
import { Counter } from './Counter' export const App = () => { return ( <> <view style={{color:'green', textAlign: 'center'}} > <h1>Hello World</h1> </view> <Counter /> </> ) }
خروجی به صورت زیر است:
Hello World
در این مقاله سعی کردیم با بررسی زبان برنامه نوبسی تایپ اسکریپت و کتابخانه React به یک درک درست از مفاهیم آنها برسیم. اگر میخواهید این زبان برنامه نویسی و کتابخانه را یاد بگیرید و به عنوان یک توسعهدهنده یا برنامه نویس مشغول به کار شوید دوره آموزش تایپ اسکریپت و آموزش React و Redux-دوره جامع فرانت کست را پیشنهاد میکنیم.
دیدگاهها: