امروزه بسیاری از توسعه‌دهندگان از React و تایپ اسکریپت، که دو فناوری برجسته هستند برای توسعه برنامه‌های خود استفاده می‌کنند. تایپ اسکریپت یک زبان برنامه نویسی متن باز است که هنگام اجرا به جاوااسکریپت ساده کامپایل می‌شود. React یک کتابخانه برای طراحی رابط کاربری می‌باشد که با زبان جاوااسکریپت نوشته شده است.

در این مقاله قصد داریم تا درباره نحوه استفاده از تایپ اسکریپت در پروژه‌های React صحبت کنیم. همچنین این موضوع که چرا استفاده از تایپ اسکریپت در React مفید است و همچنین نحوه نصب و راه اندازی آن را هم بررسی خواهیم کرد.

تایپ اسکریپت چیست؟

زبان برنامه نویسی تایپ اسکریپت یک زبان شی‌گرا است که از تایپ‌های مختلف پشتیبانی می‌کند. کد نوشته شده در تایپ اسکریپت به جاوااسکریپت تبدیل می‌شود و می‌تواند در هر محیطی که از جاوااسکریپت پشتیبانی می‌کند مانند مرورگرها، Node.js و غیره مورد استفاده قرار بگیرد.

Anders Hejlsberg  تایپ اسکریپت را در مایکروسافت طراحی کرد. تایپ اسکریپت در جهت پاسخ به محدودیت‌هایی که جاوااسکریپت در ساخت برنامه‌های کاربردی در مقیاس بزرگ‌تر داشت توسعه پیدا کرد.

زبان برنامه نویسی تایپ اسکریپت یک نسخه از جاوااسکریپت با چند ویژگی اضافی است که برای ارائه یک interface قوی‌تر، جاوااسکریپت را با سینتکس اضافی extend می‌کند.

React چیست؟

React برای اولین بار در سال ۲۰۱۳ توسط فیس بوک به صورت متن باز منتشر شد و از آن زمان تاکنون به یکی از محبوب‌ترین کتابخانه‌ها در دنیای فرانت‌اند تبدیل شده است. این کتابخانه با فریم‌ورک‌هایی مانند Redux می‌تواند به سادگی برای یکپارچه‌سازی عملکردهایی مانند مسیریابی و الگوهای مدیریت state گسترش پیدا کند.

React یک کتابخانه جاوااسکریپت برای ساخت رابط‌های کاربری قابل تنظیم و کارآمد است. این کتابخانه اجازه می‌دهد تا رابط‌های کاربری پیچیده‌ را از کامپوننت‌ها، که قطعات کوچک و مستقلی از کد هستند بسازیم.

ویژگی‌های React

• React یک کتابخانه قدرتمند و متن باز جاوااسکریپت است که ایجاد رابط‌های کاربری تعاملی را آسان‌تر می‌کند.
• React دارای یک جامعه توسعه‌دهنده بسیار قوی است که به‌سرعت در حال رشد هستند و می‌تواند به‌عنوان مبنای ایجاد اپلیکیشن‌های وب و موبایل تک‌صفحه‌ای مورد استفاده قرار گیرد.
• برنامه‌هایی که با React توسعه می‌دهیم سریع، انعطاف‌پذیر، ماژولار و مقیاس‌پذیر هستند.
• کتابخانه React مبتنی بر کامپوننت است و به ما این امکان را می‌دهد تا کامپوننت‌ها را به گونه‌ای بسازیم که state را مدیریت کرده و برای ایجاد رابط‌های کاربری پیچیده آن‌ها را باهم ترکیب کنیم.
• از کتابخانه‌های معروف می‌توانیم به Redux، Material Design و Jest اشاره کنیم.
• Redux به مدیریت state در جاوااسکریپت کمک می‌کند.
• Redux محبوب‌ترین کتابخانه React است زیرا به راحتی با توجه به scale برنامه state را بررسی و دنبال می‌کند.

مزایای استفاده از تایپ اسکریپت همراه با React

خواندن و درک کردن کد به زبان تایپ اسکریپت آسان است. این واقعیت که در تایپ اسکریپت تایپ متغیرها در زمان کامپایل مشخص می‌شود بسیار مهم است. تمایز بین زبان‌های برنامه نویسی با تایپ ایستا و پویا زمانی خود را نشان می‌دهد که بررسی تایپ رخ می‌دهد. تایپ متغیرها در زبان‌های ایستا چک می‌شود.

می‌توانیم تایپ‌های پیچیده را به عنوان interface در تایپ اسکریپت تعریف کنیم. این موضوع برای استفاده از یک تایپ پیچیده، مانند یک آبجکت با ویژگی‌های متعدد بسیار مفید است. زیرا باعث می‌شود مشکلات به حداقل برسند.

در پروژه‌های React، تایپ اسکریپت به ما این اجازه را می‌دهد تا بتوانیم کد HTML را مستقیما بنویسیم. تایپ اسکریپت هنگامی که با React استفاده می‌شود IntelliSense و تکمیل کد را برای JSX (javaScript XM) ارائه می‌کند.

هنگام استفاده از IDEهایی مانند Visual Studio، Visual Studio Code، Atom، Webstorm، Eclipse و غیره تایپ اسکریپت انتخاب خوبی است. زیرا همه این‌ها با بهبود تکمیل خودکار و تولید snippet، توسعه بهتری را امکان‌پذیر می‌کنند.

ما می‌توانیم تایپ اسکریپت را به تدریج در پروژه‌هایی که داریم اضافه کنیم. در این موقعیت می‌توانیم کامپایلر تایپ اسکریپت را نیز پیکربندی کنیم.

نصب و پیکربندی تایپ اسکریپت و React

برای نصب تایپ اسکریپت با استفاده از 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-دوره جامع فرانت کست را پیشنهاد می‌کنیم.