Typescript装饰器(stage 2)

November 14, 2022

注意：本篇为 experimental stage 2 装饰器，需要在 tsconfig.json 启用 experimentalDecorators 选项

json

{
    "compileOptions": {
        "experimentalDecorators": true
    }
}

stage 3 装饰器自 typescript 5.0 无需配置直接支持，此时启用 experimentalDecorators 选项将导致使用 stage 2 装饰器

参见:
https://www.typescriptlang.org/docs/handbook/decorators.html
https://mirone.me/zh-hans/a-complete-guide-to-typescript-decorator/
https://bosens-china.github.io/Typescript-manual/download/zh/reference/decorators.html
Playground:
https://www.typescriptlang.org/zh/play

定义

装饰器是函数。
一共有四种这样的函数，用于修饰不同的目标类型

lib.decorators.legacy.d.ts

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

// 类装饰器
declare type ClassDecorator = <TFunction extends Function>(target: TFunction) => TFunction | void;

// 属性装饰器
declare type PropertyDecorator = (target: Object, propertyKey: string | symbol) => void;

// 方法装饰器 & 访问器装饰器
declare type MethodDecorator = <T>(
    target: Object,
    propertyKey: string | symbol,
    descriptor: TypedPropertyDescriptor<T>,
) => TypedPropertyDescriptor<T> | void;

// 参数装饰器
declare type ParameterDecorator = (target: Object, propertyKey: string | symbol, parameterIndex: number) => void;

类装饰器

JavaScript 中的类就是构造函数

下面的装饰器作用于构造函数（但不修改）。很明显，装饰器函数在构造函数声明后被调用。

function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

@sealed
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

可以看作是

const Greeter = (() => {
    // prettier-ignore
    class Greeter {/* 略 */}
    return sealed(_Greeter) ?? Greeter;
})();

类装饰器若返回一个类，则声明的构造函数被替换

function classDecorator<T extends { new (...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    };
}

@classDecorator
class Greeter {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
}

装饰器工厂

装饰器工厂是返回装饰器的函数，据此实现带参装饰器

方法装饰器/访问器装饰器

方法装饰器/访问器装饰器有三个参数：

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象
2.成员的名字
3.成员的属性描述符

如果方法装饰器/访问器装饰器返回一个值，它会被用作方法的属性描述符。

注意，同名访问器的 getter 和 setter 只需在文档顺序的第一个上应用装饰器

function enumerable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.enumerable = value;
    };
}

function configurable(value: boolean) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        descriptor.configurable = value;
    };
}

// 方法装饰器
class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }

    @enumerable(false)
    greet() {
        return "Hello, " + this.greeting;
    }
}

// 访问器装饰器
class Point {
    private _x: number;
    private _y: number;
    constructor(x: number, y: number) {
        this._x = x;
        this._y = y;
    }

    @configurable(false)
    get x() {
        return this._x;
    }

    @configurable(false)
    get y() {
        return this._y;
    }
}

属性装饰器

注意
属性描述符不会作为(第三个)参数传入属性装饰器，这与 TypeScript 是如何初始化属性装饰器的有关。
因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且无法监视或修改一个属性的初始化方法。返回值也会被忽略。
因此，属性描述符只能用来监视类中是否声明了某个名字的属性。

参数装饰器

与属性装饰器相似，但第三个参数传入的是参数在函数参数列表中的索引

←Back to home