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

החזרות פונקציות וסוגי אביזרים פשוטים

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

TypeScript 5.1 הציג תכונה חדשה המאפשרת לפונקציות המחזירות undefined להשמיט לחלוטין את הצהרת return. שיפור זה משפר את קריאת הקוד ותמציתיות.

פוּנקצִיָהlogMessage(הוֹדָעָה: חוּט): לא מוגדר{
לְנַחֵם.log (הודעה);
// אין צורך בהצהרת החזרה כאן
}

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

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

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

מעמד משתמש {
פְּרָטִי _שֵׁם: חוּט | ריק = ריק;
מַעֲרֶכֶת שם (שם חדש: חוּט) {
זֶה._name = newName;
 }
לקבל שֵׁם(): חוּט {
לַחֲזוֹרזֶה._שֵׁם?? 'לא ידוע';
 }
}

בדוגמה זו, למחלקה User יש פרטי _שֵׁם נכס שיכול להיות או א חוּט אוֹ ריק. ה שֵׁם מגדיר לוקח מחרוזת שם חדש ומקצה אותו ל _שֵׁם. השם getter מחזיר את הערך של _שֵׁם אם זה לא ריק, או לא ידוע אם זה.

זה מאפשר לך לאכוף שאפשר להגדיר את מאפיין השם רק עם מחרוזת, אבל כשמקבלים את מאפיין השם, זה יכול להיות מחרוזת או לא ידוע אם זה עדיין לא הוגדר.

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

מִמְשָׁק CSSStyleRule {
// תמיד נקרא בתור `CSSStyleDeclaration`
לקבל style(): CSSStyleDeclaration;
// יכול לכתוב כאן רק `מחרוזת`.
מַעֲרֶכֶת סגנון (newValue: חוּט);
}

בדוגמה למעלה, למאפיין style יש getter שמחזיר CSSStyleDeclaration ו-seter שמקבל מחרוזת. סוגים אלה אינם קשורים, אך TypeScript 5.1 מאפשר סוג זה של הגדרת סוג.

שיפורים ב-JSX

TypeScript 5.1 מציג מספר שיפורים עבור JSX. כעת הוא מאפשר בדיקת סוגים מנותקת בין רכיבי JSX וסוגי תג JSX, שיכולים להיות שימושי עבור ספריות כמו redux המאפשרים לרכיבים להחזיר יותר מסתם רכיבי JSX.

יְבוּא * כפי ש לְהָגִיב מ"לְהָגִיב";
אסינכרוןפוּנקצִיָהAsyncComponent() {
לַחֲזוֹר
טעון</div>;
}
// זה מותר כעת:
לתת אלמנט = ;

בדוגמה זו, ה AsyncComponent function היא פונקציה אסינכרונית המחזירה אלמנט JSX. TypeScript 5.1 מאפשר לך להשתמש בפונקציה מסוג זה כרכיב JSX, מה שלא היה אפשרי בגרסאות קודמות.

TypeScript 5.1 מציג גם תמיכה ב-JSX Transform החדש שהוצג ב-React 17. זה מאפשר לך להשתמש ב-JSX מבלי לייבא את React.

// לפני
יְבוּא לְהָגִיב מ"לְהָגִיב";
פוּנקצִיָהרְכִיב() {
לַחֲזוֹר
שלום, עולם!</h1>;
}
// לאחר
פוּנקצִיָהרְכִיב() {
לַחֲזוֹר
שלום, עולם!</h1>;
}

בדוגמה למעלה, הפונקציה Component מחזירה אלמנט JSX. ב-TypeScript 5.1 וב-React 17, אינך צריך עוד לייבא את React כדי להשתמש ב-JSX.

שיפורי ביצועים ושינויים משמעותיים ב-TypeScript 5.1

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

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

סוּג איחוד = 'א' | 'ב' | 'ג';
פוּנקצִיָהחשבון(ערך: איחוד) {
// ...
}

בדוגמה זו, TypeScript 5.1 יכול לבדוק במהירות אם ערך הוא חלק מסוג Union מבלי לבדוק מול כל סוג באיחוד.

הנה דוגמה נוספת:

סוּג נקודה = { x: מספר, y: מספר };
פוּנקצִיָהלתרגם(נקודה: נקודה, dx: מספר, די: מספר): נְקוּדָה{
לַחֲזוֹר { x: point.x + dx, y: point.y + dy };
}
לתת p: נקודה = { x: 1, y: 2 };
p = תרגם (p, 1, 1);

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

חובקת TypeScript 5.1

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

על ידי אימוץ TypeScript 5.1, אתה יכול לפתוח אפשרויות חדשות ולהעלות את פרויקטי JavaScript שלך לשיאים חדשים של יעילות וחדשנות. תן ל-TypeScript 5.1 להיות השער שלך לחוויית פיתוח מתקדמת ויעיל יותר של JavaScript.