Angular 2 - Typescript

Angular 2 - Typescript

• 1.
  Typescript [email protected] 1
• 2.
  ? Typescript ‫זה‬‫מה‬ .‫מלמעלה‬ ‫במבט‬ Typescript ‫את‬ ‫הצגתי‬ ‫ההקדמה‬ ‫בפרק‬ ‫לכתוב‬ ‫לנו‬ ‫שיאפשר‬ ‫טוב‬ ‫בסיס‬ ‫לקבל‬ ‫מנת‬ ‫על‬ Typescript ‫לתוך‬ ‫פנימה‬ ‫ניכנס‬ ‫הזה‬ ‫בפרק‬ Typescript ‫היא‬ ‫התכנות‬ ‫שפת‬ ‫בה‬ Angular 2 ‫אפליקציות‬ [email protected] 2
• 3.
  ‫משתנים‬ ‫הגדרת‬ ‫יותר‬ ‫בגרסאות‬‫הגיע‬ let ‫כי‬ ‫אם‬ javascript ‫מ‬ ‫חלק‬ ‫)שניהם‬ var ‫בעזרת‬ ‫משתנים‬ ‫להגדיר‬ ‫אפשר‬ : (‫מאוחרות‬ var num1 , num2=22 , msg = ‘hello world’ ; : let ‫או‬ let num3 = 33; ‫הבא‬ ‫שקף‬ ‫ראה‬ - let ‫עדיף‬ ‫אבל‬ [email protected] 3
• 4.
  var ‫לעומת‬ let‫ל‬ ‫דוגמה‬ F_var(){ for(var i=0; i< 4 ; i++){ console.log(i); } console.log("outside loop :" + i); } F_let(){ for(let i=0; i< 4 ; i++){ console.log(i); } console.log("outside loop :" + i); } constructor(){ this.F_var(); this.F_let(); } [email protected] 4 ‫כי‬ ‫קומפילציה‬ ‫שגיאת‬ ‫תתקבל‬ scope ‫ל‬ ‫מחוץ‬ ‫מוגדר‬ ‫לא‬ i for ‫של‬ ‫הבלוק‬ ‫של‬ ‫שמקובל‬ ‫מה‬ ‫לא‬ ‫וזה‬ 4 ‫ידפיס‬ ‫מומלץ‬ ‫ולכן‬ C# ‫ב‬ ‫לדוגמא‬ var‫ב‬ ‫ולא‬ let‫ב‬ ‫להשתמש‬ ‫לתוך‬ ‫לדוגמא‬ ‫הקוד‬ ‫כל‬ ‫את‬ ‫להכניס‬ ‫אפשר‬ ‫בקובץ‬ AppComponent ‫המחלקה‬ app.component.ts
• 5.
  Type Inference ‫ב‬‫ושימוש‬ ‫משתנים‬ let num=1; num = ‘some string’; let a; a=1; a=true; a=’some text’ [email protected] 5 ‫הוא‬ num ‫כי‬ ‫קומפילציה‬ ‫שגיאת‬ ‫השמה‬ ‫לעשות‬ ‫ניתן‬ ‫ולא‬ ‫מספר‬ ‫אליו‬ string ‫של‬ ‫ובגלל‬ num ‫משתנה‬ ‫על‬ ‫הכרזה‬ ‫מסוג‬ ‫יוכרז‬ ‫הוא‬ 1 ‫של‬ ‫ההשמה‬ number ‫משתנה‬ ‫סוג‬ ‫מקבל‬ ‫ערך‬ ‫כל‬ ‫כך‬ ‫ואחר‬ any ‫סוג‬ ‫מכל‬
• 6.
  ‫משתנים‬ ‫סוגי‬ let text: string; let num1 : number; let flag : boolean; let anything : any; let ar : string[]; let ar1 : any[]=[1,2,true]; enum Color {Red , Green , Blue}; let e1 = Color.blue; [email protected] 6 ‫ערכים‬ ‫בעל‬ ‫מאפס‬ ‫מספריים‬ 1 ‫בקפיצות‬
• 7.
  class - ‫מחלקה‬ :‫מלבן‬ ‫לדוגמא‬ ‫יחדיו‬ ‫שקשורות‬ ‫ופעולות‬ ‫שדות‬ ‫מקבצת‬ ‫מחלקה‬ export class Rect{ width : number; height : number; ComputeArea() : number { return this.height * this.width; } } [email protected] 7 ‫רוצים‬ ‫אם‬ export ‫ב‬ ‫משתמשים‬ ‫שונה‬ ‫בקובץ‬ Rect‫ב‬ ‫להשתמש‬ ‫מוגדר‬ ‫הוא‬ ‫בו‬ ‫הקובץ‬ ‫מאשר‬
• 8.
  ‫מחלקה‬ ‫של‬ ‫אוביקט‬ letrect : Rect; rect = new Rect(); rect.height=10; rect.width=2; console.log(rect.width); console.log(rect.height); console.log(rect.ComputeArea()); [email protected] 8 rect ‫משתנה‬ ‫הגדרת‬ ‫והשמה‬ Rect ‫של‬ ‫אוביקט‬ ‫יצירת‬ rect ‫למשתנה‬ ‫שלו‬ ‫הכתובת‬ ‫של‬
• 9.
  constructor - ‫בנאי‬ exportclass Rect{ width : number; height : number; constructor( width : number , height : number){ this.height = height; this.width = width; } ComputeArea() : number{ return this.height * this.width; }} [email protected] 9 ‫המילה‬ ‫עם‬ ‫מוגדר‬ ‫בנאי‬ .constructor ‫השמורה‬ ‫אחד‬ ‫בנאי‬ ‫רק‬ ‫מותר‬ ‫במחלקה‬
• 10.
  access modifier -‫גישה‬ ‫הרשאת‬ export class Rect{ private width : number; private height : number; constructor( width : number , height : number){ this.height = height; this.width = width; } ComputeArea() : number{ return this.height * this.width; } } [email protected] 10 : ‫גישה‬ ‫הרשאות‬ ‫שלוש‬ ‫יש‬ public , private, protected ‫בירושה‬ ‫לשימוש‬ ‫האחרון‬ ‫מחוץ‬ ‫האלה‬ ‫לשדות‬ ‫לגשת‬ ‫ניתן‬ ‫לא‬ ‫למחלקה‬ ‫להרשאות‬ ‫המחדל‬ ‫ברירת‬ public ‫היא‬
• 11.
  ‫בבנאי‬ ‫גישה‬ ‫הרשאת‬ exportclass Rect{ constructor( private width : number ,private height : number){ } ComputeArea() : number{ return this.height * this.width; } } [email protected] 11 ‫ויוצר‬ ‫מתקמפל‬ ‫הזה‬ ‫הקוד‬ width ‫שדות‬ ‫שני‬ ‫אוטומטית‬ ‫במחלקה‬ height
• 12.
  class properties export classRect{ constructor( private width : number ,private height : number){} get Width(){ return this.width; } get Height(){ return this.height; } set Width(value){ this.width = value; } set Height(value){ this.height = value; } ComputeArea() : number{ return this.height * this.width; } } [email protected] 12 get properties get properties
• 13.
  properties ‫ב‬ ‫לשימוש‬‫דוגמה‬ let rect : Rect; rect = new Rect(10,20); console.log(rect.Height); console.log(rect.Width); rect.Height = 100; rect.Width = 3; console.log(rect.ComputeArea()); [email protected] 13 get property - ‫ב‬ ‫שימוש‬ getter set property - ‫ב‬ ‫שימוש‬ setter
• 14.
  Arrow Functions (javascript‫מ‬ ‫מגיע‬‫)זה‬ arrow function ‫של‬ ‫כללי‬ ‫מבנה‬ (arguments) => return value { statements} let f = (msg : string) => { console.log(msg); } f("hello"); [email protected] 14 lambda ‫נקרא‬ ‫זה‬ C# ‫ב‬ ‫אחת‬ ‫שורה‬ ‫רק‬ ‫יש‬ ‫אם‬ .expression ‫הבלוק‬ ‫סימון‬ ‫את‬ ‫להוריד‬ ‫אפשר‬ ‫אז‬ { } ‫קרי‬ - ‫שם‬ ‫ללא‬ ‫פונקציה‬ ‫כאן‬ ‫יצרנו‬ anonymous function
• 15.
  Interface let person :IPerson= { Name:"Tom", Age:32, GetSigniture: ():string =>{return person.Name+person.Age} } console.log(person.Name); console.log(person.Age); console.log(person.GetSigniture()); [email protected] 15 export interface IPerson { Name:string, Age:number, GetSigniture: ()=>string } ‫שאוביקט‬ ‫חוזה‬ ‫הוא‬ Interface ‫לקיים‬ ‫צריך‬ ‫כזה‬ ‫שהוא‬ ‫שטוען‬ ‫מוגדר‬ ‫כאן‬ IPerson ‫לדוגמא‬ ‫בקובץ‬ iperson.ts interface ‫ב‬ ‫שימוש‬ ‫כלשהיא‬ ‫בפונקציה‬
• 16.
  Modules ‫מחוץ‬ ‫הזו‬ ‫במחלקה‬‫להשתמש‬ ‫שניתן‬ ‫מנת‬ ‫על‬ .rect.ts ‫בקובץ‬ Rect ‫המחלקה‬ ‫את‬ ‫שיצרנו‬ ‫נניח‬ : ‫דברים‬ ‫שני‬ ‫לעשות‬ ‫יש‬ ‫הזה‬ ‫לקובץ‬ ●export ‫עם‬ ‫מוגדרת‬ ‫שהמחלקה‬ ‫לוודא‬ export class Rect{ } ●‫לדוגמא‬ ‫במחלקה‬ ‫להשתמש‬ ‫רוצים‬ ‫בו‬ ‫בקובץ‬ import ‫לעשות‬ import { Rect } from './rect'; [email protected] 16 typescript ‫ומבחינת‬ ‫הקובץ‬ ‫של‬ path‫ל‬ ‫מתייחס‬ ‫נמצא‬ rect.ts ‫הקובץ‬ ‫זה‬ ‫במקרה‬ .module ‫זהו‬ import ‫שעושה‬ ‫הקובץ‬ ‫נמצא‬ ‫בה‬ ‫ספריה‬ ‫באותה‬
• 17.
  modules ‫של‬ ‫סכמטי‬‫תאור‬ [email protected] 17 File 1 File 2 Module Module File 3 Module export export import import