Created : https://www.linkedin.com/in/nathankrasney/ Slides as part of web programming course. Typescript for Angular

1. Typescript
natankrasney@gmail.com
1

2. ? Typescript ‫זה‬ ‫מה‬
.‫מלמעלה‬ ‫במבט‬ Typescript ‫את‬ ‫הצגתי‬ ‫ההקדמה‬ ‫בפרק‬
‫לכתוב‬ ‫לנו‬ ‫שיאפשר‬ ‫טוב‬ ‫בסיס‬ ‫לקבל‬ ‫מנת‬ ‫על‬ Typescript ‫לתוך‬ ‫פנימה‬ ‫ניכנס‬ ‫הזה‬ ‫בפרק‬
Typescript ‫היא‬ ‫התכנות‬ ‫שפת‬ ‫בה‬ Angular 2 ‫אפליקציות‬
natankrasney@gmail.com
2

3. ‫משתנים‬ ‫הגדרת‬
‫יותר‬ ‫בגרסאות‬ ‫הגיע‬ let ‫כי‬ ‫אם‬ javascript ‫מ‬ ‫חלק‬ ‫)שניהם‬ var ‫בעזרת‬ ‫משתנים‬ ‫להגדיר‬ ‫אפשר‬
: (‫מאוחרות‬
var num1 , num2=22 , msg = ‘hello world’ ;
: let ‫או‬
let num3 = 33;
‫הבא‬ ‫שקף‬ ‫ראה‬ - let ‫עדיף‬ ‫אבל‬
natankrasney@gmail.com
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();
}
natankrasney@gmail.com
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’
natankrasney@gmail.com
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;
natankrasney@gmail.com
6
‫ערכים‬ ‫בעל‬
‫מאפס‬ ‫מספריים‬
1 ‫בקפיצות‬

7. class - ‫מחלקה‬
: ‫מלבן‬ ‫לדוגמא‬ ‫יחדיו‬ ‫שקשורות‬ ‫ופעולות‬ ‫שדות‬ ‫מקבצת‬ ‫מחלקה‬
export class Rect{
width : number;
height : number;
ComputeArea() : number
{
return this.height * this.width;
}
}
natankrasney@gmail.com
7
‫רוצים‬ ‫אם‬ export ‫ב‬ ‫משתמשים‬
‫שונה‬ ‫בקובץ‬ Rect‫ב‬ ‫להשתמש‬
‫מוגדר‬ ‫הוא‬ ‫בו‬ ‫הקובץ‬ ‫מאשר‬

8. ‫מחלקה‬ ‫של‬ ‫אוביקט‬
let rect : Rect;
rect = new Rect();
rect.height=10;
rect.width=2;
console.log(rect.width);
console.log(rect.height);
console.log(rect.ComputeArea());
natankrasney@gmail.com
8
rect ‫משתנה‬ ‫הגדרת‬
‫והשמה‬ Rect ‫של‬ ‫אוביקט‬ ‫יצירת‬
rect ‫למשתנה‬ ‫שלו‬ ‫הכתובת‬ ‫של‬

9. constructor - ‫בנאי‬
export class Rect{
width : number;
height : number;
constructor( width : number , height : number){
this.height = height;
this.width = width;
}
ComputeArea() : number{
return this.height * this.width;
}}
natankrasney@gmail.com
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;
}
}
natankrasney@gmail.com
10
: ‫גישה‬ ‫הרשאות‬ ‫שלוש‬ ‫יש‬
public , private, protected
‫בירושה‬ ‫לשימוש‬ ‫האחרון‬
‫מחוץ‬ ‫האלה‬ ‫לשדות‬ ‫לגשת‬ ‫ניתן‬ ‫לא‬
‫למחלקה‬
‫להרשאות‬ ‫המחדל‬ ‫ברירת‬
public ‫היא‬

11. ‫בבנאי‬ ‫גישה‬ ‫הרשאת‬
export class Rect{
constructor( private width : number ,private height : number){
}
ComputeArea() : number{
return this.height * this.width;
}
}
natankrasney@gmail.com
11
‫ויוצר‬ ‫מתקמפל‬ ‫הזה‬ ‫הקוד‬
width ‫שדות‬ ‫שני‬ ‫אוטומטית‬
‫במחלקה‬ height

12. class properties
export class Rect{
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;
}
}
natankrasney@gmail.com
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());
natankrasney@gmail.com
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");
natankrasney@gmail.com
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());
natankrasney@gmail.com
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';
natankrasney@gmail.com
16
typescript ‫ומבחינת‬ ‫הקובץ‬ ‫של‬ path‫ל‬ ‫מתייחס‬
‫נמצא‬ rect.ts ‫הקובץ‬ ‫זה‬ ‫במקרה‬ .module ‫זהו‬
import ‫שעושה‬ ‫הקובץ‬ ‫נמצא‬ ‫בה‬ ‫ספריה‬ ‫באותה‬

17. modules ‫של‬ ‫סכמטי‬ ‫תאור‬
natankrasney@gmail.com
17
File 1
File 2
Module Module
File 3
Module
export export import import