TypeScript：装饰器

news2024/12/26 20:50:19

一、简介

随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。 Javascript里的装饰器目前处在 建议征集的第二阶段，但在TypeScript里已做为一项实验性特性予以支持。

注意  装饰器是一项实验性特性，在未来的版本中可能会发生改变。

若要启用实验性的装饰器特性，你必须在命令行或tsconfig.json里启用experimentalDecorators编译器选项：

命令行:

tsc --target ES6 --experimentalDecorators

tsconfig.json:

{
    "compilerOptions": {
        "target": "es2016",
        "experimentalDecorators": true
    }
}

在这里插入图片描述

二、装饰器

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

例如，有一个**@sealed**装饰器，我们会这样定义sealed函数：

function sealed(target: string) {
    // do something with "target" ...
}
2.1 装饰器工厂

如果我们要定制一个修饰器如何应用到一个声明上，我们得写一个装饰器工厂函数。 装饰器工厂就是一个简单的函数，它返回一个表达式，以供装饰器在运行时调用。

我们可以通过下面的方式来写一个装饰器工厂函数：

function color(value: string) { // 这是一个装饰器工厂
    return function (target: string) { //  这是装饰器
        // do something with "target" and "value"...
    }
}
2.2 装饰器组合

多个装饰器可以同时应用到一个声明上，就像下面的示例：

  • 书写在同一行上：
@f @g x
  • 书写在多行上：
@f
@g
x

当多个装饰器应用于一个声明上，它们求值方式与复合函数相似。在这个模型下，当复合f和g时，复合的结果(f ∘ g)(x)等同于f(g(x))。

同样的，在TypeScript里，当多个装饰器应用在一个声明上时会进行如下步骤的操作：

  • 由上至下依次对装饰器表达式求值。
  • 求值的结果会被当作函数，由下至上依次调用。

如果我们使用装饰器工厂的话，可以通过下面的例子来观察它们求值的顺序：

function f18() {
    console.log("f(): evaluated");
    return function (target: string, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("f(): called");
    }
}

function g18() {
    console.log("g(): evaluated");
    return function (targe: string, propertyKey: string, descriptor: PropertyDescriptor) {
        console.log("g(): called");
    }
}

class C18 {
     // @f18()
    // @g18()
    method() { }
}

在控制台里会打印出如下结果：

f(): evaluated
g(): evaluated
g(): called
f(): called
2.3 装饰器求值

类中不同声明上的装饰器将按以下规定的顺序应用：

  1. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个实例成员。
  2. 参数装饰器，然后依次是方法装饰器，访问符装饰器，或属性装饰器应用到每个静态成员。
  3. 参数装饰器应用到构造函数。
  4. 类装饰器应用到类。
2.4 类装饰器

类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 类装饰器不能用在声明文件中( .d.ts)，也不能用在任何外部上下文中（比如declare的类）。

类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。

如果类装饰器返回一个值，它会使用提供的构造函数来替换类的声明。

注意： 如果你要返回一个新的构造函数，你必须注意处理好原来的原型链。 在运行时的装饰器调用逻辑中 不会为你做这些。

下面是使用类装饰器(@sealed2)的例子，应用在Greeter18类：

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

我们可以这样定义@sealed装饰器：

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

当@sealed2被执行的时候，它将密封此类的构造函数和原型。(注：参见Object.seal)

下面是一个重载构造函数的例子。

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

console.log(new Greeter("world"));

在这里插入图片描述

2.5 方法装饰器

方法装饰器声明在一个方法的声明之前（紧靠着方法声明）。 它会被应用到方法的 属性描述符上，可以用来监视，修改或者替换方法定义。 方法装饰器不能用在声明文件( .d.ts)，重载或者任何外部上下文（比如declare的类）中。

方法装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

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

注意  如果代码输出目标版本小于ES5，属性描述符将会是undefined。

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

注意  如果代码输出目标版本小于ES5返回值会被忽略。

下面是一个方法装饰器（@enumerable）的例子，应用于Greeter20类的方法上：

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

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

我们可以用下面的函数声明来定义@enumerable装饰器：

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

这里的@enumerable(false)是一个装饰器工厂。 当装饰器 @enumerable(false)被调用时，它会修改属性描述符的enumerable属性。

2.6 访问器装饰器

访问器装饰器声明在一个访问器的声明之前（紧靠着访问器声明）。 访问器装饰器应用于访问器的 属性描述符并且可以用来监视，修改或替换一个访问器的定义。 访问器装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。

注意  TypeScript不允许同时装饰一个成员的get和set访问器。取而代之的是，一个成员的所有装饰的必须应用在文档顺序的第一个访问器上。这是因为，在装饰器应用于一个属性描述符时，它联合了get和set访问器，而不是分开声明的。

访问器装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

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

注意  如果代码输出目标版本小于ES5，Property Descriptor将会是undefined。

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

下面是使用了访问器装饰器（@configurable）的例子，应用于Point类的成员上：


class Point18 {
    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;
    };
}
2.7 属性装饰器

属性装饰器声明在一个属性声明之前（紧靠着属性声明）。 属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

  • 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  • 成员的名字。

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

我们可以用它来记录这个属性的元数据，如下例所示：

class Greeter21 {
    @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函数：
注意： Reflect Metadata 是 ES7 的一个提案

// 然后定义@format装饰器和getFormat函数：
// Reflect Metadata 是 ES7 的一个提案
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库更详细的信息。

2.8 参数装饰器

参数装饰器声明在一个参数声明之前（紧靠着参数声明）。 参数装饰器应用于类构造函数或方法声明。 参数装饰器不能用在声明文件（.d.ts），重载或其它外部上下文（比如 declare的类）里。

参数装饰器表达式会在运行时当作函数被调用，传入下列3个参数：

  1. 对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
  2. 成员的名字。
  3. 参数在函数参数列表中的索引。

注意  参数装饰器只能用来监视一个方法的参数是否被传入。

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

下例定义了参数装饰器（@required）并应用于Greeter22类方法的一个参数：

class Greeter22 {
    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库的更多信息。

2.9 元数据

一些例子使用了reflect-metadata库来支持实验性的metadata API。 这个库还不是ECMAScript (JavaScript)标准的一部分。 然而，当装饰器被ECMAScript官方标准采纳后，这些扩展也将被推荐给ECMAScript以采纳。

你可以通过npm安装这个库：

npm i reflect-metadata --save

TypeScript支持为带有装饰器的声明生成元数据。 你需要在命令行或 tsconfig.json里启用emitDecoratorMetadata编译器选项。
在这里插入图片描述
Command Line:

tsc --target ES5 --experimentalDecorators --emitDecoratorMetadata

在这里插入图片描述

tsconfig.json:

{
    "compilerOptions": {
        "target": "es2016",
        "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; }
}

注意  装饰器元数据是个实验性的特性并且可能在以后的版本中发生破坏性的改变（breaking changes）。

三、LearnTypeScript 源码

点击查看LearnTypeScript 源码

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2194361.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode 54 Spiral Matrix 解题思路和python代码

LeetCode 54 Spiral Matrix 解题思路和python代码

题目&#xff1a; Given an m x n matrix, return all elements of the matrix in spiral order. Example 1: Input: matrix [[1,2,3],[4,5,6],[7,8,9]] Output: [1,2,3,6,9,8,7,4,5] Example 2: Input: matrix [[1,2,3,4],[5,6,7,8],[9,10,11,12]] Output: [1,2,3,4,8,1…
阅读更多...
进程间通信——《匿名管道》

进程间通信——《匿名管道》

文章目录 前言&#xff1a;进程间通信介绍进程间通信目的进程之间如何通信&#xff1f;进程间通信分类 管道什么是管道&#xff1f;匿名管道&#x1f9e8;尝试使用&#xff1a;&#x1f357;处理细节问题&#xff1a; &#x1f680;管道的4种情况和5种特征&#xff1a;4种情况&…
阅读更多...
C++引用（变量引用、数组引用与数组指针、引用本质-指针常量、常量引用）

C++引用（变量引用、数组引用与数组指针、引用本质-指针常量、常量引用）

C语言 ——对数组名进行解引用，取地址，还有sizeof和strlen进行操作解析_对数组名解引用得到什么-CSDN博客 C++引用（变量引用、数组引用与数组指针、引用本质-指针常量、常量引用）_c++11 数组引用-CSDN博客
阅读更多...
【智能算法应用】指数分布优化算法求解二维路径规划问题

【智能算法应用】指数分布优化算法求解二维路径规划问题

摘要 本项目采用指数分布优化算法来求解二维路径规划问题。通过构建合理的代价函数并结合智能算法进行优化&#xff0c;我们可以在复杂环境中找到最优路径。实验结果表明&#xff0c;该算法在多维空间中表现出高效性和稳定性。 理论 路径规划问题的核心在于从起点到终点选择…
阅读更多...
中国喀斯特地貌分布shp格式数据

中国喀斯特地貌分布shp格式数据

​ 中国几乎各省区都有不同面积的石灰岩的分布&#xff0c;出露地表的总面积约有130万平方公里&#xff0c;约占全国总面积的13.5%。被埋藏于地下的则更为广泛&#xff0c;有的地区累计厚度可达几千米。以至上万米。由此可见&#xff0c;喀斯特地形的研究对中国来说&#xff0c…
阅读更多...
Nuxt.js 应用中的 link：prefetch 钩子详解

Nuxt.js 应用中的 link：prefetch 钩子详解

title: Nuxt.js 应用中的 link：prefetch 钩子详解 date: 2024/10/7 updated: 2024/10/7 author: cmdragon excerpt: link:prefetch 是一个强大的钩子，允许开发者在链接预取时执行附加逻辑。合理利用这个钩子，可以帮助优化页面的加载速度和用户体验，提升 Web 应用的整体性…
阅读更多...
气膜馆的多元化盈利模式与市场前景—轻空间

气膜馆的多元化盈利模式与市场前景—轻空间

随着市场经济的不断繁荣&#xff0c;气膜馆作为一种创新型场馆&#xff0c;凭借其独特的结构设计和灵活的运营模式&#xff0c;逐渐成为创业者关注的焦点。那么&#xff0c;气膜馆如何通过多元化经营实现盈利&#xff1f;本文将为您详细解析气膜馆的经营模式与发展机会。 气膜馆…
阅读更多...
Hive3.x版本调优总结

Hive3.x版本调优总结

文章目录 第 1 章 Explain 查看执行计划&#xff08;重点&#xff09;1.1 创建测试用表1&#xff09;建大表、小表和 JOIN 后表的语句2&#xff09;分别向大表和小表中导入数据 1.2 基本语法1.3 案例实操 第 2 章 Hive 建表优化2.1 分区表2.1.1 分区表基本操作2.1.2 二级分区2.…
阅读更多...
Spring Boot医院管理系统：数据驱动的医疗

Spring Boot医院管理系统：数据驱动的医疗

3系统分析 3.1可行性分析 通过对本医院管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本医院管理系统采用JAVA作为开发语言&#xff0c;Spring Boot框…
阅读更多...
代码随想录算法训练营Day27 | 回溯算法理论基础、77.组合、216.组合总和Ⅲ、17.电话号码的字母组合

代码随想录算法训练营Day27 | 回溯算法理论基础、77.组合、216.组合总和Ⅲ、17.电话号码的字母组合

目录 回溯算法理论基础 77.组合 216.组合总和Ⅲ 17.电话号码的字母组合 回溯算法理论基础 视频讲解&#xff1a;带你学透回溯算法&#xff08;理论篇&#xff09;| 回溯法精讲&#xff01; 代码随想录&#xff1a;回溯算法理论基础 回溯函数与递归函数指的是同一个函数…
阅读更多...
VSCode | 设置Jupyter Notebook显示行号

VSCode | 设置Jupyter Notebook显示行号

vscode中的jupyter notebook每个cell都是默认不显示行号的&#xff0c;如果出现了报错&#xff0c;比如在52行出现报错&#xff0c;如果代码多的话不显示行号就有点麻烦&#xff0c;本文介绍如何设置显示行号。 1、VScode点击文件-首选项-设置 2、搜索“python”&#xff0c;点…
阅读更多...
Type-C那么多引脚是做什么用的？

Type-C那么多引脚是做什么用的？

一提到Type-C大家想到的肯定就是下面这个扁头接口。 如果大家仔细透过缝看里面的话&#xff0c;可以看到上下两排都有密密麻麻的引脚&#xff08;手机比较差拍不出来就不上图了&#xff09;。 虽然我们用Type-C口的时候我们不需要识别正反面&#xff08;这也是我喜欢Type-C的…
阅读更多...
基于Java语言的充电桩平台+云快充协议+充电桩管理后台+充电桩小程序

基于Java语言的充电桩平台+云快充协议+充电桩管理后台+充电桩小程序

软件架构 1、提供云快充底层桩直连协议&#xff0c;版本为云快充1.5&#xff0c;对于没有对接过充电桩系统的开发者尤为合适&#xff1b; 2、包含&#xff1a;启动充电、结束充电、充电中实时数据获取、报文解析、Netty通讯框架、包解析工具、调试器模拟器软件等&#xff1b;…
阅读更多...
电脑提示d3dcompiler_47.dll缺失怎么修复,仔细介绍dll的解决方法

电脑提示d3dcompiler_47.dll缺失怎么修复,仔细介绍dll的解决方法

1. d3dcompiler_47.dll 概述 1.1 定义与作用 d3dcompiler_47.dll 是 Microsoft DirectX 的一个关键组件&#xff0c;作为一个动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它在 Windows 操作系统中扮演着至关重要的角色。DirectX 是一套由微软开发的用于处理多媒体…
阅读更多...
Flutter渲染过程

Flutter渲染过程

The rendering process is what transforms your widget tree into the actual pixels that are displayed on the screen. It’s like the magic behind the scenes that brings your app’s UI to life! 呈现过程将小部件树转换为显示在屏幕上的实际像素。它就像幕后的魔法&…
阅读更多...
代码随想录算法训练营第二十六天|669. 修剪二叉搜索树 108.将有序数组转换为二叉搜索树 538.把二叉搜索树转换为累加树

代码随想录算法训练营第二十六天|669. 修剪二叉搜索树 108.将有序数组转换为二叉搜索树 538.把二叉搜索树转换为累加树

669. 修剪二叉搜索树 给定一个二叉搜索树&#xff0c;同时给定最小边界L 和最大边界 R。通过修剪二叉搜索树&#xff0c;使得所有节点的值在[L, R]中 (R>L) 。你可能需要改变树的根节点&#xff0c;所以结果应当返回修剪好的二叉搜索树的新的根节点。 思路&#xff1a; 首先…
阅读更多...
JavaScript 获取浏览器本地数据的4种方式

JavaScript 获取浏览器本地数据的4种方式

JavaScript 获取浏览器本地数据的方式 我们在做Web开发中&#xff0c;客户端存储机制对于在浏览器中持久化数据至关重要。这些机制允许开发者存储用户偏好设置、应用状态以及其他关键信息&#xff0c;从而增强用户体验。本文将介绍几种常用的JavaScript获取浏览器本地数据的方…
阅读更多...
【无人机设计与控制】基于蜣螂优化算法的无人机三维路径规划Matlab程序

【无人机设计与控制】基于蜣螂优化算法的无人机三维路径规划Matlab程序

摘要 使用蜣螂优化算法&#xff08;Dung Beetle Optimization, DBO&#xff09;&#xff0c;本文提出了一种无人机三维路径规划方法。该算法借鉴蜣螂导航行为&#xff0c;结合无人机避障需求&#xff0c;在复杂三维环境中生成最优路径。实验结果表明&#xff0c;基于DBO的路径…
阅读更多...
Redis主从复制(replica)、哨兵

Redis主从复制(replica)、哨兵

一、Redis主从复制介绍: 主从复制&#xff0c;master主机以写为主&#xff0c;slave从机以读为主&#xff0c;当主机数据变化的时候自动将新的数据异步同步到其他从机数据库&#xff1b;能够实现读写分离&#xff0c; 容灾恢复、 数据备份以及水平扩容支撑高并发 二、实现方法…
阅读更多...
在ubuntu好部署jenkins发布vue项目时遇到的一些问题及解决方法以及使用jenkins发布vue项目-npm自动打包发布的实现

在ubuntu好部署jenkins发布vue项目时遇到的一些问题及解决方法以及使用jenkins发布vue项目-npm自动打包发布的实现

一、在ubuntu好部署jenkins发布vue项目时遇到的一些问题及解决方法 1. 问题&#xff1a;webpack-dev-server不是内部或外部命令&#xff0c;也不是可运行的程序 解决&#xff1a;使用webpack要安装webpack-cli这个包&#xff0c;才可以调用webpack和webpack-dev-server这些命…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023