ساخت پروژه API در React با Typescript

پروژه کار با API ساده در React را قدم به قدم با Typescript انجام می دهیم.

ما در این نوشته یک برنامه API ساده در React را به کمک Typescript می سازیم. Typescript به نوعی یک Wrapper روی Javascript است که به ما قدرت بیشتری می دهد. اصلی ترین ویژگی این اصطلاحا زبان برنامه نویسی، strict type بودن متغیر ها می باشد. به عبارت دیگر از آنجا که در Javascript ما type نداریم به کمک این زبان می توانیم type ها را به صورت صریح مشخص نموده و از خطاها جلوگیری کنیم.

خب برو بریم!

برای این کار اول با npx یک پروژه می سازیم. همانطور که توجه می کنیم تمپلیت پیش فرضی که به create-react-app گفتیم تا برای ما بسازه به زبان tsx (typescript) است

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

خب اگر در پروژه ای که ایجاد شده، دقت کنید. متوجه می شوید تمام فایل هایی که در یک پروژه react با پسوند js بود، تبدیل به پسوند tsx شده اند. همچنین برای زیباتر شدن پروژه از Bootstrap نیز استفاده خواهیم نمود بنابراین آن را با دستور زیر نصب می کنیم.

npm i bootstrap

برای استفاده از bootstrap در صورت تمایل می توانید دو خط زیر رو به ابتدای index.tsx تون اضافه کنید.

import &quotbootstrap/dist/css/bootstrap.min.css&quot
import &quotbootstrap/dist/js/bootstrap.min.js&quot

خب فایل App.tsx رو باز می کنیم و تمام محتویات اون رو پاک می کنیم تا به شکل زیر در بیاد.

خیلی ریکلس حالا توی src یک پوشه به نام components ایجاد می کنیم و دو فایل Header.tsx و Header.css رو در اون قرار می دهیم.

کد Header.js را به صورت زیر می نویسیم. در این کد type کامپوننت Header را از نوع React.FunctionComponent مشخص کردیم که یک type تعریف شده در React می باشد. توجه کنید که کامپوننتی که از این فایل export می شود هم همین Header است. همچنین به وسیله generic ها در زبان tsx باید type ورودی این کامپوننت هم با Interface ها تعریف شود که در اینجا IHeaderProps می باشد که چون ورودی برای این کامپوننت نیاز نداریم، خالی می گذاریم.

همچنین App.tsx را نیز به صورت زیر تغییر می دهیم.

به زودی از این سایت اطلاعات کاربران را دریافت می کنیم و نمایش می دهیم، اما قبل از آن نیاز داریم تا type داده های دریافتی از API را به صورت صریح مشخص کنیم. برای اینکار پوشه به نام models در پوشه src ایجاد می نماییم و فایل note.model.ts را مطابق زیر در آن ایجاد می کنیم.

export interface note {
 id: string,
  title:string,
  body:string
};

در ادامه ما نیاز به کامپوننتی داریم تا note ها را به ما نشان دهد و بتونیم اون رو در Header مون بگذاریم. برای این کار کامپوننت ListNotes.tsx را ایجاد می کنیم. این کامپوننت هم مشابه کامپوننت Header تعیین type شده است. برای ورودی این کامپوننت ورودی notes را تعیین کردیم که باید با نام موجود در interface یکسان باشد. به کمک interface می توانیم type این ورودی را تعیین کنیم.

حالا تغییرات لازم در App.tsx را انجام می دهیم تا خروجی کامپوننت بالا به کاربر نشان داده شود. نکات لازم به ذکر این است که ما اولا props ای که بوسیله useState آن را نگهداری می کنیم، به کامپوننت ListNotes دادیم. همچنین type متغیر notes را از نوع model ای که تعریف کردیم، تعیین کردیم.

خب خسته نباشید، قلنج انگشتاتون رو بشکنید تا بریم سراغ ادامه کار.

حالا اطلاعات رو از API می گیریم و نمایش می دهیم. این کار رو در App.tsx و به کمک useEffect و فقط در اولین رندرینگ انجام می دهیم.

خروجی بدین صورت خواهد بود.

خب می خواهیم در انتها یک ویژگی دیگه هم اضافه کنیم که آیتم های بالا را بتوان حذف نمود. برای این کار اول باید توجه داشته باشیم که متدی که قدرت تغییر notes را دارد setNotes است که در App.tsx است، بنابراین آن را به ListNotes پاس می دهیم.

خب حال تغییرات اصلی را در ListNotes.js می دهیم. اول در UI یک دکمه ایجاد می کنیم و البته key لازم را به هر آیتم می دهیم. وظیفه دکمه پاس دادن id آیتم به متد حذف کننده است.

در متد حذف کننده به وسیله filter آیتمی که id آن موافق id مدنظر باشد را حذف می کنیم. همچنین چون به props های ListNotes تابع setNotes را نیز افزودیم باید در interface آن را معرفی کنیم.

خسته نباشید! امیدوارم براتون مفید واقع شده باشه و من خوب توضیح داده باشم. ممنون میشوم اشکالی چیزی بود بهم بگید.

ضمنا سورس کامل پروژه در این آدرس می باشد.