TypeScript21(装饰器Decorator)

news2024/11/23 21:18:26

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

不仅增加了代码的可读性,清晰地表达了意图,而且提供一种方便的手段,增加或修改类的功能;

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

b83a8749f797448390f9128235c48237.png

 装饰器

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。

首先定义一个类

class A {
    constructor() {
 
    }
}

定义一个类装饰器函数 他会把ClassA的构造函数传入你的watcher函数当做第一个参数

const watcher: ClassDecorator = (target: Function) => {
    // 因为console.log(target)返回的是class类,所以可以在原型上添加函数
    target.prototype.getParams = <T>(params: T):T => {
        return params
    }
}

使用的时候 直接通过@函数名使用

@watcher
class A {
    constructor() {
 
    }
}

验证

const a = new A();
console.log((a as any).getParams('123'));

完整写法如下:

const watcher:ClassDecorator = (target:Function) => {
  console.log(target);
  target.prototype.getName = <T>(name:T):T => {
    return name
  }
  
}

@watcher
class A {

}

let a = new A();

(<any>a).getName()
console.log((<any>a).getName('小剑'));

装饰器工厂

其实也就是一个高阶函数 外层的函数接受值 里层的函数最终接受类的构造函数

const watcher = (name: string): ClassDecorator => {
    return (target: Function) => {
        target.prototype.getParams = <T>(params: T): T => {
            return params
        }
        target.prototype.getOptions = (): string => {
            return name
        }
    }
}
 
@watcher('name')
class A {
    constructor() {
 
    }
}
 
const a = new A();
console.log((a as any).getParams('123'));

装饰器组合

就是可以使用多个装饰器

const watcher = (name: string): ClassDecorator => {
    return (target: Function) => {
        target.prototype.getParams = <T>(params: T): T => {
            return params
        }
        target.prototype.getOptions = (): string => {
            return name
        }
    }
}
const watcher2 = (name: string): ClassDecorator => {
    return (target: Function) => {
        target.prototype.getNames = ():string => {
            return name
        }
    }
}
 
@watcher2('name2')
@watcher('name')
class A {
    constructor() {
 
    }
}
 
 
const a = new A();
console.log((a as any).getOptions());
console.log((a as any).getNames());

方法装饰器

返回三个参数:

        对于静态成员来说是类的构造函数,对于实例成员来说是类的原型对象;

        成员的名字;

        成员的属性描述符;

[
  {},
  'setParasm',
  {
    value: [Function: setParasm],
    writable: true,
    enumerable: false,
    configurable: true
  }
]
const met:MethodDecorator = (...args) => {
    console.log(args);
}
 
class A {
    constructor() {
 
    }
    @met
    getName ():string {
        return '小满'
    }
}
 
 
const a = new A();

属性装饰器

返回两个参数:

        对于静态成员来说是类的构造函数,对于实例成员来说是类的原型对象;

        属性的名字

[ {}, 'name', undefined ]

const met:PropertyDecorator = (...args) => {
    console.log(args);
}
 
class A {
    @met
    name:string
    constructor() {
 
    }
   
}
 
 
const a = new A();

参数装饰器

返回三个参数

        对于静态成员来说是类的构造函数,对于实例成员是类的原型对象;

        成员的名字;

        参数在函数参数列表中的索引

[ {}, 'setParasm', 0 ]

const met:ParameterDecorator = (...args) => {
    console.log(args);
}
 
class A {
    constructor() {
 
    }
    setParasm (@met name:string = '213') {
 
    }
}
 
 
const a = new A();

 

 

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

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

相关文章

计算机网络 HTTPS

HTTPS HTTPS &#xff08;全称&#xff1a;Hypertext Transfer Protocol Secure &#xff09;&#xff0c;是以安全为目标的 HTTP 通道&#xff0c;在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS 在HTTP 的基础下加入SSL&#xff0c;HTTPS 的安全基础是…

git:多分支管理

多分支管理1. 列出分支2. 新建分支3. 删除分支4. 切换分支5. 分支合并多分支开发的特点 | 作用1. 测试&#xff1a;合并之后再在分支中工作是否主分支里面的相同文件不会更改2. 测试&#xff1a;修改编辑test分支的文件&#xff0c;最后再合并分支&#xff0c;是否是直接覆盖&a…

FT2004(D2000)开发实战之启动流程介绍

一 启动流程概述 飞腾FT2004/D2000芯片提供两种引导方案,具体如下所示: 方案一: 方案二: 方案一和方案二的区别是第二阶段的运行组件不同,方案一运行的是U-boot、方案二运行的是UEFI 那么为什么会这样的了? 答案是:飞腾FT2004/D2000芯片既可以用于嵌入式方案,也可以…

Docker中网络的使用和配置用法详解

一、单个物理机中docker网络 1.1 Docker默认网桥 安装Docker 服务默认会创建一个 docker0 网桥&#xff08;其上有一个 docker0 内部接口&#xff09;&#xff0c;它在内核层连通了其他的物理或虚拟网卡&#xff0c;这就将所有容器和本地主机都放到同一个物理网络。 使用 doc…

初识猿如意开发工具

嗨&#xff0c;大家好&#xff0c;我是异星球的小怪同志 一个想法有点乱七八糟的小怪 如果觉得对你有帮助&#xff0c;请支持一波。 希望未来可以一起学习交流。 一、初遇猿如意 第一次听说猿如意开发工具&#xff0c;于是抱着试试的心态&#xff0c;开始下载尝试。 首先是…

算法导论23章最小生成树习题—23.2练习

23.2-1对于同一个输人图&#xff0c;Kruskal 算法返回的最小生成树可以不同。这种不同来源于对边进行排序时&#xff0c;对权重相同的边进行的不同处理。证明:对于图G的每棵最小生成树T&#xff0c;都存在一种办法来对G的边进行排序&#xff0c;使得Kruskal算法所返回的最小生成…

HTML+CSS+JS网页设计期末课程大作业——上海旅游景点(10页)web前端开发技术 web课程设计 网页规划与设计

&#x1f468;‍&#x1f393;学生HTML静态网页基础水平制作&#x1f469;‍&#x1f393;&#xff0c;页面排版干净简洁。使用HTMLCSS页面布局设计,web大学生网页设计作业源码&#xff0c;这是一个不错的旅游网页制作&#xff0c;画面精明&#xff0c;排版整洁&#xff0c;内容…

离散化【带题讲解】

全文目录&#x1f914; 原理&#x1f615; 区间和&#x1f635;‍&#x1f4ab; 建立映射&#x1f635;‍&#x1f4ab; 查找映射的下标&#x1f635;‍&#x1f4ab; 代码&#x1f914; 原理 离散化&#xff0c;把无限空间中有限的个体映射到有限的空间中去&#xff0c;以此提…

NVIDIA 安装 CUDA

名词解释&#xff1a;CUDA 是一个架构 该架构使GPU能够解决复杂的计算问题 此实战使用电脑为联想Y9000P 显卡型号为 3060 在安装 CUDA 之前需要先打开 NVIDIA 控制面板 一、准备工作 如图我这个显卡需要安装 CUDA 11.7 的版本 二、下载软件 进入官网下载 CUDA NVIDIA Deve…

解放军军官军衔(不含士兵军衔)分为3等10级

军衔&#xff0c;是国家最高权力机关授予军人的一种衔称。不同的级别有不同的军衔。对于军衔的认识&#xff0c;一些朋友或许只有片面的认识&#xff0c;下面&#xff0c;笔者就给大家来科普一下中国的军衔。 为了纪念中国人民解放军建军93周年&#xff0c;弘扬爱国主义精神&a…

被迫毕业,面试 30 家公司,终于上岸了!

大家好&#xff0c;我是君哥。今天分享一个老弟&#xff0c;被“毕业”后的求职经历。 在老东家干了 6 年&#xff0c;发展一般&#xff0c;很想出去&#xff0c;但是一直没有合适的机会&#xff0c;只好一边准备面试一边学习。让我没有想到的是&#xff0c;突然收到了“毕业”…

(1-线性回归问题)线性回归(Linear regression)Lasso回归和Ridge回归的区别

回归分析是机器学习中的经典算法之一&#xff0c;用途广泛&#xff0c;在用实际数据进行分析时&#xff0c;可能会遇到以下两种问题 过拟合, overfitting欠拟合, underfitting 在机器学习中&#xff0c;首先根据一批数据集来构建一个回归模型&#xff0c;然后在用另外一批数据…

Vue 中 (moment)操作日期的加减与展示

目录 基本语法 &#xff1a; 展示效果如下&#xff1a; 使用方式&#xff1a; 1、首先在 pacaage.json 中引入依赖 "moment": "^2.29.4" 2、然后命令行 install 安装 &#xff1a; 3、最后&#xff0c;在使用的页面引入moment 4、data 中我定义了一个…

python的Django项目中常见命令以及常错点(Linux环境下)

USE 数据库名 --------------- 切换数据库更新virtualenv库&#xff08;用于创建虚拟环境&#xff09;&#xff1a;sudo pip install -U virtualenv创建虚拟环境&#xff1a;virtualenv -p python venv(虚拟环境的目录名)激活虚拟环境&#xff1a;source venv/b…

利用Python处理excel表格,panda合并表格、合并多个excel、多个sheet

前言 记录一下&#xff0c;在使用pandas处理excel表格表格时候&#xff0c;关于分割(切分)表格这一块儿的操作。 这个系列会有三篇左右文章&#xff0c;这是第二篇&#xff0c;excel表格合并 我们常说的 excel文件&#xff0c; 在广义上&#xff0c;是指以 xls 或 xlsx 为后缀…

[1173]regexp_replace()和regexp_substr()函数的用法

文章目录REGEXP_REPLACE的使用方法命令格式&#xff1a;regexp_replace(source, pattern, replace_string, occurrence)参数说明返回值常用案例其他案例正则符号释义regexp_substr()函数的用法REGEXP_REPLACE的使用方法 命令格式&#xff1a;regexp_replace(source, pattern, r…

PF-Net基于深度学习的点云补全网络

1. 论文和代码 论文&#xff1a;https://openaccess.thecvf.com/content_CVPR_2020/papers/Huang_PF-Net_Point_Fractal_Network_for_3D_Point_Cloud_Completion_CVPR_2020_paper.pdfhttps://openaccess.thecvf.com/content_CVPR_2020/papers/Huang_PF-Net_Point_Fractal_Netw…

微信小程序开发 开启

小程序和普通网页开发的区别 1.运行环境不同 小程序是运行在微信环境中&#xff0c;而网页是运行在浏览器环境中。 2.API不同 由于运行环境不同&#xff0c;所以小程序中&#xff0c;无法调用DOM和BOM的API。 但是&#xff0c;小程序中可以调用微信环境提供的各种API&#…

Vue框架常用组件的快速构建项目Ctrl+c Ctrl+a Ctrl+v第十四课)

不管前方的路有多苦&#xff0c;只要走的方向正确&#xff0c;不管多么崎岖不平&#xff0c;都比站在原地更接近幸福。 在学习技术的道路上&#xff1a;落后又要被挨打。这是现实 常用到的组件库:下面的网站在自己空闲时间去看看 下面的资源只需要ctrlc ctrla ctrv Border 边框…

业务:财务软件之会计六要素

一、引言 会计六要素是资产、负债、所有者权益、收入、费用、利润。资产随处可见&#xff0c;比如房屋、机器设备、运输工具、仓库里的货物等。负债确认必须具备以下条件&#xff1a;负债是企业承担的现时义务&#xff1b;负债预期会导致经济利益流出企业&#xff1b;负债是由…