TypeScript Angular ডেকোরেটরস এবং টাইপিং

Angular একটি জনপ্রিয় ফ্রেমওয়ার্ক যা TypeScript এর উপর ভিত্তি করে কাজ করে এবং এতে অনেক ধরনের ডেকোরেটর ব্যবহৃত হয়। Angular ডেকোরেটরগুলো class, method, property, এবং parameter ডেকোরেটর হিসেবে কাজ করে এবং এগুলি অ্যাপ্লিকেশনের বিভিন্ন অংশে মেটাডেটা প্রদান করে। TypeScript এর স্ট্যাটিক টাইপিং সুবিধার সাথে Angular ডেকোরেটরগুলি ব্যবহার করে আরও শক্তিশালী এবং টাইপ-সেফ কোড লেখা সম্ভব হয়।

Angular ডেকোরেটরস কী?

Angular ডেকোরেটরস হল TypeScript ডেকোরেটর যা Angular এর ক্লাস এবং অন্যান্য কোড ব্লকগুলোর সাথে মেটাডেটা অ্যাটাচ করতে ব্যবহৃত হয়। এগুলি Dependency Injection, Routing, Component, Service, এবং Directive ইত্যাদি কাজের জন্য প্রয়োজনীয় মেটাডেটা সংজ্ঞায়িত করে।

Angular ডেকোরেটরগুলি ক্লাসের উপরে ব্যবহৃত হয় এবং সাধারণত অ্যাপ্লিকেশনটির অবজেক্ট এবং তাদের আচরণ নিয়ে কাজ করে।

Angular এর প্রধান ডেকোরেটরস

1. @Component: একটি কম্পোনেন্টের জন্য মেটাডেটা প্রদান করে।
2. @Injectable: একটি সার্ভিস ক্লাসকে ডিপেন্ডেন্সি হিসেবে ব্যবহারের জন্য চিহ্নিত করে।
3. @Directive: ডিরেকটিভের জন্য মেটাডেটা প্রদান করে।
4. @NgModule: একটি মডিউলের জন্য মেটাডেটা প্রদান করে।
5. @Input এবং @Output: কম্পোনেন্টের মধ্যে ডেটা আদান প্রদান করার জন্য ব্যবহৃত হয়।

১. @Component ডেকোরেটর

@Component ডেকোরেটর Angular কম্পোনেন্ট ক্লাসের সাথে মেটাডেটা যুক্ত করে, যেমন টেমপ্লেট, স্টাইলশীট, সিলেক্টর ইত্যাদি। এটি Angular কে নির্দেশ করে যে এটি একটি UI কম্পোনেন্ট এবং এটি কীভাবে কাজ করবে।

উদাহরণ:

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

@Component({
  selector: 'app-greeting',
  template: `<h1>Hello, {{ name }}!</h1>`,
  styleUrls: ['./greeting.component.css']
})
export class GreetingComponent {
  name: string = "John";
}

এখানে, @Component ডেকোরেটরটি GreetingComponent ক্লাসে মেটাডেটা যুক্ত করেছে যা কম্পোনেন্টের টেমপ্লেট এবং সিলেক্টর কে নির্দিষ্ট করে।

২. @Injectable ডেকোরেটর

@Injectable ডেকোরেটরটি Angular সার্ভিস ক্লাসের জন্য ব্যবহৃত হয় এবং Angular এর Dependency Injection (DI) সিস্টেমের অংশ হিসেবে ব্যবহৃত হয়। এটি Angular কে জানায় যে এই ক্লাসটি DI এর মাধ্যমে ইনজেক্ট করা যেতে পারে।

উদাহরণ:

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

@Injectable({
  providedIn: 'root'
})
export class UserService {
  getUser() {
    return { name: "John", age: 30 };
  }
}

এখানে, UserService ক্লাসে @Injectable ডেকোরেটরটি সার্ভিসটির জন্য মেটাডেটা যুক্ত করেছে, যা এটিকে DI সিস্টেমের মাধ্যমে সরবরাহ করা সম্ভব করে।

৩. @Input এবং @Output ডেকোরেটরস

@Input এবং @Output ডেকোরেটরগুলি কম্পোনেন্টের মধ্যে ডেটা আদান-প্রদান করতে ব্যবহৃত হয়। @Input ব্যবহার করে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণ করা যায়, এবং @Output ব্যবহার করে চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ইভেন্ট পাঠানো যায়।

উদাহরণ:

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

@Component({
  selector: 'app-child',
  template: `<button (click)="sendData()">Send Data</button>`
})
export class ChildComponent {
  @Input() childData: string = "";
  @Output() dataSent = new EventEmitter<string>();

  sendData() {
    this.dataSent.emit("Data from child component");
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child [childData]="parentData" (dataSent)="receiveData($event)"></app-child>`
})
export class ParentComponent {
  parentData: string = "Data from parent component";

  receiveData(event: string) {
    console.log("Received:", event);
  }
}

এখানে, @Input এবং @Output ডেকোরেটর দুটি কম্পোনেন্টের মধ্যে ডেটা আদান-প্রদান করার জন্য ব্যবহৃত হয়েছে। childData প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে পাস করা হচ্ছে এবং dataSent ইভেন্ট চাইল্ড থেকে প্যারেন্ট কম্পোনেন্টে পাঠানো হচ্ছে।

৪. @NgModule ডেকোরেটর

@NgModule ডেকোরেটরটি Angular অ্যাপ্লিকেশনের একটি মডিউল সংজ্ঞায়িত করতে ব্যবহৃত হয়। এটি বিভিন্ন কম্পোনেন্ট, সার্ভিস, এবং পাইপসহ অ্যাপ্লিকেশনের অন্যান্য অংশগুলোকে গ্রুপ করে।

উদাহরণ:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

এখানে, @NgModule ডেকোরেটরটি অ্যাপ্লিকেশনের মডিউল তৈরি করেছে, যেখানে declarations এর মধ্যে কম্পোনেন্টগুলি, imports এর মধ্যে মডিউলগুলো, এবং bootstrap এর মধ্যে মূল কম্পোনেন্টের উল্লেখ করা হয়েছে।

TypeScript টাইপিং এর সুবিধা

TypeScript ডেকোরেটরস ব্যবহারের সময় আপনি টাইপিং সুবিধা উপভোগ করতে পারেন, যেমন ক্লাস, মেথড, বা প্যারামিটার টাইপ ডিফাইন করা। এটি কোডকে আরও টাইপ-সেফ এবং সঠিক করে তোলে, বিশেষ করে যখন Angular-এর মতো বড় অ্যাপ্লিকেশন তৈরি করা হয়।

টাইপিং উদাহরণ:

function logMethod(target: any, methodName: string, descriptor: PropertyDescriptor) {
  console.log(`Method name: ${methodName}`);
}

class MyClass {
  @logMethod
  someMethod() {
    console.log("Method executed!");
  }
}

const myClassInstance = new MyClass();
myClassInstance.someMethod();

এখানে, logMethod ডেকোরেটর মেথডের নাম লগ করে, এবং TypeScript এর টাইপ সিস্টেম ডেকোরেটরের প্যারামিটারগুলো ঠিকভাবে টাইপ চেক করে।

সারাংশ

Angular ডেকোরেটরস TypeScript এর শক্তিশালী ফিচারগুলো ব্যবহার করে অ্যাপ্লিকেশনের বিভিন্ন অংশে মেটাডেটা সংজ্ঞায়িত করতে এবং তাদের আচরণ নিয়ন্ত্রণ করতে সহায়তা করে। ডেকোরেটরস Angular অ্যাপ্লিকেশনের ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ ভূমিকা পালন করে এবং টাইপ সেফটি নিশ্চিত করতে TypeScript এর শক্তিশালী টাইপিং সিস্টেমকে কাজে লাগায়।