יצירת פרויקט ב-TypeScript
typescriptlang.org אפשר לכתוב בצד שמאל, לראות את ה-JavaScript שנוצר בצד ימין ולהריץ. אפשר לנקות את הקונסול ולשמור כקישור. מתאים לדוגמאות קטנות, לא לפרויקט עם כמה קבצים.npm i -g typescript מתבצע פעם אחת. אין צורך בה לעבודה עם React או Angular, אלא רק לפרויקט TypeScript עצמאי.index.html.tsconfig.json בתיקיית השורש. תחת compilerOptions קובעים target לגרסת JavaScript, בדוגמה ECMAScript 5, ו-outDir לתיקיית הפלט, בדוגמה js.ts עם קובץ main.ts, ובו משתנה מסוג number והדפסה עם document.write.tsc בטרמינל. נוצרת תיקיית js עם main.js. הקוד שנוצר משתמש ב-var ולא ב-let, כי היעד הוא ECMAScript 5, ואין בו טיפוסים.script שמצביע על js/main.js, ולא על קובץ ה-TypeScript.tsc -w (watch) מקמפל אחרי כל שינוי. בלי זה צריך להריץ tsc מחדש.פרקי ההרצאה: יצירת פרויקט ב-TypeScript
תמלול ההרצאה: יצירת פרויקט ב-TypeScript
הטקסט המלא של הדקות הראשונות בהרצאה «יצירת פרויקט ב-TypeScript» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אנחנו רוצים להתחיל לעבוד עם שפת טייפסקריפט והשאלה היא איפה אנחנו מתכנתים? אז קודם כל יש לנו את האתר טייפסקריפט לאנג בואו ניכנס אליו טייפסקריפט לאנג דוט אורג והאתר הזה זה האתר הרשמי של טייפסקריפט יש לנו כאן פלייגראונד אנחנו יכולים להיכנס אליו וזה בעצם מגרש משחקים כזה שהוא אומר לנו תשמעו אתם יכולים לכתוב פה איזה קוד שאתם
רוצים בחלק השמאלי ואנחנו נראה לכם את הג'אווה סקריפט שהולך להיווצר מהקוד הזה בחלק הימני אז אנחנו יכולים רגע להיפטר מהקוד הזה ואנחנו יכולים לכתוב פה לדוגמה בוא תייצר לי אייג' והסוג שלו זה number אנחנו בסרטון הבא נראה סוגים שונים שקיימים תכניס לי לתוך אייג'
קונסול לוג תדפיס לי את ה-age בצורה כזאת ואני רואה שזה הקוד של הטייפ סקריפט וזה מה שהקומפיילר של ג'אווה סקריפט יוצר או הטרנספיילר יוצר, זאת הג'אווה סקריפט המקורית שיצא. אם אנחנו לוחצים על run אז אנחנו רואים שהוא מריץ לנו וזה הקונסול, אנחנו רואים פה את הקונסול, אנחנו יכולים ללחוץ מקש ימני ו-clear logs
ואז הוא מנקה לנו את הקונסול ואם אנחנו רוצים אנחנו יכולים גם לשמור את הדף הזה על ידי זה שאנחנו גוררים פה את המנעול והקוד עצמו מגולם כבר בלינק פה הוא דאט כזה אז אם אנחנו סוגרים ומריצים את זה מחדש אז יש לנו את אותו הקוד ששמרנו בפעם האחרונה אנחנו רואים שהוא שומר עליו אבל אנחנו לא הולכים לעבוד עם האתר הזה מפני שאם אנחנו רוצים המון קוד
אז כל הקוד הזה יהיה פה בקובץ אחד ויכול להיות שאנחנו נרצה לחלק את הקוד שלנו למספר קבצים, לדוגמא אם אנחנו עובדים עם Object Oriented. אז בואו רגע ניפטר מזה ואנחנו רוצים לעבוד עם Visual Studio.
Visual Studio Code ליתר דיוק שהיא האדיטור הפופולרי היום לעבודה עבור דברים של Front End. דבר ראשון מה שאנחנו רוצים לעשות זה להתקין את TypeScript אצלנו במחשב רק בכדי לעבוד איתו וזה מתבצע על ידי התקנת NPM.
I-G זאת התקנה גלובלית שאנחנו עושים פעם אחת. טייפ סקריפט את ההתקנה הזאת אתם לא צריכים בשביל עבודה עם ריאקט או עבודה עם אנגולר או כל דבר אחר אז אם אתם רוצים רק לעבוד עם ריאקט או אנגולר או כל סביבה אחרת אתם לא צריכים בעצם להתקין את זה את זה אני מתקין רק אם אני רוצה שיהיה לי את הקומפיילר של טייפ סקריפט עבור פרויקט טייפ סקריפט בלבד
לא פרויקט ריאקט לא פרויקט אנגולר או לא פרויקטים אחרים. אז אני מתקין את זה פעם אחת בעזרת שרתי npm Node Package Manager ואני רואה שהוא סיים אפשר מפה לצאת ובואו נפתח את Visual Studio Code אתם יכולים לפתוח כל אדיטור אחר שאתם רוצים ב-Visual Studio Code בואו נפתח לעצמנו פרויקט חדש אז אני כרגע
אבצע את זה פה בדסטופ Open Folder בואו ניגש לדסטופ בדסטופ אני אפתח טייפ סקריפט אולי אני לא אעשה את זה על הדסטופ, בואו נעשה את זה ב-conanC, נראה לי יותר הגיוני, טייפסקריפט, ואני נכנס אליו, ואני פותח תיקייה חדשה, My first project ever, Select Folder, והנה יש לי
תיקייה עבור טייפסקריפט. אנחנו רוצים לכתוב טייפסקריפט, הקומפיילר של טייפסקריפט יהפוך את הקוד שלנו ל-JavaScript, אבל JavaScript רצה או בפרונט או בבאק, אנחנו רוצים כרגע שJavaScript תרוץ בפרונט, לא בבאק, למרות שגם בבאק-אנד אפשר לעשות את זה בעזרת Node.js.
אז אם אני רוצה שמשהו ירוץ בפרונט, הגיוני שיהיה לי איזשהו קובץ HTML לדוגמה, נקרא לו Index.HTML שיריץ לנו את ה-JavaScript שהולכת להיווצר לנו.
בואו נייצר קובץ, סימן קריאה, יוצר לי את כל מה שאני צריך פה מבחינת HTML. וזה הדבר הראשון שאני צריך. הדבר השני שאני צריך בשביל להריץ פרויקט טייפ סקריפט בפרונט זה קובץ עבור הקומפיילר של טייפ סקריפט.
הקובץ הזה חייב להיות ברוט דירקטורי והוא נקרא tsconfig.json זה השם שלו והוא חייב להיות בשם הזה. אנחנו מייצרים בתוכו בייק ג'ייסון ובתוכו אנחנו צריכים לייצר compiler options האופציה הזאת ובתוך הקומפיילר אופשיינס אנחנו יכולים המון המון הגדרות עבור הקומפיילר.
המינימום שאנחנו צריכים זה target, כלומר לאיזו גרסת JavaScript אנחנו רוצים שהטייפ סקריפט שלנו יתורגם על ידי הקומפיילר. נכון להיום מקובל להמיר ל-X-Mascript 5, אפשר גם ל-X-Mascript 6 אבל יותר מקובל היום ל-X-Mascript 5, בעתיד בוודאות זה יעלה ל-X-Mascript 6, וכדומה ואנחנו רוצים עוד הגדרה אחת שנקראת outdir כלומר לאיזו
תיקייה אנחנו רוצים לייצר באיזו תיקייה אנחנו רוצים לייצר את קבצי הJavaScript מקבצי הטייפסקריפט שלנו אז בואו נייצר תיקייה שאני פשוט נקרא לה JS זהו סיימנו לבנות את הטייפסקריפט קומפיילר הזה בואו נסגור את זה ונסגור את זה ואני בונה כאן תיקייה שנקראת TS ובתוכה יהיה לי את כל קבצי הטייפסקריפט שלי אפשר כמובן
לשים אותם בכל תיקי אחרת אפשר לשים אותם גם ברירות דירקטורי והנה אני מייצר קובץ אחד בואו נקרא לו מיין TS ובתוכו את אותו הקוד שהיה לי מקודם בואו ניקח let age סוג שלו זה number age שווה 20 וconsole log האמת בואו נריץ את זה הפעם in document נקודה right ואז הוא יציג לי את זה על הדף בצורה כזאת והנה סיימנו
לבנות את הטייפ סקריפט שלנו אנחנו הולכים להריץ את הh ה-HTML צריכה להכיר את ה-JavaScript, לא את ה-TypeScript, אבל מי הולך לייצר לנו את ה-JavaScript?
הקומפיילר. בואו נלך ל-Vue ונגיע לטרמינל, ובטרמינל אנחנו רוצים להדליק את הקומפיילר. אם אני כותב TSC, פשוט מאוד, זה בעצם הפעלה של TypeScript Compiler שמכל קובץ TypeScript ייצר קובץ JavaScript.
זה הדבר היחיד שהוא יעשה אבל הוא יעשה את זה פעם אחת אם אני אריץ את זה אני יכול לראות שהוא עובד ושימו לב נוצרה לי תיקיית js ובתוכה מיין js למה דווקא תיקיית js כי זה מה שהגדרנו פה באאוטפוט דירקטורי ואנחנו מסתכלים ואנחנו רואים שזה הקוד של הג'אווה סקריפט שנוצר
לי רגע למה אני השתמשתי בלט והוא יצר לי var כי אמרנו לו אנחנו רוצים גרסת אקמה סקריפט 5 רק ברקמסקריפט 6 נוצר let ו-const וגרסת רקמסקריפט 5 עדיין יש var.
אז זה הג'אווה סקריפט שנוצר לנו, שימו לב שאין פה טיפוסי נתונים כמו number כמו שהיה לנו בטייפ סקריפט כי זה ג'אווה סקריפט.