ترکیب React و Typescript: راه‌اندازی پروژه اولیه

Combining React and Typescript: Create a Project

ترکیب React و Typescript: راه اندازی پروژه ی اولیه

در این فصل به سراغ نحوه ترکیب کردن react.js و تایپ اسکریپت می رسیم. قبل از شروع این فصل باید به شما توضیح بدهم که در این فصل قصد آموزش react.js را نداریم (برای این کار به دوره کامل react.js در روکسو مراجعه کنید). پیش فرض این فصل این است که شما با react.js آشنایی دارید و نیازی به تکرار آن نیست.

زمانی که در مورد react و تایپ اسکریپت صحبت می کنیم باید پروژه اولیه ای داشته باشیم که هم react را درک کند و هم بتواند قابلیت های آن را (مثلا JSX) درک کرده و در عین حال با تایپ اسکریپت نیز آشنا باشد. انجام این کار به صورت دستی بسیار سخت است بنابراین باید از پکیج آماده ای استفاده کنیم. خوشبختانه تیم react پکیجی به نام create-react-app را دارند که یک پکیج آماده برای نوشتن پروژه های react.js است و مخصوص تایپ اسکریپت نیست اما به صورت پیش فرض از تایپ اسکریپت نیز پشتیبانی می کند. این پکیج در صفحه رسمی توسعه دهندگان react توضیح داده شده است:

https://create-react-app.dev/docs/adding-typescript/

این صفحه دو قسمت دارد که دو حالت مختلف را به شما آموزش می دهد:

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

کد نوشته شده برای استارت یک پروژه جدید به شکل زیر است:

npx create-react-app my-app --template typescript

بنابراین باید وارد پوشه دلخواه خود شوید (بهتر است پوشه ای را به این پروژه اختصاص دهید) و سپس دستور بالا را با تغییر کوچکی اجرا کنید:

npx create-react-app . --template typescript

قرار دادن نقطه به جای my-app به npm می گوید که محتویات پروژه را در پوشه فعلی بریز و دیگر پوشه جدیدی به نام my-app ایجاد نکن. گرچه اگر دوست دارید یک پوشه جدید برایتان باز شود می توانید my-app را باقی بگذارید یا نام دیگری برایش انتخاب کنید. مثلا:

npx create-react-app react-typescript-app --template typescript

نکته: اگر دستور بالا برای شما کار نکرد و تنها یک پروژه ساده جاوا اسکریپتی ساخت می توانید ابتدا create-react-app را به صورت سراسری روی سیستم خود نصب کنید:

npm install -g create-react-app

سپس دستور زیر را اجرا کنید:

create-react-app . --template typescript

با اجرای این دستور یک پروژه react ای آماده را خواهیم داشت که می توان در آن از تایپ اسکریپت استفاده کرد. همچنین در پوشه src فایل هایی با پسوند tsx را خواهید دید که ترکیب JSX Typescript است، یعنی همان JSX قبلی خودمان است اما می توانید در آن به جای جاوا اسکریپت، تایپ اسکریپت بنویسید.

من پروژه اولیه را کمی تغییر داده ام که مناسب کار ما باشد، شما هم مانند من این کار را انجام دهید. در ابتدا فایل های app.css و app.test.tsx و logo.svg و serviceWorker.ts را حذف کنید. سپس محتوای فایل index.tsx را به شکل زیر تغییر دهید (فقط برخی از خط ها را حذف کرده ام):

import React from 'react';
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

در حال حاضر کدهای موجود در index.css را به شکل زیر هستند:

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

ولی ما به این استایل ها نیازی نداریم بنابراین استایل های بالا را پاک کرده و با استایل های زیر جایگزین کنید:

html {
  font-family: sans-serif;
}

body {
  margin: 0;
}

در نهایت محتویات فایل app.tsx را به شکل زیر در بیاورید:

import React from 'react';

const App: React.FC = () => {
  return (
    <div className="App">

    </div>
  );
};

export default App;

حالا می توانیم کدنویسی را شروع کنیم. در ابتدا دستور npm start را اجرا کنید تا سرور توسعه فعال شود. حالا به کد بالا نگاه کنید. ما در این کد تایپ خاصی را به App داده ایم:

const App: React.FC = () => {

ما درون app یک تابع (function) داریم بنابراین چرا تایپ function را به آن نداده ایم؟ شما اگر به پوشه node_modules بروید و پوشه types را باز کنید انواع و اقسام تایپ های تعریف شده را مشاهده خواهید کرد. به زبان دیگر تیم react تایپ های خودشان را برای تمام قسمت های react تعریف کرده اند. در کد بالا نیز FC مخفف Function Component است یعنی تابعی که به عنوان یک کامپوننت عمل می کند. در ضمن می توانید به جای حالت خلاصه بالا از حالت عادی اش نیز استفاده کنید:

const App: React.FunctionComponent = () => {

تعداد این تایپ ها در react بسیار زیاد است و به طور مثال می توانیم برای کلاس ها نیز چنین چیزی را داریم:

const App: React.ClassicComponent = () => {

حالا از کجا می دانیم که App یک function component است؟ از آنجایی که App یک تابع است (function) که کد JSX برمی گرداند بنابراین کامپوننت محسوب می شود. به طور مثال اگر کد return در App را حذف کنیم چه اتفاقی می افتد؟

import React from 'react';

const App: React.FC = () => {

};

export default App;

بله، تایپ اسکریپت زیر App خط کشیده و به ما خطا می دهد. چرا؟ به دلیل اینکه به تایپ اسکریپت گفته ایم درون App قرار است یک function component باشد اما در حال حاضر فقط یک تابع عادی است (دیگر کد JSX برنمی گرداند). تایپ اسکریپت به همین شکل کار ما به عنوان توسعه دهنده را ساده تر می کند و اگر جایی دچار خطا شویم سریعا به ما گوشزد می کند.