כיצד להשתמש ב-TypeScript ביישומי React

JavaScript היא שפת תכנות עם הקלדה חלשה. בגלל זה, זה מאוד מקל, וסביר להניח ששגיאות תכנות לא יבחינו במהלך הפיתוח. TypeScript, ספריית בדיקת סוג JavaScript, פותרת בעיה זו על ידי אכיפת טיפוסים על ערכים. מאמר זה ילמד אותך כיצד ליצור פרויקט React עם TypeScript.

יצירת פרויקט React עם TypeScript

הפקודה create-react-app מאפשרת לך ליצור פרויקטים של Typescript באמצעות --תבנית אוֹפְּצִיָה.

ל ליצור פרויקט React חדש עם TypeScript, הפעל את הפקודה הבאה:

npx לִיצוֹר-אפליקציה-react-app-שֵׁם--כתובת תבנית

פקודה זו יוצרת פרויקט React ו- TypeScript חדש מאפס. אתה יכול גם להוסיף TypeScript ליישום React קיים.

לשם כך, נווט אל הפרויקט שאליו ברצונך להוסיף TypeScript והפעל את הקוד הבא:

npm install --save typescript @סוגים/node @סוגים/react @סוגים/react-dom @סוגים/jest

לאחר מכן החלף את סיומת הקובץ .js ב-.tsx בקבצים שברצונך להמיר ל-TypeScript. ברגע שתעשה זאת, תקבל את ה"React מתייחס ל-UMD גלובלי, אבל הקובץ הנוכחי הוא מודול." שְׁגִיאָה. אתה יכול לפתור את זה על ידי ייבוא ​​React בכל קובץ כתב כתיבה בצורה הבאה:

יְבוּא לְהָגִיב מ "לְהָגִיב"

כפתרון פשוט יותר, צור tsconfig.json והגדר את jsx ל-react-jsx.

{
"מהדר אפשרויות": {
"jsx": "react-jsx",
"יַעַד": "es6",
"מודול": "esnext",
 },
}

אתה יכול למצוא את כל הגדרות התצורה מה- מסמכי TypeScript.

יצירת רכיב פונקציית React ב-TypeScript

אתה מגדיר רכיב פונקציית React באותו אופן כמו פונקציית JavaScript.

להלן דוגמה לרכיב פונקציה בשם Greetings.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהברכות() {
לַחֲזוֹר (
<div>שלום עולם</div>
 )
}

רכיב זה מחזיר מחרוזת "Hello world", ו-TypeScript מסיק את סוג ההחזר שלו. עם זאת, אתה יכול לציין את סוג ההחזרה שלו:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהברכות(): JSX.אֵלֵמֶנט{
לַחֲזוֹר (
<div>שלום עולם</div>
 )
}

TypeScript יזרוק שגיאה אם ​​רכיב Greetings יחזיר ערך שאינו JSX.element.

שימוש ב-React Props עם TypeScript

React מאפשרת לך ליצור רכיבים לשימוש חוזר באמצעות אביזרים. לדוגמה, רכיב Greetings יכול לקבל אבזר שם כך שערך ההחזרה מותאם אישית על בסיסו.

להלן הרכיב הערוך עם שם כאביזר. שימו לב להצהרת הסוג המוטבע.

פוּנקצִיָהברכות({name}: {name: string}) {
לַחֲזוֹר (
<div>שלום {name}</div>
 )
}

אם תעביר את השם "ג'יין", הרכיב יחזיר את ההודעה "שלום ג'יין".

במקום לכתוב את הצהרת הסוג בפונקציה, אתה יכול להגדיר אותה בצורה חיצונית כך:

סוּג דרישת שלום = {
 שם: מחרוזת;
};

לאחר מכן העבירו את הסוג המוגדר לרכיב באופן הבא:

פוּנקצִיָהברכות({name}: GreetingsProps) {
לַחֲזוֹר (
<div>שלום {name}</div>
 )
}

השתמש במילת המפתח של הממשק אם אתה מייצא סוג זה וברצונך להרחיב אותו:

יְצוּא מִמְשָׁקברכות אביזרי{
 שם: מחרוזת;
};

שימו לב להבדל התחביר בין סוג לממשק - לממשק אין סימן שוויון.

אתה יכול להרחיב ממשק באמצעות הקוד הבא:

יְבוּא { GreetingsProps } מ './ברכות'
מִמְשָׁקWelcomePropsמשתרעברכות אביזרי{
 זְמַן: "חוּט"
}

לאחר מכן תוכל להשתמש בממשק המורחב ברכיב אחר.

פוּנקצִיָהברוך הבא({name, time}: WelcomeProps) {
לַחֲזוֹר (
<div>
 טוב {זמן}, {שם}!
</div>
 )
}

להשתמש ב "?" סמל עם ממשק האביזרים שלך כדי להגדיר אביזרים אופציונליים. הנה דוגמה לממשק עם אבזר שם אופציונלי.

מִמְשָׁקברכות אביזרי{
 שם?: מחרוזת;
};

אם לא תעבירו אבזר שם, TypeScript לא יזרוק שום שגיאה.

שימוש ב-React State עם TypeScript

ב-JavaScript פשוט, אתה מגדיר הוק של useState(). כדלהלן:

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

בדוגמה זו, TypeScript יכול בקלות להסיק את סוג ה-firstName כמחרוזת מכיוון שערך ברירת המחדל הוא מחרוזת.

עם זאת, לפעמים לא ניתן לאתחל את המצב לערך מוגדר. במקרים אלה, עליך לתת סוג ערך מצב.

להלן כמה דוגמאות כיצד להגדיר טיפוסים בהוק useState().

const [CustomerName, setCustomerName] = useState<חוּט>("");
const [age, setAge] = useState<מספר>(0);
const [isSubscribed, setIsSubscribed] = useState<בוליאני>(שֶׁקֶר);

אתה יכול גם להשתמש בממשק ב-hook useState(). לדוגמה, אתה יכול לשכתב את הדוגמה לעיל כדי להשתמש בממשק שמוצג להלן.

מִמְשָׁקבלקוח{
 customerName: string ;
 גיל: מספר ;
 הוא מנוי: בוליאני ;
}

השתמש בממשק המותאם אישית ב-hook כך:

const [לקוח, setCustomer] = useState<בלקוח>({
 שם לקוח: "ג'יין",
 גיל: 10,
 הוא מנוי: שֶׁקֶר
 });

שימוש באירועים עם TypeScript

אירועים חיוניים מכיוון שהם מאפשרים למשתמשים ליצור אינטראקציה עם דף אינטרנט. ב-TypeScript, אתה יכול להקליד אירועים או מטפלי אירועים.

כדי להדגים, שקול את רכיב ההתחברות הבא באמצעות אירועי onClick() ו-onChange().

יְבוּא { useState } מ 'לְהָגִיב';
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָההתחברות() {
 const [email, setEmail] = useState('');
const handleChange = (אירוע) => {
setEmail(מִקרֶה.יַעַד.ערך);
 };
const handleClick = (אירוע) => {
 console.log('נשלח!');
 };
לַחֲזוֹר (
<div>
<סוג קלט="אימייל" value={email} onChange={handleChange} />
<כפתור onClick={() => handleClick}>שלח</button>
</div>
 );
}

כך הייתם מטפלים באירועים ב-JavaScript רגיל. עם זאת, TypeScript מצפה ממך להגדיר את סוג פרמטר האירוע בפונקציות המטפל באירועים. למרבה המזל, React מספקת מספר סוגי אירועים.

לדוגמה, השתמש בסוג changeEvent עבור המטפל באירוע handleChange().

יְבוּא { ChangeEvent, useState } מ 'לְהָגִיב';
const handleChange = (אירוע: ChangeEvent<HTMLInputElement>) => {
setEmail(מִקרֶה.יַעַד.ערך);
};

סוג changeEvent משמש לשינוי הערכים של רכיבי קלט, בחירה וטקסט. זהו סוג גנרי כלומר עליך לעבור באלמנט DOM שערכו משתנה. בדוגמה זו, העברת את רכיב הקלט.

הדוגמה שלמעלה מדגימה כיצד להקליד את האירוע. הקוד שלהלן מראה כיצד תוכל להקליד את המטפל באירועים במקום זאת.

יְבוּא { ChangeEventHandler, useState } מ 'לְהָגִיב';
const handleChange: ChangeEventHandler<HTMLInputElement> = (אירוע) => {
setEmail(מִקרֶה.יַעַד.ערך);
};

עבור אירוע handleClick() השתמש ב-MouseEvent().

יְבוּא { useState, MouseEvent } מ 'לְהָגִיב';
const handleClick = (אירוע: MouseEvent) => {
 console.log('נשלח!');
};

שוב, אתה יכול לצרף את הסוג למטפל האירוע עצמו.

יְבוּא { useState, MouseEventHandler } מ 'לְהָגִיב';
const handleClick: MouseEventHandler = (אירוע) => {
 console.log('נשלח!');
 };

לסוגי אירועים אחרים, בדוק את גיליון הונאה של React TypeScript.

אם אתה יוצר טפסים גדולים, עדיף לעשות זאת השתמש בספריית טפסים כמו פורמיק, כפי שהוא בנוי עם TypeScript.

מדוע כדאי להשתמש ב-TypeScript?

אתה יכול להורות לפרויקט React חדש להשתמש ב-TypeScript או להמיר פרויקט קיים. אתה יכול גם להשתמש ב-TypeScript עם רכיבי פונקציות React, מצב ואירועי React.

הקלדת רכיבים של React יכולה לפעמים להרגיש כמו כתיבת קוד מיותר. עם זאת, ככל שתשתמש בו יותר, כך תעריך יותר את יכולתו לתפוס שגיאות לפני שתפרוס את הקוד שלך.