تایپ اسکریپت در ری اکت ! آموزش TypeScript در ریکت !
تایپ اسکریپت یک زبان برنامه نویسیه که میشه به چشم جاوا اسکریپت پیشرفته بهش نگاه کرد:) در حقیقت تایپ اسکریپت همون زبان برنامه نویسی جاوا اسکریپت هست با این تفاوت که بهش یکسری امکانات و ویژگی ها اضافه شده. تو این مقاله میخوایم تایپ اسکریپت در ری اکت رو بررسی کنیم و ببینیم چطور میشه از تایپ اسکریپت در ریکت استفاده کرد ؟
تایپ اسکریپت چیست ؟
زبان برنامه نویسی جاوااسکریپت کم و کاستی و مشکلات زیادی داشت که باعث شده بود خیلی از برنامه نویس ها ازش به عنوان یک زبان برنامه نویسی خوب ایراد بگیرن!
این برنامه نویس ها حق داشتن! همین موضوع باعث شد که مایکروسافت یک زبان برنامه نویسی جدید بر پایه جاوااسکریپت منتشر کنه و کم و کاستی ها و ایراد های جاوااسکریپت رو تو این زبان رفع کنه و کلی ویژگی و قابلیت جدید بهش اضافه کنه.
اسم این زبان برنامه نویسی جدید که نسخه ارتقا یافته جاوااسکریپت بود، تایپ اسکریپت هست.
حالا شاید سوال برامون پیش بیاد که چه ویژگی هایی به جاوا اسکریپت اضافه شد که باعث تولد تایپ اسکریپت شد ؟
ویژگی های تایپ اسکریپ
ما گفتیم که تایپ اسکریپت یکسری از کم و کاستی های جاوااسکریپت رو رفع کرد و چندین ویژگی جدید بهش اضافه کرد.
حالا بریم ببینیم این ویژگی های جدید چی بودن که بهش اضافه شدن…
تایپ اسکریپت همون جاوااسکریپت هست با این تفاوت که بهش syntax تایپ و امکان مشخص کردن تایپ داده های ذخیره شده هنگام تعریف کردن متغیر اضافه شده.
همچنین تایپ اسکریپت یک کامپایلر داره که باعث میشه هنگام برنامه نویسی کد ما کامپایل بشه و ارور ها به ما نمایش داده بشه درصورتیکه جاوااسکریپت یک زبان کامپایلری نبود و کدهای ما بصورت run-time اجرا میشد و خطاهای اپیکیشن ما هنگام اجرا در مرورگر نمایان میشدن.
تو جاوااسکریپت ما تایپ های داینامیک داشتیم، یعنی تو یک متغیر میتونستیم انواع مختلف داده ای رو ذخیره کنیم ( string number , boolean و .. ) اما تو تایپ اسکریپت ما تایپ های استاتیک داریم!
یعنی در زمان تعریف یک متغیر، مشخص میکنیم که قراره چه نوع داده ای در این متغیر ذخیره بشه ( مثلا number )
اینجوری احتمال بروز خطا و اشتباه در اپیکیشن کمتر میشه و درصورتیکه یک داده با نوع اشتباه در اون متغیر قرار بگیره، کامپایلر تایپ اسکریپت همون لحظه بهمون خطا میده.
تایپ اسکریپت در ری اکت !
خبر خوب اینکه ما میتونیم از تایپ اسکریپت در ری اکت استفاده کنیم! ( به جای استفاده از جاوااسکریپت )
استفاده از تایپ اسکریپت در ریکت باعث میشه پروژه اصولی تر و توسعه پذیر تری داشته باشیم. همچنین دیباگ و نگهداری از پروژه راحت تر میشه و انرژی و زمان کمتری از ما میگیره.
همچنین زمانیکه از TypeScript در ری اکت استفاده میکنیم، تجربه کد زنی و توسعه خیلی بهتری خواهیم داشت ( به عنوان Developer )
زمانیکه از تایپ اسکریپت در React استفاده میکنیم، میتونیم تایپ Props ها، hook ها و .. اپیکیشن رو مشخص کنیم.
برای اینکه یک پروژه ری اکت به کمک تایپ اسکریپت بسازیم، میتونیم از دستور زیر استفاده کنیم:
npx create-react-app my-app --template typescript
بعد از ایجاد پروژه ری اکت به همراه typeScript ، میبینیم که فایل های ما پسوند .ts دارن ( پسوند تایپ اسکریپت ) اینجوری کامپایلر تایپ اسکریپت متوجه میشه که ما از تایپ اسکریپت در چه فایلهایی استفاده کردیم.
فایل tsconfig.json در تایپ اسکریپت
زمانیکه یک پروژه تایپ اسکریپت ایجاد میکنیم، بصورت خودکار یک فایل tsconfig.json در روت پروژه برای ما ایجاد میشه.
به کمک این فایل میتونیم تنظیمات کامپایلر تایپ اسکریپت رو انجام بدیم .
چطور از تایپ اسکریپت در ری اکت استفاده کنیم؟
زمانیکه ما از typeScript در ری اکت استفاده میکنیم، امکان استفاده از 2 قابلیت زیر رو داریم:
- بررسی تایپ Props های کامپوننت
- بررسی تایپ hook ها
بریم ببینیم چطور میشه تایپ یک Props در تایپ اسکریپت رو بررسی کرد.
.
بررسی تایپ Props کامپوننت در تایپ اسکریپت
ما میخوایم تایپ Props های یک کامپوننت رو به کمک تایپ اسکریپت چک کنیم. تو تیکه کد زیر یک کامپوننت داریم که یک عدد رو نمایش میده و حاوی یک دکمه برای افزایش عدد هست.
ما این عدد رو در کامپوننت والد به کمک useState ذخیره کردیم و به کمک Props به کامپوننت فرزند پاس دادیم.
توجه داشته باشید که تو تیکه کد زیر از تایپ اسکریپت استفاده نکردیم :
const Counter = ({ counter, setCounter }) => {
return (
<>
<div>{counter}</div>
<button
onClick={() => setCounter(prev => prev+1)}
>
افزایش عدد
</button>
</>
)
}
export default Counter
تو تیکه کد بالا ما تایپ Props رو چک نکردیم اما تو تیکه کد زیر اینکار رو به کمک تایپ اسکریپت در ریکت انجام دادیم:
import React, { Dispatch, SetStateAction } from 'react'
interface CounterProps {
counter: number
setCounter: Dispatch<SetStateAction<counter>>
}
const Counter:React.FC<CounterProps> = ({ counter, setCounter }) => {
return (
<>
<div>{counter}</div>
<button
onClick={() => setCounter(prev => prev+1)}
>
افزایش عدد
</button>
</>
)
}
export default Counter
تو تیکه کد بالا، ما همون کامپوننت رو به کمک تایپ اسکریپت در react ساختیم. همونطور که میبینیم ما تایپ همه چیز رو کنترل کردیم!
تو خط 8، ما از React.FC استفاده کردیم. اینجوری به کامپایلر تایپ اسکریپت اطلاع دادیم که Counter یک کامپوننت تابعی هست ( Functional Component )
تو همون خط 8 ما از <CounterProps> استفاده کردیم. در حقیقت CounterProps تایپ Props های کامپوننت مارو مشخص میکنه که در خط 3 تعریفشون کردیم.
تو خط 3 یک interface تعریف کردیم. interface در تایپ اسکریپت روشی برای مشخص کردن تایپ یک Object هست.
تو خط 4 گفتیم که یک Props به نام Counter داریم که نوعش number ( عدد ) هست.
تو خط 5 گفتیم یک Props به نام setCounter داریم که یک تابع هست. اگه دقت کنید میبینید که تایپ این Props رو Dispatch<SetStateAction> گذاشتیم.
در حقیقت نوع ( تایپ ) Props های کامپوننت ما بصورت زیر میشه :
interface CounterProps {
counter: number
setCounter: Dispatch<SetStateAction<counter>>
}
به همین سادگی تونستیم تایپ Props های کامپوننت خودمون رو مشخص کنیم. ما میتونیم به CounterProps خودمون Props های بیشتری اضافه کنیم. مثلا ممکنه یک Props به نام name داشته باشیم که باید نوع string داشته باشه :
interface CounterProps {
counter: number
setCounter: Dispatch<SetStateAction<counter>>
name:string
}
جالب اینجاست زمانیکه میخوایم به کامپوننت خودمون Props پاس بدیم، کامپایلر تایپ اسکریپت بهمون نشون میده که هر Props باید از چه نوعی باشه. مثلا زمانیکه میخوایم name رو بهش پاس بدیم بهمون میگه باید از نوع string (رشته باشه) و اگه چیزی جز string بهش بدیم بهمون خطا میده.
ویژگی بالا فوق العادس ! چون به ما اطلاع میده که هر کامپوننت چه Props هایی میگیره و هر Props باید از چه نوعی باشه.
این ویژگی مخصوصا تو پروژه های بزرگ خیلی کاربرد داره. فرض کنید کامپوننت های ما انقد بزرگ شدن که هر کامپوننت 30 تا Props میتونه بگیره و همزمان 5 نفر Front-End Developer دارن روی پروژه کار میکنن.
مشخص کردن Type هوک ها در تایپ اسکریپت !
ما میتونیم به هوک ها در ری اکت type بدیم. ( البته اگه از تایپ اسکریپت استفاده کرده باشیم )
تو ری اکت ما معمولا Type دو هوک رو مشخص میکنیم :
- تایپ هوک useState
- تایپ هوک useRef
ببینیم چطور میشه به هوک useState در ریکت تایپ داد ..
مشخص کردن Type هوک useState در ریکت !
تیکه کد زیر یک useState هست که فاقد type هست :
const [frontEndi,setFrontEndi] = useState(0)
تو تیکه کد زیر، به همون useState تایپ دادیم که فقط امکان ذخیره کردن number ( عدد ) رو داشته باشه:
const [frontEndi,setFrontEndi] = useState<number>(0)
ما به هوک useState بالایی گفتیم که تو فقط امکان ذخیره کردن مقدار با نوع number رو داری. واضحه اگه بخوایم یه موقع داخل این state مقداری غیر از number ذخیره کنیم، تایپ اسکریپت بهمون خطا میده !
همچنین ما میتونیم 2 نوع ( type ) به useState خودمون بدیم :
const [frontEndi,setFrontEndi] = useState<number | string>(0)
حالا میتونیم داخل useState خودمون هم عدد ذخیره کنیم هم رشته ( string | number )
حالا که دیدیم چطور میشه Type هوک useState رو مشخص کرد، بریم ببینیم چطور میشه Type هوک useRef رو هم مشخص کرد ..
مشخص کردن Type هوک useRef در ریکت !
به کمک هوک useRef در ریکت میتونیم به اِلِمان های موجود در DOM دسترسی داشته باشیم.
تو تیکه کد زیر ما از useRef در تایپ اسکریپت استفاده کردیم و مشخص کردیم که useRef ما میتونه حاوی مقدار با چه نوعی باشه :
import React, { useEffect, useRef } from 'react'
const Counter:React.FC = () => {
const ref = useRef<HTMLInputElement>(null)
useEffect(() => {
if (ref.current) ref.current.focus()
}, [])
return (
<input type="text" ref={ref} />
)
}
export default Counter
ری اکت و تایپ اسکریپت ترکیب خوبیه ؟
قطعا بله ! اگه قصد ایجاد یک پروژه React رو دارین، حتما از تایپ اسکریپت و ری اکت استفاده کنید.
بیاید قبل از هرچیز ببینیم چرا باید از تایپ اسکریپت و ری اکت در کنار یکدیگر استفاده کنیم :
چک کردن نوع متغیر ها در تایپ اسکریپت!
زمانیکه ما از تایپ اسکریپت در React استفاده میکنیم، کامپایلر تایپ اسکریپت نوع متغیرهای مارو چک میکنه و اگه یک مقدار با نوع اشتباه داخلش ذخیره کنیم به ما خطا میده. همین مسئله کمک میکنه تا مقدار اشتباه داخل متغیر های خودمون ذخیره نکنیم و احتمال بروز خطا در اپیکیشن کمتر بشه.
افزایش خوانایی کد!
زمانیکه ما از typeScript در ری اکت استفاده میکنیم، خوانایی کد ما چند برابر میشه. بطور مثال زمانیکه میخوایم به کامپوننت خودمون Props پاس بدیم میتونیم متوجه بشیم که کامپوننت ما چه Props هایی با چه تایپی قبول میکنه.
اینترفیس های تایپ اسکریپت!
interface در تایپ اسکریپت به ما اجازه میده تایپ های پیچیده رو برای کامپوننت خودمون مشخص کنیم. مثلا زمانیکه یک Object داریم که این Object شامل اعضای زیر مجموعه هست میتونیم به کمک interface نوعشون رو مشخص کنیم.
پشتیبانی کامل از JSX در ریکت!
JSX بصورت کامل از تایپ اسکریپت پشتیبانی میکنه. یعنی زمانیکه از تایپ اسکریپت در ری اکت استفاده میکنیم، میتونیم کدهای JSX خودمون رو با خیال راحت بنویسیم.
پشتیبانی از تمامی IDE ها!
خوشبختانه تمامی IDE ها از تایپ اسکریپت پشتیبانی میکنن ( مثل Visual Studio , Visual Studio Code , Atom , Webstorm Eclipse و ..
جامعه آماری بالا!
تایپ اسکریپت یک زبان برنامه نویسی Open Source هست که توسط مایکروسافت ساخته شده. این زبان برنامه نویسی توسط میلیون ها برنامه نویس و توسعه دهنده در حال استفادس! خوشبختانه تایپ اسکریپت جامعه آماری خوبی داره.. آموزش ها و پرسش و پاسخ های بسیار زیادی برای این زبان برنامه نویسی محبوب وجود داره.
فرمت فایل .tsx چیست ؟
فرمت فایل .tsx در نسخه 1.6 تایپ اسکریپت معرفی شد که به ما اجازه میداد از JSX در ری اکت استفاده کنیم. در حقیقت تو فایلهایی که فرمت .tsx داشته باشن، امکان استفاده از تایپ اسکریپت و JSX رو در کنار یکدیگر خواهیم داشت.
تفاوت فرمت فایل .tsx و .ts چیست ؟
تفاوت .ts و .tsx در تایپ اسکریپت خیلی سادس!
فرمت فایل .ts برای فایلهایی استفاده میشه که ما داخلشون میخوایم توابع، کلاس ها، reducer و .. داشته باشیم و هیچ نوع کد JSX داخلشون لازم نداریم ( مثل اِلِمان ها )
اما فرمت فایل .tsx به ما اجازه استفاده از JSX در کنار تایپ اسکریپت رو میده.
انواع تایپ ها در تایپ اسکریپت کدامند ؟
ما تو TypeScript چند تایپ/نوع مختلف داریم که عبارتند از :
- string
- number
- booleaan
- array
- object
تعیین تایپ Props کامپوننت در تایپ اسکریپت
تو ری اکت، کامپوننت های ما میتونن Props بگیرن. در حقیقت این Props ها ورودی کامپوننت ما هستن.
زمانیکه از تایپ اسکریپت در ری اکت استفاده میکنیم، میتونیم تایپ Props دریافتی رو مشخص کنیم.
اینجوری کامپوننت ما خیلی خیلی قابل پیش بینی میشه چون ما میدونیم این کامپوننت قراره چه Props ها با چه نوعی دریافت کنه.
تو تیکه کد زیر من تایپ Props کامپوننت خودم رو مشخص کردم چون از TypeScript در ری اکت استفاده کردم:
interface MyComponentProps {
title: string;
age: number;
}
const MyComponent: React.FC<MyComponentProps> = ({ title, age }) => {
return (
<div>
<h1>{title}</h1>
<p>Age: {age}</p>
</div>
);
};
تو خط 1 تا 4 تیکه کد بالا من یک interface تعریف کردم و داخلش گفتم یک title با نوع رشته و یک age با تایپ عددی دارم.
سپس تو خط 6 این interface رو به کامپوننت خودم پاس دادم.
حالا کامپوننت من فقط میتونه دو Props با نام و تایپ مشخص شده دریافت کنه.
یعنی اگه بخوایم به کامپوننت بالا Props بدیم، باید بصورت زیر این کار رو انجام بدیم :
<MyComponent title="Hello FrontEndi.com" age={25} />;
اگه ما title رو بصورت رشته یا age رو بصورت عدد پاس ندیم، کامپایلر تایپ اسکریپت بهمون ارور میده.
تعیین تایپ State در کامپوننت های ری اکتی به کمک تایپ اسکریپت !
کامپوننت های ما در React میتونن State داشته باشن و مقادیر مختلفی ذخیره کنن.
زمانیکه از تایپ اسکریپت در ری اکت استفاده میکنیم، میتونیم Type ( تایپ ) State های کامپوننت خودمون رو مشخص کنیم.
تو تیکه کد زیر من یک State به اسم user دارم که 2 مقدار با نام های name و age میتونه ذخیره کنه. ( مقدار name رشته ای هست و مقدار age عددی )
import React, { useState } from 'react';
interface User {
name: string;
age: number;
}
const MyComponent: React.FC = () => {
// Explicitly setting the type of state
const [user, setUser] = useState<User>({ name: '', age: 0 });
// Rest of your component
return (
<div>
<p>Name: {user.name}</p>
<p>Age: {user.age}</p>
</div>
);
};
export default MyComponent;
تو خط 3 تا 6 تیکه کد بالا، من یک interface تعریف کردم و نوع Props های خودم رو تعیین کردم. چون من میخوام داخل State خودم name و age رو ذخیره کنم، نوع رشته ای و عددی بهشون دادم.
سپس در خط 10، زمانیکه از هوک useState استفاده کردم، interface خودم رو بهش پاس دادم.
حالا دیگه State من فقط مقادیر زیر رو میتونه ذخیره کنه :
- یک user با نوع رشته ای
- یک age با نوع عددی
کامپوننت های تابعی + تایپ اسکریپت !
ما میدونیم که دو نوع کامپوننت در ری اکت داریم :
- Functional Component
- Class Component
کامپوننت های کلاسی که دیگه منسوخ شدن و هیچ!
اما کامپوننت های تابعی، سازگاری خیلی خوبی با تایپ اسکریپت در ریکت دارن!
اگه ما قصد ایجاد یک Functional Component داریم میتونیم از React.FC برای دادن تایپ بهش استفاده کنیم :
interface AppProps {
message: string;
}
const App: React.FC<AppProps> = ({ message }) => <div>{message}</div>;
تعیین تایپ HOC در تایپ اسکریپت و ری اکت !
تو ری اکت یک ویژگی جذاب و خفن داریم به اسم HOC، اگه با HOC آشنا نیستید پیشنهاد میکنم مقاله HOC در ری اکت چیست رو مطالعه کنید.
اما زمانیکه از تایپ اسکریپت در React استفاده میکنیم، میتونیم تایپ HOC خودمون رو مشخص کنیم.
تایپ اسکریپت و ریداکس !
اگه تو اپیکیشن خودمون از State Management هایی مثل Redux یا Zustand استفاده میکنیم، باید برای تمامی اجزای خودمون Type تعیین کنیم.
از Store گرفته تا Action و Reducer ها ..
تعیین Type برای این State Management ها کمک میکنه تا احتمال بروز خطا در اپیکیشن ما تا حد زیادی کاهش پیدا کنه.
تایپ اسکریپت و تست نویسی!
اگه ما تو اپیکیشن ری اکتی خودمون تست نویسی انجام میدیم، نباید فراموش کنیم که برای unit test های خودمون Type تعیین کنیم.
اگه با تست نویسی در ری اکت آشنا نیستید پیشنهاد میکنم مقاله آموزش تست نویسی در ری اکت رو مطالعه کنید.
جمع بندی
ما دیدیم که تایپ اسکریپت در ریکت چطوری استفاده میشه .. همچنین مزایای استفاده از تایپ اسکریپت در ری اکت رو بررسی کردیم و دیدیم چقدر میتونه مفید باشه!
پس حتما از TypeScript در ری اکت استفاده کنید 🙂
تایپ اسکریپت یک زبان برنامه نویسی Open Source ( متن باز ) هست که توسط مایکروسافت بر پایه زبان برنامه نویسی جاوااسکریپت ایجاد شده و ویژگی ها و امکانات خیلی زیادی بهش اضافه شده.
قطعا!
ما میتونیم از typeScript در ریکت استفاده کنیم.
تو فایلهایی که فرمت .tsx داشته باشن، امکان استفاده از تایپ اسکریپت و JSX در کنار یکدیگر رو خواهیم داشت.
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
مثه همیشه عالی بود
سلام پژمان جان
خیلی خوشحالم که برات مفید واقع شده 🙂
موفق باشی
بدون اغراق میگم، بسیار واضح، ساده و قابل فهم توضیح میدید. مچکرم
سلام واقعا خوشحالم که براتون مفید بوده 🙂
موفق باشی 🙂