React و Typescript دو فناوری عالی هستند که امروزه توسط توسعه دهندگان زیادی مورد استفاده قرار می‌گیرند. در این مقاله می‌خواهیم نحوه استفاده از این دو فناوری با یکدیگر را بررسی کنیم.

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

هدف استفاده از آن‌ها با همدیگر به دست آوردن مزایای زبان statically typed (تایپ اسکریپت) برای رابط کاربری خواهد بود. این کار امنیت بیشتر و خطاهای کمتری را در front end تضمین می‌کند.

اهداف استفاده از TypeScript با React

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

این زبان قدرتمند statically typed بهشتی برای توسعه دهندگان React در سراسر جهان است. در حقیقت بسیاری از توسعه دهندگان React که تایپ اسکریپت را پیاده سازی می‌کنند، ادعا می‌کنند که نمی‌توانند تصور کنند که بدون آن کار آن‌ها چگونه به نظر خواهد رسید.

مزایای استفاده از TypeScript با React

بیاید ببینیم استفاده این دو فناوری در کنار هم چه مزایایی دارد.

1. پیشنهادهای کد: تایپ اسکریپت هنگام تایپ کردن پیشنهادات و انتخاب هایی را در اختیار شما قرار می‌دهد. این کار باعث می‌شود در وقت خود صرفه جویی کنید، و استفاده از سورس کد را برای توسعه دهندگان جدید ساده کنید. این پیشنهادات کد از اتلاف وقت جلوگیری می‌کند، هماهنگی تیم را تسهیل می‌کند، و مدیریت کد پایه را قابل اطمینان تر می‌کند.

2. خوانایی و اعتبارسنجی: از آنجا که تایپ اسکریپت یک برنامه statically typed است، شما مجاز به افزودن انواع متغیرها، توابع، و پراپرتی‌ها هستید، در نتیجه درک کد بسیار ساده‌تر می‌شود. تایپ اسکریپت اغلب برای حذف PropTypes ی React استفاده می‌شود، به همین دلیل توسعه ری‌اکت بسیار آسان می‌شود.

3. IntelliSense و شناسایی سریع تر باگ ها: از جمله محبوب ترین ویژگی‌های تایپ اسکریپت شناسایی باگ ها در سریع‌ترین زمان ممکن است. تایپ اسکریپت خطاها را قبل از اجرای کد نشان می‌دهد، به شما امکان می‌دهد در وقت خود صرفه‌جویی کنید یا آن‌ها را اصلاح کنید.

4. ریفکتورینگ و نگهداری موثر کد: با گسترش کد پایه React، تفسیر، اشتراک گذاری، یا مدیریت آن بسیار سخت می‌شود. تلاش برای پیمایش در این کدها می‌تواند طاقت فرسا بوده، و ریفکتورینگ کد خطرناک باشد. تایپ اسکریپت همچنین به شما اجازه می‌دهد کد را برای جلوگیری از خطاهای تایپی ریفکتور کنید، و مدیریت و ارتقاء آن را بدون تغییر در رفتارهای آن بسیار آسان‌تر می‌سازد.

5. استفاده از جاوا اسکریپت را افزایش می‌دهد: تایپ اسکریپت کاملا با جاوا اسکریپت ترکیب می‌شود و از آخرین قابلیت های موجود برای توسعه دهنده جاوا اسکریپت استفاده می‌کند. پروژه های React توسعه یافته با تایپ اسکریپت با نسخه جاوااسکریپت اجرا شده در هر مرورگر کامپایل می‌شوند.

چه زمانی باید از تایپ اسکریپت استفاده کنید؟

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

کانفیگ تایپ اسکریپت

تایپ اسکریپت امکان کانفیگ کامپایلر را ارائه می‌دهد. شما می‌توانید کانفیگ کنید، ورژن مورد نظر ECMAScript را تعریف کنید، source map را مجاز کنید، و غیره.

هر دوی این کانفیگ ها در فایل tsconfig.json واقع در روت پروژه انجام می‌شوند. اگر یک آبجکت خالی منتقل شود، تایپ اسکریپت از کانفیگ‌های پیش فرض استفاده می‌کند.

چگونه تایپ اسکریپت را در برنامه React راه‌اندازی کنیم؟

1. ساخت یک برنامه React جدید با استفاده از create-react-app v2.1 یا ورژن بالاتر

create-react-app 2.1 اکنون در تایپ اسکریپت ادغام شده است، اگر با استفاده از CRA در حال ساخت یک پروژه جدید هستید، از typescript—به عنوان استاندارد استفاده کنید، و پروژه جدید با استفاده از typescrip تنظیم می‌شود.

npx create-react-app codersera-react-tsx --typescript

2. تایپ اسکریپت را به پروژه فعلی create-react-app اضافه کنید

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

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

ممکن است مجبور شوید فایل‌ها را به ts. یا tsx. تغییر نام دهید و سپس سرور را آغاز کنید. این کار فایل tsconfig.json. را به طور خودکار می‌سازد و شما آماده نوشتن React در TypeScript خواهید بود.

3. وقتی از create-react-app استفاده نمی‌کنید،‌ تایپ اسکریپت را به React اضافه کنید

اگر از create-react-app استفاده نمی‌کنید، محبوب ترین روش دیگر برای راه اندازی React استفاده از webpack است. بیاید همه موارد لازم برای تغییر در کانفیگ webpack جهت دریافت تایپ اسکریپت را بیابیم.

1. نصب پکیج های مورد نیاز

npm install --save-dev typescript awesome-typescript-loader

در زیر پکیج های مورد نیاز برای نصب آورده شده است:

Typescript: این پکیج برای کامپایل کد تایپ اسکریپت در کد جاوا اسکریپت استفاده می‌شود.

awesome-typescript-loader: به عنوان webpack، جاوا اسکریپت، CSS و HTML ساده را تشخیص می‌دهد. این یک webpack loader است که به کاربران اجازه می‌دهد تا با typescript webpack برای کامپایل کد تایپ اسکریپت در کد جاوا اسکریپت ارتباط برقرار کنند. شما ممکن است یک compilation را کانفیگ کنید، برای این کار می‌توانید مستندات رسمی این loader را بررسی کنید.

2. آپدیت کانفیگ webpack را انجام دهید

بعد از نصب همه پکیج ها، می‌خواهید فایل فرمت تایپ اسکریپت، یعنی پسوند فایل های ts. و tsx. را به webpack بگویید. علاوه بر فرمت فایل، ما همچنین باید به webpack بگوییم که کدام loader می‌تواند این فرمت فایل را مدیریت کند. مثلا، برای تبدیل فایل های scss. به CSS، وب پک به پکیج sass-loader نیاز دارد.

3. فایل کانفیگ تایپ اسکریپت را اضافه کنید

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

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

با توسعه یک پروژه جدید React و یکپارچه سازی تایپ اسکریپت شروع کنید. برای استارت پروژه دستورات زیر را اجرا کنید:

npx create-react-app codersera-react-tsx --typescript

مزیت کانفیگ تایپ اسکریپت که قبلا ذکر کردیم را به خاطر دارید؟ زمان مناسبی برای پیاده سازی آن است.

پس یکی از مهم‌ترین قسمت‌های توسعه (در عین حال ترسناک ترین) کانفیگ است. خوشبختانه، پکیج react/typescript اساسی ترین فایل tsconfig.json را برای ما تولید می‌کند، که همانطور که از نامش پیداست، کانفیگ فایل تایپ اسکریپت است. با این حال، توصیه می‌شود این فایل tsconfig.json را تغییر دهید تا برای شروع با موارد زیر مطابقت داشته باشد:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true, /* allows javaScript files to be compiled */
    "skipLibCheck": true, /* skip type checking of all declaration files */
    "esModuleInterop": true, /* disables namespace imports (import * as fs from "fs") and enables CJS/AMD/UMD style imports (import fs from "fs") */
    "allowSyntheticDefaultImports": true, /* allows default imports from modules with no default export */
    "strict": true, /* enables all strict type checking options */
    "module": "esnext", /* specifies module code generation */
    "moduleResolution": "node", /* resolves modules using Node engine */
    "isolatedModules": true, /* unconditionally emits imports for unresolved files */
    "resolveJsonModule": true, /* includes modules imported with .json extension */
    "noEmit": true, /* Not to compile code, only performs type checking */
    "jsx": "react", /* Support JSX in .tsx files (This one comes in handy sometimes) */
    "sourceMap": true, /* generates corrresponding .map file */
    "declaration": true, /* generate corresponding .d.ts file */
    "noUnusedLocals": true, /* reports errors on unused locals (suggested for clean code writing) */
    "noUnusedParameters": true, /* report errors on unused parameters (again, suggested for clean code writing) */
  },
  "include": [
    "src/**/*" // *** The files TypeScript should type check ***
  ],
  "exclude": ["node_modules", "build"] // *** The files to not type check ***
}

اکنون، یکی از مفاهیم اصلی react کامپوننت‌های انعطاف پذیر قابل استفاده مجدد است. این کامپوننت‌ها از propهای معین مورد نیاز برای رفتار مطابق با شرایط خاص استفاده می‌کنند.

در تایپ اسکریپت، propها را می‌توان به وسیله یک اینترفیس یا type به صورت زیر تعریف کرد:

import React from 'react'

interface Props {
  employeeName: string;
  employeeCode: number;
}

type OtherProps = {
  employeeName: string;
  employeeCode: number;
}

/* Notice here the props are destructed in the function arguments by referencing its definition above */
function EmployeeBadge({ employeeName, employeeCode }: Props): React.ReactNode {
  return <p>I am an employee!<p>
}

جمع بندی

روش صحیح استفاده از React و TypeScript در کنار هم نگه داشتن یادگیری مرحله به مرحله است و پرداخت مزایای آن در سال‌های آتی بسیار زیاد خواهد بود. اکنون که یک بررسی کلی در مورد اینکه تایپ اسکریپت چیست و چه کاری می‌تواند برای پروژه های React شما انجام دهند به دست آوردید، بهتر می‌توانید روی پروژه‌های خود کار کنید. کارهای بیشتری در تایپ اسکریپت وجود دارد که می‌توانید برای React انجام دهید، و همچنین یادگیری‌های زیادی!