प्रत्येक कोणीय डेवलपर ने सज्जाकार को टाइमकोड कोड में देखा। उनका उपयोग मॉड्यूल का वर्णन करने, निर्भरता इंजेक्शन को कॉन्फ़िगर करने या किसी घटक को कॉन्फ़िगर करने के लिए किया जाता है। दूसरे शब्दों में, डेकोरेटर का उपयोग अतिरिक्त जानकारी या मेटाडेटा का वर्णन करने के लिए किया जाता है, फ्रेमवर्क या कंपाइलर (कोणीय के मामले में) के लिए। इसके अलावा, कोणीय केवल एक उदाहरण है। कई अन्य पुस्तकालय हैं जो घोषणा की दृष्टिकोण के रूप में कोड की सादगी और दृश्य के लिए सज्जाकार का उपयोग करते हैं। अतीत में .NET डेवलपर के रूप में, मुझे टीएस डेकोरेटर्स और .NET विशेषताओं के बीच बहुत सी समानताएं दिखाई देती हैं। अंत में, बढ़ते NestJS बैकएंड एप्लिकेशन फ्रेमवर्क (नोड पर एक अमूर्त) भी सज्जाकारों के भारी उपयोग और एक घोषणात्मक दृष्टिकोण पर बनाया गया है। यह सब कैसे काम करता है और अपने कोड में डेकोरेटर का उपयोग कैसे करें,इसे और अधिक सुविधाजनक और पठनीय बनाने के लिए? हम सभी समझते हैं कि टीएस कोड संकलित करने के बाद, हमें जावास्क्रिप्ट कोड मिलता है। जिसमें डेकोरेटर की कोई अवधारणा नहीं है, जैसे कई अन्य टाइपस्क्रिप्ट सुविधाएँ। इसलिए, मेरे लिए सबसे दिलचस्प सवाल यह है कि संकलन के बाद डेकोरेटर क्या होता है। इस मुद्दे पर चर्चा करते हुए, मैंने मिन्स्क में बैठक में भाषण दिया और मैं इस लेख को साझा करना चाहता हूं।

• —

. , .

• for Module declaration

@NgModule({
  imports: [
    CommonModule,
  ],
  exports: [
  ],
})
export class NbThemeModule {}

• for component declaration

@Component({
  selector: 'nb-card-header',
  template: `<ng-content></ng-content>`,
})
export class NbCardHeaderComponent {}

, , , .

, tsconfig.json , emitDecoratorMetadata experimentalDecorators, .

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es2017",
  },
}

, — , , , get , . @expression, @ . expression . , , .

, — , , . - .

, — . , -, ( ). , , .

— . Typescript :

declare type MethodDecorator = 
    <T>(
        target: Object, 
        propertyKey: string | symbol, 
        descriptor: TypedPropertyDescriptor<T>) 
=> TypedPropertyDescriptor<T> | void;

, . :

• ,

:

interface TypedPropertyDescriptor<T> {
    enumerable?: boolean;
    configurable?: boolean;
    writable?: boolean;
    value?: T;
    get?: () => T;
    set?: (value: T) => void;
}

, , .

, - , . Javascript .

, - . — .

class TestServiceDeco {

    @LogTime()
        testLogging() {
        ...
    }
}

, . Typescript , . , - , .

:

function LogTime() {
    return (target: Object, propertyName: string, descriptor: TypedPropertyDescriptor<Function>) => {
        const method = descriptor.value;
        descriptor.value = function(...args) {
            console.time(propertyName || 'LogTime');
            const result = method.apply(this, args);
            console.timeEnd(propertyName || 'LogTime');
            return result;
        };
    };
}

, — , . — target, propertyName . .

— , . , , . .

Javascript

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function LogTime() {
    return (target, propertyName, descriptor) => {
        const method = descriptor.value;
        descriptor.value = function (...args) {
            console.time(propertyName || 'LogTime');
            const result = method.apply(this, args);
            console.timeEnd(propertyName || 'LogTime');
            return result;
        };
    };
}
exports.LogTime = LogTime;

, Typescript . :

Object.defineProperty(exports, "__esModule", { value: true });
const log_time_decorator_1 = require("../src/samples/log-time.decorator");
class TestServiceDeco {
    testLogging() {
...    }
}
__decorate([
    log_time_decorator_1.LogTime(),
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", void 0)
], TestServiceDeco.prototype, "testLogging", null);

__decorate, .

, target prototype , .

, __decorate, , . , . .

, . — . — . — Dependency Injection. . , :

@CustomBehavior({
    singleton: false,
})
class TestServiceDeco {
    constructor() {
        console.log('TestServiceDeco ctor');
    }
}

, Typescript:

declare type ClassDecorator = 
    <TFunction extends Function>(target: TFunction) 
    => TFunction | void;

:

import 'reflect-metadata';

interface Metadata {
    singleton?: boolean;
}

function CustomBehavior(metadata: Metadata) {
    return function(ctor: Function) {
        Reflect.defineMetadata('metadataKey', metadata, ctor);
    }
}

. — singelton- . .

:

• target
• reflect-metadata

Reflect-metadata Typescript. , — . , , .

import 'reflect-metadata';

const instancesMap: Map<Object, Object> = new Map<Object, Object>();

function getInstance<T>(tType: new () => T): T {
    let metadata = Reflect.getMetadata('metadataKey', tType) as Metadata;
    if (metadata.singleton) {
        if (!instancesMap.has(tType)) {
            instancesMap.set(tType, new tType());
        }
        return instancesMap.get(tType) as T;
    } else {
        return new tType() as T;
    }
}

• getInstance, , ,
• Reflect.getMetadata , . any, as Metadata
• , . tType: new () => T
• - , Map

, , .

getInstance, .

, . , Javascript .

. , , , . , Person Age, 18 60. :

class Person {
    @Age(18, 60)
    age: number;
}

:

declare type PropertyDecorator = 
    (target: Object, propertyKey: string | symbol) => void;

:

import 'reflect-metadata';

function Age(from: number, to: number) {
    return function (object: Object, propertyName: string) {
        const metadata = {
            propertyName: propertyName,
            range: { from, to },
        };
        Reflect.defineMetadata(`validationMetadata_${propertyName}`, metadata, object.constructor);
    };
}

, . . , , , . , .

:

class Person {
...
}
__decorate([
    age_decorator_1.Age(18, 60),
    __metadata("design:type", Number)
], Person.prototype, "age", void 0);

, __decorate, .

, — , . — , , .

, :

function validate<T>(object: T) {
    const properties = Object.getOwnPropertyNames(object);
    properties.forEach(propertyName => {
        let metadata = Reflect.getMetadata(metaKey + propertyName, object.constructor);
        if (metadata && metadata.range) {
            const value = object[metadata.propertyName];
            if (value < metadata.range.from || value > metadata.range.to) {
                throw new Error('Validation failed');
            }
        }
    });
}

, , . .

:

const person = new Person();
person.age = 40;
validate(person);
// > validation passed

person.age = 16;
validate(person);
// > validation error

, , , .

, :

declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;

Class-Validator

Class-Validator, . .

export class Post {

    @Length(10, 20)
    title: string;

    @IsInt()
    @Min(0)
    @Max(10)
    rating: number;

    @IsEmail()
    email: string;
}

...

validate(object).then(errors => { // array of validation errors
    if (errors.length > 0) {
        console.log("validation failed. errors: ", errors);
    } else {
        console.log("validation succeed");
    }
});

, . .

, NestJS @UsePipes(new ValidationPipe()) http .

Typescript , . , -. , , , , , , , … Angular NestJS. ( ).

, , , , , !

ps लिखते समय (या अपने स्वयं के लेख का अनुवाद करते हुए), मैंने हब पर एक और वहीं पाया, जो सज्जाकारों के विषय को अच्छी तरह से प्रकट करता है। मैं एक लिंक देता हूं