זרימה לעומת TypeScript: איזה בודק סטטי טוב יותר?

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

גלה כיצד Flow ו-TypeScript משתווים ומהו הבודק הסטטי הטוב ביותר עבור הפרויקט הבא שלך.

מה זה זרימה?

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

מה זה TypeScript?

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

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

הגדרת זרימה עבור אפליקציית JavaScript שלך

אתה יכול לשלב את Flow בכל מסגרת JavaScript שתחליט להשתמש בפרויקט שלך. תצטרך להגדיר מהדר JavaScript כמו Babel כדי לטפל בכל סוגי הזרימה בקוד שלך ולהדר אותו לתוך וניל JavaScript.

כדי להתקין את Flow בפרויקט שלך, הפעל את הפקודה הבאה:

להוסיף חוט dev flow-bin

לאחר מכן, עליך להתקין את ממשק שורת הפקודה Flow באופן גלובלי. CLI זה מספק מספר פקודות לבניית יישומי זרימה.

ב-macOS, השתמש בירה ביתית כדי להתקין Flow CLI:

לְהִתְבַּשֵׁל להתקין flow-cli

תצטרך לדעת כיצד להשתמש ב- Windows PowerShell כדי להתקין את Flow במחשב Windows.

כדי להתקין Flow CLI ב-Windows, הפעל את הסקריפט הזה במסוף PowerShell שלך:

iex "& { $(irm '<https://storage.googleapis.com/flow-cli/install.ps1>') }"

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

הפעל פקודה זו כדי ליצור קובץ תצורה של Flow בפרויקט חדש או קיים:

npm run flow init

שים לב שמסגרות ספציפיות עשויות לשלוח פרויקטים עם קובץ תצורה של Flow כברירת מחדל.

הדבר האחרון לעשות הוא להוסיף את סקריפט ה-Flow שלך package.json קוֹבֶץ:

"תסריטים": {
"זְרִימָה": "זְרִימָה"
},

כעת הגדרת בהצלחה את Flow להפעלה ביישום JavaScript שלך.

הגדרת TypeScript בפרויקט שלך

הפעל את הפקודה הבאה כדי להתקין את TypeScript בפרויקט שלך:

npm להתקין כתב דפוס --save-dev

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

התקן את מהדר TypeScript באופן גלובלי עם הפקודה הזו:

npm להתקין -g כתב דפוס

כדי לאתחל א tsconfig.json קובץ config, הזן את הפקודה הבאה בטרמינל שלך:

tsc --init

ההוראות לעיל יעזרו לך להתחיל להשתמש ב- TypeScript בפרויקט שלך.

בנייה עם זרימה

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

// @flow

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

לדוגמה:

// @flow
let foo: מספר = "שלום";

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

לָרוּץ זרימת ריצה npm כדי לראות את פלט השגיאה במסוף:

הפעלת התוסף Flow בתוך כל עורך טקסט לבחירה תציג את השגיאות בעורך שלך תוך כדי קוד.

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

לדוגמה:

// @flow
פוּנקצִיָהעשה משהו(ערך) {
 ערך החזרה * "שלום";
};
לתת תוצאה = doSomething(6);

לא ניתן לבצע פעולות אריתמטיות בין המספר שש למחרוזת שלום.

הפלט של זרימת ריצה npm תהיה שגיאה:

פיתוח עם TypeScript

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

TypeScript נשלח עם מספר תכונות אחרות הדומות ל-Flow, כמו הסקת סוג.

קח את קוד TypeScript לדוגמה:

// Typescript.ts
הקלד תוצאה = "לַעֲבוֹר" | "לְהִכָּשֵׁל"
פוּנקצִיָהתאשר(תוצאה: תוצאה) {
 אם (תוצאה "לַעֲבוֹר") {
 console.log("עבר")
 } אַחֵר {
 console.log("נִכשָׁל")
 }
}

אתה יכול לרוץ tsc Typescript.ts לקמפל את הקוד הזה ל-JavaScript רגיל וניל.

זה יהיה אותו קוד TypeScript שקומפילד לתוך וניל JavaScript:

פוּנקצִיָהתאשר(תוֹצָאָה) {
 אם (תוצאה "לַעֲבוֹר") {
 console.log("עבר")
 } אַחֵר {
 console.log("נִכשָׁל")
 }
}

יתרונות וחסרונות של TypeScript ו-Flow

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

שילוב

תהליך ההגדרה לשימוש ב-Flow הוא קצת יותר מורכב בניגוד ל-TypeScript. תצטרך להגדיר מהדר JavaScript כמו Babel או flow-remove-types כדי להסיר סוגי זרימה מהקוד שלך. TypeScript כולל מהדר להמרת קוד TypeScript ל-JavaScript, מה שמקל על האינטגרציה.

ל-TypeScript יש כלי עבודה הרבה יותר טובים ורוב מסגרות JavaScript תומכות בו כברירת מחדל. רוב ה-IDEs הפופולריים מספקים תמיכה מהשורה הראשונה עבור TypeScript. Flow נתמך גם הוא אך דורש תוסף מיוחד.

קהילה

בניגוד ל-Flow, מסגרות JavaScript כמו React, React Native, Vue ו-Angular תומכות ב-TypeScript מחוץ לקופסה.

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

גְמִישׁוּת

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

שירותים

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

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

באיזה בודק סטטי כדאי להשתמש?

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

עליך לבחון את דרישות הפרויקט שלך ולקבל החלטה מושכלת על סמךהן.