系列教程

TypeScript系列教程一《开篇》
TypeScript系列教程二《安装起步》
TypeScript系列教程三《基础类型》
TypeScript系列教程四《扩展类型》
TypeScript系列教程五《对象类型》》
TypeScript系列教程六《泛型》
TypeScript系列教程七《接口》
TypeScript系列教程八《类》
TypeScript系列教程九《高级类型》
TypeScript系列教程九《类型转换》-- keyof和typeof 操作
TypeScript系列教程九《类型转换》-- 索引访问类型
TypeScript系列教程九《类型转换》-- 条件类型
TypeScript系列教程九《类型转换》-- 映射类型
TypeScript系列教程九《类型转换》-- 条件类型
TypeScript系列教程九《类型转换》-- 模板文本类型
TypeScript系列教程十《模块》
TypeScript系列教程十一《装饰器》 – 装饰器与继承
TypeScript系列教程十一《装饰器》 – 类装饰器
TypeScript系列教程十一《装饰器》 – 方法装饰器
TypeScript系列教程十一《装饰器》 – reflect-metadata
TypeScript系列教程十一《装饰器》 – 属性装饰器
TypeScript系列教程十一《装饰器》 – 参数装饰器

属性装饰器和其他装饰器功能类似，其设计也是为了统一的、复用度更高的去监听，改变属性。

属性装饰器声明在一个属性声明之前（紧靠着属性声明）。属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。
属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

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

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

下面记录三个例子来具体体现场景。

基础例子

代码目的：

拦截实例属性，处理加工，输出修改后的属性。例如输入艾希 得到 寒冰射手艾希

代码实现：

const nameDecorate:PropertyDecorator = (target: Object, propertyKey: string | symbol)=>{let value:stringObject.defineProperty(target,propertyKey,{set:(v)=>{value = v},get:()=>{return '寒冰射手'+value}})
}class Hero {@nameDecoratename:string
}let hb = new Hero()
hb.name = '艾希'
console.log(hb.name);

打印结果：

工厂例子

属性装饰器函数工厂实现

代码目的：

根据工厂装饰器key,返回json，在网络请求的时候经常会占用关键字，根据工厂装饰器key确定json 属性最终名称。

代码实现：

let json:{} = {}const modelToJsonKey:(jsonKey:string)=>PropertyDecorator = (jsonKey)=>{return (target:Object,pkey:string)=>{Object.defineProperty(target,pkey,{set:(v)=>{json[jsonKey] = v}})}
}
class TestMdoel {@modelToJsonKey('title')name:string@modelToJsonKey('ID')id:stringconstructor(name:string,id:string){this.name = namethis.id = id}
}let modell = new TestMdoel('zhangsan','881')
console.log(json);

控制台输出：

 zhangyu@zhangyudeMacBook-Pro  ~/Desktop/study/ts/js2ts-project  ts-node propteryDecorate.ts
{ title: 'zhangsan', ID: '881' }

搭配reflect-metadata 不破坏结构存储

这是来自于官网的示例，中文档运行不通，我按照官网思想写了一遍。

代码目的：

通过属性装饰器格式，来格式化属性文字

代码实现：

import "reflect-metadata";const format:(formatter:string)=>PropertyDecorator = (formatter)=>{return (target: Object, propertyKey: string | symbol) => {Reflect.defineMetadata(propertyKey,formatter,target) }
}class Greeter {@format("Hello, %s")greeting: string;constructor(message: string) {this.greeting = message;}greet(){let format = Reflect.getMetadata("greeting",this)format = format.replace("%s",this.greeting)console.log(format);}
}let greeter =  new Greeter('属性装饰器')
greeter.greet()

打印结果：

TypeScript系列教程十一《装饰器》 -- 属性装饰器相关推荐

Python编程系列教程第12讲——属性和方法
视频地址:http://v.youku.com/v_show/id_XNTgyOTg4NjQ4.html 普及网络安全知识,推动信息技术发展. 为祖国的网络安全撑起一片蓝天,为网络安全爱好者构建一方家 ...
sprinboot中编程式事务_SpringBoot系列教程之事务传递属性
200202-SpringBoot系列教程之事务传递属性对于mysql而言,关于事务的主要知识点可能几种在隔离级别上:在Spring体系中,使用事务的时候,还有一个知识点事务的传递属性同样重要,本文 ...
【Kotlin】属性与幕后字段 ( 属性声明 | 属性初始化器 | 属性访问器 | field 属性幕后字段 | lateinit 延迟初始化属性 )
文章目录 I . 属性字段总结 II . 属性声明 III . 属性初始化器 IV . get / set 属性访问器 V . 属性幕后字段 field VI . 变量和常量的区别 VII . 延 ...
【总结】1277- 重学 TypeScript 系列教程
非常不错的 TypeScript 学习资料,一起推荐给小伙伴们,值得好好看看哈~ 以下是正文. TypeScript 是一种由微软开发的自由和开源的编程语言.它是 JavaScript 的一个超集,而 ...
VS2015配置PCL详细教程，使用配置属性管理器的方法，一劳永逸
此处并不讲PCL的安装,假设已经安装完成PCL,并已经配置好环境变量工程配置方法: 0.先是建立一个工程,这里命名为pclTest 接下来开始配置PCL 注意: 配置属性管理器和资源管理器的区别:配 ...
【EASYDOM系列教程】之 textContent 属性
Node 对象提供了 textContent 属性实现获取或设置 HTML 页面中指定元素的文本内容. 获取文本内容 textContent 属性表示 HTML 页面指定节点及其后代节点的文本内容.其 ...
【TypeScript系列教程12】Number对象的基本使用
目录 TypeScript Number 语法 Number 对象属性 JavaScript NaN 实例 prototype 实例 Number 对象方法 TypeScript Number Typ ...
【TypeScript系列教程02】安装及使用
目录 TypeScript 安装 NPM 安装 TypeScript 测试安装结果本教程使用VSCode TypeScript 安装我们需要使用到 npm ,你需要安装Node.js: NPM 安 ...
【TypeScript系列教程14】Array数组对象的常见的方法
目录 TypeScript Array(数组) concat() every() filter() forEach() join() lastIndexOf() map() pop() push(

TypeScript系列教程十一《装饰器》 -- 属性装饰器

系列教程

基础例子

工厂例子

搭配reflect-metadata 不破坏结构存储

TypeScript系列教程十一《装饰器》 -- 属性装饰器相关推荐

最新文章

热门文章