ארכיון תגיות: TypeScript

שיעור 9 באנגולר (angular) -אובייקטים ואינטרפייס עם TypeScript.

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

דוגמא 1 – משתנה מסוג אובייקט

כך נגדיר משתנה מסוג אובייקט

Person:{
 id:number,
 name:string,
 email:string
}

וכך נשים בו ערכים

this.Person = {
 id:887,
 name: 'Bubu',
 email: 'bubu@jjj.com'
 }

 

דוגמא 2 – שימוש ב-interface + מערך של אובייקטים.

את אותה הגדרה בדיוק, אפשר להפריד לקובץ נפרד, ולהגדיר אובייקט שמממש interface.

בקובץ נפרד נגדיר כך :

export interface Person {
 id:number,
 name:string,
 email:string
}


כעת בקובץ TypeScript שמכיל את המודל של ה-component :

  • נייבא את ה-interface
  • ולאחר מכן, נוכל להשתמש באינטרפייס שבנינו

בקומפוננט הבא אפשר לראות גם משתנה בודד שמוגדר ע"פ האינטרפייס, וגם מערך .

import { Component } from '@angular/core';
import { Customer } from './Customer'

@Component({
 selector: 'sandbox3',
 template: `
 <p style="color:red;">Hello from SandBox3</p>
 `
})

export class Sandbox3Component{
 customer:Customer;
 customers:Customer[];

 constructor() {
 this.customer = {
 id: 1,
 name: 'Zuyyyyy',
 email: 'bubu@momo.com'
 }

 this.customers = [
 {
 id: 1,
 name: 'Zuyyyyy',
 email: 'bubu@momo.com'
 },
 {
 id: 2,
 name: 'bbdbdbdb',
 email: 'bfbfbf@momo.com'
 },
 {
 id: 3,
 name: 'ffffffd',
 email: 'rrd@momo.com'
 }
 ]
 }
}