টাইপস্ক্রিপ্টে ডেকোরেটরস
এই প্রবন্ধটি টাইপস্ক্রিপ্টে ডেকোরেটরস ব্যাখ্যা করে।
YouTube Video
টাইপস্ক্রিপ্টে ডেকোরেটরস
টাইপস্ক্রিপ্টে ডেকোরেটরস একটি প্রক্রিয়া যা শ্রেণি, পদ্ধতি, অ্যাকসেসর, বৈশিষ্ট্য বা প্যারামিটারে অতিরিক্ত কার্যকারিতা বা আচরণ যোগ করার জন্য ব্যবহৃত হয়। ডেকোরেটরস কোডের পাঠযোগ্যতা এবং পুনঃব্যবহারযোগ্যতা বাড়ানোর জন্য শক্তিশালী একটি সরঞ্জাম।
ডেকোরেটরসের মৌলিক বিষয়সমূহ
একটি ডেকোরেটর হল একটি ফাংশন যা একটি শ্রেণিতে বা শ্রেণির সদস্যদের মধ্যে অতিরিক্ত কার্যকারিতা যোগ করে। ডেকোরেটরস টাইপস্ক্রিপ্ট ১.৫-এ পরিচিত হয়েছে এবং এগুলি ECMAScript স্ট্যান্ডার্ডের জন্যও প্রস্তাবিত হয়েছে।
1{
2 "compilerOptions": {
3 "experimentalDecorators": true
4 }
5}- ডেকোরেটরস ব্যবহার করতে, আপনাকে
tsconfig.jsonফাইলের মধ্যেexperimentalDecoratorsঅপশনটি সক্রিয় করতে হবে।
ডেকোরেটরসের ধরনসমূহ
টাইপস্ক্রিপ্টে, আপনি নিম্নলিখিত পাঁচটি ডেকোরেটর ব্যবহার করতে পারেন।
- ক্লাস ডেকোরেটর একটি ডেকোরেটর যা একটি ক্লাসে প্রয়োগ করা হয়।
- মেথড ডেকোরেটর একটি ডেকোরেটর যা একটি ক্লাসের মেথডে প্রয়োগ করা হয়।
- অ্যাক্সেসর ডেকোরেটর একটি ডেকোরেটর যা একটি ক্লাসের প্রপার্টির গেটার বা সেটারে প্রয়োগ করা হয়।
- প্রপার্টি ডেকোরেটর একটি ডেকোরেটর যা একটি ক্লাসের প্রপার্টিতে প্রয়োগ করা হয়।
- প্যারামিটার ডেকোরেটর একটি ডেকোরেটর যা একটি মেথডের প্যারামিটারে প্রয়োগ করা হয়।
ক্লাস ডেকোরেটর
ক্লাস ডেকোরেটরগুলি এমন ডেকোরেটর যা শ্রেণিতে প্রয়োগ করা হয়। ক্লাস ডেকোরেটরগুলি শ্রেণির সংজ্ঞার ঠিক উপরে লেখা হয় এবং শ্রেণির কনস্ট্রাক্টরে অ্যাক্সেস করতে পারে। এগুলি মূলত শ্রেণির আচরণ পরিবর্তন বা মেটাডাটা যোগ করার জন্য ব্যবহৃত হয়।
1function Logger(constructor: Function) {
2 console.log(`Class ${constructor.name} is being constructed`);
3}
4
5@Logger
6class Person {
7 constructor(public name: string) {}
8}
9
10const person = new Person('John');
11// Output: Class Person is being constructed
এই উদাহরণে, Logger ডেকোরেটরটি শ্রেণিতে প্রয়োগ করা হয়েছে এবং শ্রেণি প্রাথমিকীকরণ করা হলে কনসোলে একটি বার্তা প্রদর্শিত হয়।
মেথড ডেকোরেটর
মেথড ডেকোরেটরগুলি ক্লাসের পদ্ধতিতে প্রয়োগ করা হয় এবং পদ্ধতিগুলির কল এবং আচরণ পরিবর্তন করতে পারে। একটি মেথড ডেকোরেটর তিনটি আর্গুমেন্ট গ্রহণ করে।
- ক্লাসের প্রোটোটাইপ
- মেথডের নাম
- মেথডের প্রপার্টি ডেসক্রিপ্টর
1function LogExecutionTime(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
2 const originalMethod = descriptor.value;
3
4 descriptor.value = function (...args: any[]) {
5 console.time(propertyKey);
6 const result = originalMethod.apply(this, args);
7 console.timeEnd(propertyKey);
8 return result;
9 };
10}
11
12class MathOperations {
13 @LogExecutionTime
14 add(a: number, b: number): number {
15 return a + b;
16 }
17}
18
19const math = new MathOperations();
20math.add(2, 3);
21// Output: add: 0.000ms (execution time is displayed)
এই উদাহরণে, LogExecutionTime ডেকোরেটরটি মেথডের উপর প্রয়োগ করা হয়েছে এবং মেথডের কার্যকর সময় লগ করা হয়েছে।
অ্যাক্সেসর ডেকোরেটর
অ্যাক্সেসর ডেকোরেটর ক্লাস প্রপার্টির getter বা setter-এর উপর প্রয়োগ করা হয়। প্রপার্টির মান পরিবর্তন করার সময় আচরণ যোগ করার জন্য এগুলি উপকারী।
1function LogAccess(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
2 const originalGet = descriptor.get;
3 const originalSet = descriptor.set;
4
5 if (originalGet) {
6 descriptor.get = function () {
7 console.log(`Getter called for ${propertyKey}`);
8 return originalGet.call(this);
9 };
10 }
11
12 if (originalSet) {
13 descriptor.set = function (value: any) {
14 console.log(`Setter called for ${propertyKey} with value: ${value}`);
15 originalSet.call(this, value);
16 };
17 }
18}
19
20class Car {
21 private _speed: number = 0;
22
23 @LogAccess
24 get speed() {
25 return this._speed;
26 }
27
28 set speed(value: number) {
29 this._speed = value;
30 }
31}
32
33const car = new Car();
34car.speed = 120; // Setter called for speed with value: 120
35console.log(car.speed); // Getter called for speed → 120
এই উদাহরণে, একটি অ্যাক্সেসর ডেকোরেটর ব্যবহার করা হয়েছে যখন getter এবং setter ডাকা হয় তখন আউটপুট লগ করার জন্য।
প্রপার্টি ডেকোরেটর
প্রপার্টি ডেকোরেটর ক্লাস প্রপার্টির উপর প্রয়োগ করা হয়, তবে এটি প্রপার্টির মান বা আচরণ সরাসরি পরিবর্তন করতে পারে না। প্রপার্টির মেটাডেটা প্রাপ্ত করার জন্য এগুলি ব্যবহৃত হয়।
1function Readonly(target: any, propertyKey: string) {
2 Object.defineProperty(target, propertyKey, {
3 writable: false
4 });
5}
6
7class Book {
8 @Readonly
9 title: string = "TypeScript Guide";
10}
11
12const book = new Book();
13book.title = "New Title"; // Error: Cannot assign to read only property 'title'
এই উদাহরণে, Readonly ডেকোরেটরটি title প্রপার্টির উপর প্রয়োগ করা হয়েছে এবং প্রপার্টি রিড-অনলি বা শুধু-পঠনযোগ্য করা হয়েছে।
প্যারামিটার ডেকোরেটর
প্যারামিটার ডেকোরেটর মেথডের প্যারামিটারগুলোর উপর প্রয়োগ করা হয়। এগুলি সাধারণত মেটাডেটা সংরক্ষণ বা প্যারামিটার যাচাই করার জন্য ব্যবহৃত হয়। ডেকোরেটর তিনটি আর্গুমেন্ট গ্রহণ করে।
- ক্লাসের প্রোটোটাইপ
- মেথডের নাম
- প্যারামিটার সূচক
1function LogParameter(target: any, propertyKey: string, parameterIndex: number) {
2 console.log(`Parameter at index ${parameterIndex} in method ${propertyKey} was decorated.`);
3}
4
5class User {
6 greet(@LogParameter message: string) {
7 console.log(message);
8 }
9}
10
11const user = new User();
12user.greet('Hello!');
13// Output: Parameter at index 0 in method greet was decorated.
এই উদাহরণে, LogParameter ডেকোরেটরটি greet মেথডের প্রথম প্যারামিটারের উপর প্রয়োগ করা হয়েছে এবং মেথডটি কল করা হলে এটি লগ করে যে প্যারামিটারটি ডেকোরেট করা হয়েছে।
ডেকোরেটরের ব্যবহারিক উদাহরণ
ডেকোরেটরগুলি Angular-এর মতো ফ্রেমওয়ার্কে ব্যাপকভাবে ব্যবহৃত হয়, বিশেষত ডিপেনডেন্সি ইনজেকশন এবং মেটাডেটা সংজ্ঞার জন্য। উদাহরণস্বরূপ, নিচের মতো Angular কম্পোনেন্ট সংজ্ঞায়িত করতে @Component ডেকোরেটরটি ব্যবহার করুন।
1@Component({
2 selector: 'app-root',
3 template: '<h1>Hello World</h1>',
4})
5export class AppComponent {}সুতরাং, ডেকোরেটরগুলি প্রায়ই ফ্রেমওয়ার্ক এবং লাইব্রেরির মূল অংশ হিসাবে ব্যবহৃত হয়, যা কোডকে সংক্ষিপ্ত এবং পরিষ্কার রাখতে সহায়তা করে।
ডেকোরেটরের সংক্ষিপ্তসার
TypeScript ডেকোরেটরগুলি শক্তিশালী টুল যা শ্রেণি, মেথড এবং প্রপার্টিগুলিতে নমনীয়ভাবে কার্যকারিতা যোগ করে। কাস্টম ডেকোরেটর ব্যবহারের মাধ্যমে কোড রক্ষণাবেক্ষণযোগ্যতা এবং পুনরায় ব্যবহারযোগ্যতা উন্নত হয় এবং আরও বেশী বিমূর্ততা সক্ষম হয়। ডেকোরেটরগুলির Angular এবং NestJS এর মতো ফ্রেমওয়ার্কে একটি গুরুত্বপূর্ণ ভূমিকা থাকে এবং তাদের বোঝা এই ফ্রেমওয়ার্কগুলির কাজ করার প্রক্রিয়াকে গভীরভাবে বোঝার জন্য সহায়ক।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।