This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

Examples of TypeScript

TypeScript decorators.Copy the code

A decorator

A decorator is essentially a function that decorates a class after it has been defined and used with the @ symbol.

Note: Decorators are still experimental syntax in TypeScript and must be enabled with the experimentalDecorators compiler option either on the command line or in tsconfig.json.

Method decorator
/ / 1
// Define the method decorator
function getNameDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    descriptor.writable = false; // Disallow overwriting
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    @getNameDecorator
    getName() {
        return this.name; }}const test = new Test('bear');
Copy the code

The method decorator takes three parameters: target, method name, and accessor PropertyDescriptor. The normal method target corresponds to the prototype of the class and the static method target corresponds to the constructor descriptor of the class that controls the function

Accessor decorator
/ / 2
function setDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    descriptor.writable = false;
}

class Person {
    private _name: string;
    constructor(name: string) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
    @setDecorator
    set name(name: string) {
        this._name = name; }}const person = new Person('bear');
Copy the code

Accessor decorators take three parameters: the prototype, accessor name, and accessor PropertyDescriptor.

Property decorator
/ / 3
function nameDecorator(target: any, key: string) :any {
    // Create a descriptor to replace the name attribute descriptor with this descriptor.
    const descriptor: PropertyDescriptor = {
        writable: false
    };
    return descriptor;
}

class Person {
    @nameDecorator
    name = 'bear';
}

const person = new Person();
Copy the code

The decorator for the property takes two parameters: the stereotype and the property name.

If you create and return a Descriptor in a decorator, the new descriptor will replace the descriptor of the original property.

/ / 4
function nameDecorator(target: any, key: string) {
    target[key] = 'panda';  // Error
}
Copy the code

Note: The properties modified in the decorator are not instance properties, but stereotype properties. Therefore, you cannot modify the property value directly.

Parameter modifier
/ / case 5
function paramDecorator(target: any, method: string, paramIndex: number) {
    // todo
}

class Person {
    getInfo(@paramDecorator name: string, age:number) {
        console.log(name, age); }}const person = new Person();
Copy the code

The parameter modifier takes three parameters: the prototype, the method name, and the position of the parameter.

In addition, you can use multiple decorators at the same time, executing them from bottom to top or right to left.

Finish this! If this article helps you at all, please give it a thumbs up.