כיצד לעבוד עם עיצובי TypeScript ב-Angular

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

מהם מעצבי TypeScript?

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

דקורטורים זוויתיים נפוצים

ב-Angular יש כמה דקורטורים מובנים המשמשים למטרות שונות. להלן המעצבים הזוויתיים הנפוצים ביותר:

• @Component - מגדיר רכיב Angular.
• @Directive - מגדיר הנחיה Angular.
• @Pipe - מגדיר צינור Angular.
• @Injectable - מגדיר שירות שניתן להחדיר לרכיבים או שירותים אחרים.
• @Input - מקשט מאפיין כדי להפוך אותו לקלט מחייב נתונים.
• @Output - מקשט מאפיין כדי להפוך אותו לפלט מחייב אירועים.

שימוש ב-@Component Decorator

הדקורטור @Component משמש להגדרת רכיב Angular. הוא מספק מטא נתונים לגבי הרכיב, כגון הבורר, התבנית, הסגנונות ותצורות אחרות שלו.

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

@Component({
  selector: 'app-hello-world',
  template: `<h1>Hello, World!</h1>`,
  styles: ['h1 { color: blue; }']
})
export class HelloWorldComponent { }

בדוגמה זו, הדקורטור @Component מגדיר רכיב פשוט עם תבנית שמציגה "Hello, World!". selector מציין את תג ה-HTML המותאם אישית לשימוש עבור רכיב זה.

שימוש ב-@Injectable Decorator

הדקורטור @Injectable משמש להגדרת מחלקת שירות שניתן להחדיר לרכיבים או שירותים אחרים. זהו חלק מהותי ממערכת הזרקת התלות של Angular.

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {
  getData() {
    return ['Angular', 'TypeScript', 'Decorators'];
  }
}

כאן, הדקורטור @Injectable הופך את DataService לזמין להזרקת תלות בכל היישום.

שימוש ב-@Input ו-@Output Decorators

המעצבים @Input ו-@Output משמשים ליצירת מאפייני קלט ואירועי פלט ברכיבים Angular. הם משמשים בדרך כלל לתקשורת רכיבים.

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <p>{{ message }}</p>
    <button (click)="sendMessage()">Send Message</button>
  `
})
export class ChildComponent {
  @Input() message: string;
  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit('Hello from Child Component!');
  }
}

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

יצירת עיצובים מותאמים אישית

ניתן ליצור מעצבים מותאמים אישית ב-Angular כדי להוסיף התנהגות או מטא נתונים ספציפיים למחלקות, שיטות או מאפיינים. להלן דוגמה למעצב כיתות פשוט:

function LogClass(constructor: Function) {
  console.log('Class Decorator called:', constructor);
}

@LogClass
class MyService {
  constructor() {
    console.log('MyService created');
  }
}

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

מַסְקָנָה

מעצבים ב-Angular מספקים דרך רבת עוצמה להוסיף מטא נתונים והתנהגות למחלקות, שיטות, מאפיינים ופרמטרים. הבנה כיצד להשתמש בעיצובים מובנים כמו @Component, @Injectable, @Input, ו-@Output חיונית עבור Angular יעיל הִתפַּתְחוּת. בנוסף, ניתן ליצור עיצובים מותאמים אישית כדי לענות על צרכים ספציפיים באפליקציה, מה שמוסיף גמישות לתהליך הפיתוח.