TypeScript实例讲解（十一）

这是我参与11月更文挑战的第11天，活动详情查看：2021最后一次更文挑战

接上一篇：TypeScript实例讲解（十）

本篇内容：TypeScript 装饰器。

装饰器

装饰器本质上是一个函数，定义好装饰器后通过 @ 符号来使用，起到对类进行修饰的作用，在类定义好之后执行。

注意：在 TypeScript 中装饰器还属于实验性语法，必须在命令行或 tsconfig.json 里启用 experimentalDecorators 编译器选项。

方法的装饰器

// 例 1
// 定义方法装饰器
function getNameDecorator(target: any, key: string, descriptor: PropertyDescriptor) {
    descriptor.writable = false; // 禁止重写
}

class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    @getNameDecorator
    getName() {
        return this.name;
    }
}

const person = new Person('bear');

方法装饰器接收三个参数，分别是：target、方法名称和访问器的 PropertyDescriptor。
普通方法 target 对应的是类的 prototype
静态方法 target 对应的是类的构造函数
descriptor 的作用是控制函数的

访问器的装饰器

// 例 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');

访问器的装饰器接收3个参数，分别是：原型、访问器名称、访问器的 PropertyDescriptor。

属性的装饰器

// 例 3
function nameDecorator(target: any, key: string): any {
    // 创建一个 descriptor，用这个 descriptor 替换掉 name 属性的 descriptor。
    const descriptor: PropertyDescriptor = {
        writable: false
    };
    return descriptor;
}

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

const person = new Person();

属性的装饰器接收2个参数，分别是：原型和属性名称。

如果在装饰器里面创建并返回一个 descriptor，那这个新的 descriptor 将会替换掉原始属性的 descriptor。

// 例 4
function nameDecorator(target: any, key: string) {
    target[key] = 'panda';  // 错误示范
}

注意：修饰器里修改的属性不是实例上的属性，而是原型上的属性。所以无法直接对属性值进行修改。

参数的修饰器

// 例 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();

参数修饰器接收3个参数，分别是：原型、方法名称、参数的位置。

另外可以同时使用多个装饰器，有多个装饰器时执行顺序为从下到上或从右到左。

本篇完！如果文章对你有一点点帮助，请记得点个赞哦。