TypeScript - חלק א': הקדמה וסוגי משתנים

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

 

מה רע ב JavaScript? למה אנחנו צריכים TypeScript?

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

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

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

בנוסף היא מקמפלת את קובץ ה-TypeScript, כך שבמידה ויש בעיה בקוד שנכתב נקבל שגיאות כבר בשלב הקומפילציה וכך ניתקל בפחות בבעיות בסביבת ה- production.

לאחר קימפול נקבל קובץ JavaScript רגיל.

 

 

כלים לכתיבה של TypeScript

Visual Studio 2013 החל מ Update 2 או עם התקנה של תוסף.

Visual Studio 2015 בא עם קומפיילר של TypeScript אוטומטית.

ניתן גם לכתוב באינטרנט באתר של TypeScript בחלק של ה-Playground

 

 

הגדרת סוגי משתנים ב- TypeScript

בדוגמא הבאה נגדיר משתנה בשם x ונאתחל אותו בנתונים:

var x: string;
x = 5;  //Error
x = 'my str';  //OK

בשורה הראשונה הגדרנו את המשתנה x ולאחר שמו רשמנו נקודתיים את סוג המשתנה (string).

כעת ברגע שנגדיר למשתנה x את הערך 5, שהוא מספר, השורה תסומן באדום בעורך התוכן ונקבל שגיאה כאשר נקמפל את הפרוייקט:

Type 'number' is not assignable to type 'string'

 

 

הגדרת סוג פרמטר לפונקציה ב- TypeScript

בדוגמא הבאה נכתוב פונקציה בשם functionString שמקבלת משתנה בשם p והוא צריך להיות מסוג string.

function functionString(p: string) {
    alert(p);
}

functionString('my str');  //OK
functionString(1);  //ERROR

 

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

Argument of type 'number' is not assignable to parameter of type 'string'.

 

 

הגדרת סוג פרמטר מסוג מערך לפונקציה ב- TypeScript

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

function functionArray (arr: string[]) {
    
}

functionArray(['tet', 'sdasa']);  //OK
functionArray([1, 3]);    //ERROR
functionArray('das');    //ERROR

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

Argument of type 'number[]' is not assignable to parameter of type 'string[]'.
  Type 'number' is not assignable to type 'string'.

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

Argument of type 'string' is not assignable to parameter of type 'string[]'.
  Property 'push' is missing in type 'String'.

 

 

 

הגדרת סוג ��רמטר מסוג פונקציה לפונקציה ב- TypeScript

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

function myFunction(func:(string)=>number){
	func("1");
}

function ParseToNumber(str:string){
	return parseInt(str);
}

myFunction(ParseToNumber);

יש לנו בדוגמא 2 פונקציות, ParseToNumber שמקבלת מחרוזת ומתרגמת אותו למספר, ופונקציה נוספת בשם myFunction שתפקידה הוא להריץ את הפונקציה שהיא מקבלת כפרמטר.

לפונקציה myFunction יש פרמטר בשם func, אחריו יש נקודתיים ובסוגריים מוגדר סוג הערך שהוא מקבל (string) ולאחר מכן<= וסוג הערך שהפונקציה מחזירה (number).

 

 

 

תגיות:

הוסף תגובה