文档章节

TypeScript基础入门之装饰器(三)

durban
 durban
发布于 2018/10/23 23:03
字数 1667
阅读 12
收藏 1

转载 TypeScript基础入门之装饰器(三)

继续上篇文章[TypeScript基础入门之装饰器(二)]

访问器装饰器

Accessor Decorator在访问器声明之前声明。 访问器装饰器应用于访问器的属性描述符,可用于观察,修改或替换访问者的定义。 访问器装饰器不能在声明文件中使用,也不能在任何其他环境上下文中使用(例如在声明类中)。

注意: TypeScript不允许为单个成员装饰get和set访问器。相反,该成员的所有装饰器必须应用于按文档顺序指定的第一个访问器。这是因为装饰器适用于属性描述符,它结合了get和set访问器,而不是单独的每个声明。

访问器装饰器的表达式将在运行时作为函数调用,具有以下三个参数:

  1. 静态成员的类的构造函数,或实例成员的类的原型。
  2. 成员的名字。
  3. 会员的财产描述。

注意: 如果脚本目标小于ES5,则属性描述符将不确定。

如果访问器装饰器返回一个值,它将用作该成员的属性描述符。

注意: 如果脚本目标小于ES5,则忽略返回值。

以下是应用于Point类成员的访问器装饰器(@configurable)的示例:

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; }
}

我们可以使用以下函数声明定义@configurable装饰器:

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

属性装饰器

Property Decorator在属性声明之前声明。 属性修饰器不能在声明文件中使用,也不能在任何其他环境上下文中使用(例如在声明类中)。

属性装饰器的表达式将在运行时作为函数调用,具有以下两个参数:

  1. 静态成员的类的构造函数,或实例成员的类的原型。
  2. 成员的名字。

注意: 由于在TypeScript中如何初始化属性装饰器,因此不提供属性描述符作为属性装饰器的参数。这是因为在定义原型的成员时,当前没有机制来描述实例属性,也无法观察或修改属性的初始化程序。返回值也会被忽略。因此,属性装饰器只能用于观察已为类声明特定名称的属性。

我们可以使用此信息来记录有关属性的元数据,如以下示例所示:

class Greeter {
    @format("Hello, %s")
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        let formatString = getFormat(this, "greeting");
        return formatString.replace("%s", this.greeting);
    }
}

然后我们可以使用以下函数声明定义@format装饰器和getFormat函数:

import "reflect-metadata";

const formatMetadataKey = Symbol("format");

function format(formatString: string) {
    return Reflect.metadata(formatMetadataKey, formatString);
}

function getFormat(target: any, propertyKey: string) {
    return Reflect.getMetadata(formatMetadataKey, target, propertyKey);
}

这里的@format("Hello,%s")装饰器是一个装饰工厂。 当调用@format("Hello,%s")时,它会使用reflect-metadata库中的Reflect.metadata函数为该属性添加元数据条目。 调用getFormat时,它会读取格式的元数据值。

注意此示例需要reflect-metadata库。 有关reflect-metadata库的更多信息,请参阅元数据。

参数装饰器

参数装饰器在参数声明之前声明。 参数装饰器应用于类构造函数或方法声明的函数。 参数装饰器不能用于声明文件,重载或任何其他环境上下文(例如声明类中)。

参数装饰器的表达式将在运行时作为函数调用,具有以下三个参数:

  1. 静态成员的类的构造函数,或实例成员的类的原型。
  2. 成员的名字。
  3. 函数参数列表中参数的序数索引。

注意: 参数装饰器只能用于观察已在方法上声明参数。

将忽略参数装饰器的返回值。

以下是应用于Greeter类成员参数的参数装饰器(@required)的示例:

class Greeter {
    greeting: string;

    constructor(message: string) {
        this.greeting = message;
    }

    @validate
    greet(@required name: string) {
        return "Hello " + name + ", " + this.greeting;
    }
}

然后我们可以使用以下函数声明定义@required和@validate装饰器:

import "reflect-metadata";

const requiredMetadataKey = Symbol("required");

function required(target: Object, propertyKey: string | symbol, parameterIndex: number) {
    let existingRequiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyKey) || [];
    existingRequiredParameters.push(parameterIndex);
    Reflect.defineMetadata(requiredMetadataKey, existingRequiredParameters, target, propertyKey);
}

function validate(target: any, propertyName: string, descriptor: TypedPropertyDescriptor<Function>) {
    let method = descriptor.value;
    descriptor.value = function () {
        let requiredParameters: number[] = Reflect.getOwnMetadata(requiredMetadataKey, target, propertyName);
        if (requiredParameters) {
            for (let parameterIndex of requiredParameters) {
                if (parameterIndex >= arguments.length || arguments[parameterIndex] === undefined) {
                    throw new Error("Missing required argument.");
                }
            }
        }

        return method.apply(this, arguments);
    }
}

@required装饰器添加一个元数据条目,根据需要标记参数。 然后,@validate装饰器将现有的greet方法包装在一个函数中,该函数在调用原始方法之前验证参数。

注意: 此示例需要reflect-metadata库。有关reflect-metadata库的更多信息,请参阅元数据。

元数据

一些示例使用reflect-metadata库,它为实验元数据API添加了polyfill。 该库尚未成为ECMAScript(JavaScript)标准的一部分。 但是,一旦装饰器被正式采用为ECMAScript标准的一部分,这些扩展将被提议采用。

您可以通过npm安装此库:

npm i reflect-metadata --save

TypeScript包含实验支持,用于为具有装饰器的声明发出某些类型的元数据。 要启用此实验性支持,必须在命令行或tsconfig.json中设置emitDecoratorMetadata编译器选

命令行:

tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}

启用后,只要导入了reflect-metadata库,就会在运行时公开其他设计时类型信息。

我们可以在以下示例中看到这一点:

import "reflect-metadata";

class Point {
    x: number;
    y: number;
}

class Line {
    private _p0: Point;
    private _p1: Point;

    @validate
    set p0(value: Point) { this._p0 = value; }
    get p0() { return this._p0; }

    @validate
    set p1(value: Point) { this._p1 = value; }
    get p1() { return this._p1; }
}

function validate<T>(target: any, propertyKey: string, descriptor: TypedPropertyDescriptor<T>) {
    let set = descriptor.set;
    descriptor.set = function (value: T) {
        let type = Reflect.getMetadata("design:type", target, propertyKey);
        if (!(value instanceof type)) {
            throw new TypeError("Invalid type.");
        }
        set(value);
    }
}

TypeScript编译器将使用@ Reflect.metadata装饰器注入设计时类型信息。 你可以认为它相当于以下TypeScript:

class Line {
    private _p0: Point;
    private _p1: Point;

    @validate
    @Reflect.metadata("design:type", Point)
    set p0(value: Point) { this._p0 = value; }
    get p0() { return this._p0; }

    @validate
    @Reflect.metadata("design:type", Point)
    set p1(value: Point) { this._p1 = value; }
    get p1() { return this._p1; }
}

注意: 装饰器元数据是一个实验性功能,可能会在将来的版本中引入重大更改。

© 著作权归作者所有

共有 人打赏支持
durban
粉丝 99
博文 568
码字总数 184197
作品 0
崇明
后端工程师
私信 提问
TypeScript基础入门之装饰器(一)

转发 TypeScript基础入门之装饰器(一) 介绍 随着TypeScript和ES6中Classes的引入,现在存在某些场景需要额外的功能来支持注释或修改类和类成员。 装饰器提供了一种为类声明和成员添加注释和元...

durban
2018/10/21
0
0
Midway v1.0 正式发布 - 面向未来的全栈开发方案

双旦已过,新年将至,midwayJs 向大家献上贺礼。 之前我们向社区开放了我们的治理工具,也就是 Pandora.js 工具包,用于整个 Node.js 应用的监控和治理,我们承诺这不是结束,只是开源的开始...

陈仲寅
01/11
0
0
midway v1.0 社区正式发布 - 面向未来的全栈开发方案

midway v1.0 社区正式发布 - 面向未来的全栈开发方案 双旦已过,新年将至,midwayJs 向大家献上贺礼。 之前我们向社区开放了我们的治理工具,也就是 Pandora.js 工具包,用于整个 Node.js 应...

作者: 张挺
01/10
0
0
midway v1.0 社区正式发布 - 阿里面向未来的全栈开发方案

双旦已过,新年将至,midwayJs 向大家献上贺礼。 之前我们向社区开放了我们的治理工具,也就是 Pandora.js 工具包,用于整个 Node.js 应用的监控和治理,我们承诺这不是结束,只是开源的开始...

czy88840616
01/10
0
0
midway v1.0 社区正式发布 - 面向未来的全栈开发方案 会有未来吗?

双旦已过,新年将至,midwayJs 向大家献上贺礼,首先奉上地址: https://github.com/midwayjs/midway/,欢迎 star :sparkles::sparkles::sparkles:。 之前我们向社区开放了我们的治理工具,也...

左华栋
01/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

条形码设计软件BarTender实用教程——透明度样本标签

BarTender是一款优秀的标签、条形码、卡片以及RFID标签设计和打印软件。所有版本的BarTender都具有独立的设计和打印功能,对于更高级的用户,自动化版和企业自动化版本提供了更强大的集成功能...

ymy_666666
22分钟前
0
0
Sql--order by、desc降序、top

Sql--order by、desc降序、top ---------通过order by 语句进行排序: --1.降序order by 列名desc --2.升序order by 列名 或order by 列名asc --3.order by语句必须一定要放在整个sql语句的最...

linjin200
23分钟前
1
0
websocket wss所需的nginx配置以及解决golang作为服务端的跨域问题

下面的配置是微信小程序所需的wss的配置,这里为了方便,,也为了避免使用端口号,和原项目的配置写在一起了,因此使用了固定后缀/wss,以作区分,配置的重点就是location /wss 段,其之后的部分是原...

漫步海边小路
24分钟前
3
0
数字转换汉语中人民币的大写

最终结果输出:你输入的金额为:【123】 大写金额: [壹佰贰拾叁] 下面是实现代码: /** 6 * 数字转换为汉语中人民币的大写<br> 7 * 8 * @author Arvin 9 * @contact 94...

政旭Arvin
34分钟前
1
0
智能合约漏洞 -- 默认可见性修饰符

Solidity函数有visibility指定符,标明函数如何被允许访问。Visibility决定一个函数是否能被用户,被其他派生合约,从外部调用,仅从内部调用等等。有4个visibility指定符.函数默认的visibil...

怎当她临去时秋波那一转
57分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部