خبر و ترفند روز

خبر و ترفند های روز را اینجا بخوانید!

نحوه استفاده از TypeScript در برنامه های React

ارشیا یوسفی ادیب ۲۸ مهر, ۱۴۰۱ 4 min read

TypeScript به شما کمک می کند تا کد قوی تری نسبت به جاوا اسکریپت ساده بنویسید، بنابراین حتماً از آن با برنامه های React خود استفاده کنید.

جاوا اسکریپت یک زبان برنامه نویسی با تایپ ضعیف است. به همین دلیل، بسیار ملایم است و احتمالاً خطاهای برنامه نویسی در طول توسعه مورد توجه قرار نمی گیرند. TypeScript، یک کتابخانه بررسی نوع جاوا اسکریپت، این مشکل را با اعمال انواع بر روی مقادیر حل می کند. این مقاله به شما یاد می دهد که چگونه یک پروژه React با TypeScript ایجاد کنید.

ایجاد یک پروژه React با TypeScript

دستور create-react-app به شما اجازه می دهد تا با استفاده از گزینه –template پروژه های Typescript ایجاد کنید.

برای ایجاد یک پروژه React جدید با TypeScript، دستور زیر را اجرا کنید:

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

این دستور یک پروژه React و TypeScript جدید از ابتدا ایجاد می کند. همچنین می توانید TypeScript را به یک برنامه React موجود اضافه کنید.

برای انجام این کار، به پروژه ای که می خواهید TypeScript را به آن اضافه کنید بروید و کد زیر را اجرا کنید:

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

سپس پسوند فایل .js را با .tsx برای فایل هایی که می خواهید به TypeScript تبدیل کنید تعویض کنید. پس از انجام این کار، “React به یک UMD جهانی اشاره دارد، اما فایل فعلی یک ماژول است” دریافت خواهید کرد. خطا می توانید با وارد کردن React در هر فایل تایپ اسکریپت مانند این مشکل را حل کنید:

import React from "react"

به عنوان یک راه حل ساده تر، یک tsconfig.json ایجاد کنید و jsx را روی react-jsx قرار دهید.

{
"compilerOptions": {
"jsx": "react-jsx",
"target": "es6",
"module": "esnext",
},
}

می توانید تمام تنظیمات پیکربندی را از اسناد TypeScript پیدا کنید.

ایجاد یک React Function Component در TypeScript

شما یک کامپوننت تابع React را مانند یک تابع جاوا اسکریپت تعریف می کنید.

در زیر نمونه ای از یک تابع به نام Greetings آورده شده است.

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

export default function Greetings() {
return (
<div>Hello world</div>
)
}

این مؤلفه یک رشته «Hello world» را برمی‌گرداند و TypeScript نوع بازگشت آن را استنباط می‌کند. با این حال، می توانید نوع بازگشت آن را حاشیه نویسی کنید:

export default function Greetings(): JSX.Element {
return (
<div>Hello world</div>
)
}

اگر کامپوننت Greetings مقداری را برگرداند که یک عنصر JSX. نیست، TypeScript یک خطا ایجاد می کند.

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

React به شما اجازه می دهد تا از طریق props اجزای قابل استفاده مجدد ایجاد کنید. به عنوان مثال، مولفه Greetings می تواند یک نام را دریافت کند به طوری که مقدار بازگشتی بر اساس آن سفارشی شود.

در زیر کامپوننت ویرایش شده با نامی به عنوان پایه است. به اعلان نوع درون خطی توجه کنید.

function Greetings({name}: {name: string}) {
return (
<div>Hello {name}</div>
)
}

اگر نام “جین” را وارد کنید، کامپوننت پیام “Hello Jane” را برمی‌گرداند.

به جای نوشتن اعلان نوع در تابع، می توانید آن را به صورت خارجی تعریف کنید:

type GreetingsProps = {
name: string;
};

سپس نوع تعریف شده را به صورت زیر به کامپوننت ارسال کنید:

function Greetings({name}: GreetingsProps) {
return (
<div>Hello {name}</div>
)
}

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

export interface GreetingsProps {
name: string;
};

به تفاوت نحوی بین نوع و رابط توجه کنید – رابط علامت مساوی ندارد.

با استفاده از کد زیر می توانید یک رابط را گسترش دهید:

import { GreetingsProps } from &apos./Greetings&apos
interface WelcomeProps extends GreetingsProps {
time: "string"
}

سپس می توانید از رابط توسعه یافته در کامپوننت دیگری استفاده کنید.

function Welcome({name, time}: WelcomeProps) {
return (
<div>
Good {time}, {name}!
</div>
)
}

از “؟” استفاده کنید نماد با رابط props خود را برای تعریف غرفه اختیاری. در اینجا نمونه ای از یک رابط با نام اختیاری است.

مطلب مرتبط:   5 زبان توسعه بازی موبایل که امروز باید یاد بگیرید

interface GreetingsProps {
name?: string;
};

اگر نامی را ارسال نکنید، TypeScript هیچ خطایی ایجاد نخواهد کرد.

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

در جاوا اسکریپت ساده، قلاب useState() را به صورت زیر تعریف می کنید:

const [customerName, setCustomerName] = useState("");

در این مثال، TypeScript می تواند به راحتی نوع firstName را به عنوان یک رشته استنتاج کند، زیرا مقدار پیش فرض یک رشته است.

با این حال، گاهی اوقات نمی توانید حالت را به مقدار تعریف شده مقداردهی اولیه کنید. در این موارد، باید یک نوع مقدار state بدهید.

در اینجا چند نمونه از نحوه تعریف انواع در قلاب useState() آورده شده است.

const [customerName, setCustomerName] = useState<string>("");
const [age, setAge] = useState<number>(0);
const [isSubscribed, setIsSubscribed] = useState<boolean>(false);

همچنین می توانید از یک رابط در قلاب useState() استفاده کنید. به عنوان مثال، می توانید مثال بالا را برای استفاده از یک رابط نشان داده شده در زیر بازنویسی کنید.

interface ICustomer {
customerName: string ;
age: number ;
isSubscribed: boolean ;
}

از رابط سفارشی در هوک به این صورت استفاده کنید:

const [customer, setCustomer] = useState<ICustomer>({
customerName: "Jane",
age: 10,
isSubscribed: false
});

استفاده از رویدادها با TypeScript

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

برای نشان دادن، مولفه Login زیر را با استفاده از رویدادهای onClick() و onChange() در نظر بگیرید.

import { useState } from &aposreact&apos;
export default function Login() {
const [email, setEmail] = useState(&apos&apos);

const handleChange = (event) => {
setEmail(event.target.value);
};

const handleClick = (event) => {
console.log(&aposSubmitted!&apos);
};

return (
<div>
<input type="email" value={email} onChange={handleChange} />
<button onClick={() => handleClick}>Submit</button>
</div>
);
}

این روشی است که می توانید رویدادها را در جاوا اسکریپت ساده مدیریت کنید. با این حال، TypeScript از شما انتظار دارد که نوع پارامتر رویداد را در توابع کنترل کننده رویداد تعریف کنید. خوشبختانه، React چندین نوع رویداد را ارائه می دهد.

برای مثال، از نوع changeEvent برای کنترل کننده رویداد handleChange() استفاده کنید.

import { ChangeEvent, useState } from &aposreact&apos;
const handleChange = (event:ChangeEvent<HTMLInputElement>) => {
setEmail(event.target.value);
};

نوع changeEvent برای تغییر مقادیر عناصر ورودی، انتخاب و ناحیه متنی استفاده می شود. این یک نوع عمومی است به این معنی که باید در عنصر DOM که مقدار آن تغییر می کند عبور دهید. در این مثال، عنصر ورودی را پاس کردید.

مثال بالا نحوه تایپ رویداد را نشان می دهد. کد زیر نشان می دهد که چگونه می توانید کنترل کننده رویداد را به جای آن تایپ کنید.

import { ChangeEventHandler, useState } from &aposreact&apos;

const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {
setEmail(event.target.value);
};

برای رویداد handleClick() از MouseEvent() استفاده کنید.

import { useState, MouseEvent } from &aposreact&apos;
const handleClick = (event: MouseEvent) => {
console.log(&aposSubmitted!&apos);
};

باز هم می توانید نوع را به خود کنترل کننده رویداد متصل کنید.

import { useState, MouseEventHandler } from &aposreact&apos;
const handleClick: MouseEventHandler = (event) => {
console.log(&aposSubmitted!&apos);
};

برای سایر انواع رویداد، برگه تقلب React TypeScript را بررسی کنید.

اگر در حال ایجاد فرم های بزرگ هستید، بهتر است از یک کتابخانه فرم مانند Formik استفاده کنید، زیرا با TypeScript ساخته شده است.

چرا باید از TypeScript استفاده کرد؟

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

نوشتن کامپوننت‌های React گاهی اوقات می‌تواند شبیه نوشتن کدهای غیر ضروری دیگ بخار باشد. با این حال، هرچه بیشتر از آن استفاده کنید، بیشتر از توانایی آن در تشخیص خطاها قبل از استقرار کد خود قدردانی خواهید کرد.

Tags: