官网链接

语法

type PropertyDecorator =(target: Object, propertyKey: string | symbol) => void;

target：直接写在类的属性上？

看个例子：

function capitalizeFirstLetter(str: string) {return str.charAt(0).toUpperCase() + str.slice(1);
}function observable(target: any, key: string): any {// prop -> onPropChangeconst targetKey = "on" + capitalizeFirstLetter(key) + "Change";target[targetKey] =function (fn: (prev: any, next: any) => void) {let prev = this[key];Reflect.defineProperty(this, key, {set(next) {fn(prev, next);prev = next;}})};
}class C {@observablefoo = -1;@observablebar = "bar";
}const c = new C();c.onFooChange((prev, next) => console.log(`prev: ${prev}, next: ${next}`))
c.onBarChange((prev, next) => console.log(`prev: ${prev}, next: ${next}`))c.foo = 100; // -> prev: -1, next: 100
c.foo = -3.14; // -> prev: 100, next: -3.14
c.bar = "baz"; // -> prev: bar, next: baz
c.bar = "sing"; // -> prev: baz, next: sing

编译通不过：

一种解决办法是，添加下图这种 dummy 方法，这种方法不推荐，因为缺乏灵活性：

另一种方法较通用，即为类添加通用的所谓的 index signature：

语法如下：

意思是类 C 可以拥有任意的属性，且属性名称为 string

运行时，target 的类型为类 C 的构造函数：

key 为属性名：

在下图第 15 行代码，直接给 C 的构造函数注入一个新的 on 监听函数：

这个监听函数的函数体，直到代码44行 onXXX 被调用时才会被执行：

给 C 对象实例的 foo 属性使用 Reflect.defineProperty API 设置一个 set 方法。

这样，每次该实例的 foo 属性被修改时，就触发其 set 函数：

在 set 函数实现体内，首先调用应用开发人员传入的回调函数 fn，然后将 this[key] 设置为新的值 next.

运行时，c.foo = 100, 会导致 Reflect.defineProperty 注册在 foo 属性的 set 方法被触发：

在 set 函数里，我们再也不能访问到 C 实例的 foo 或者 bar 属性，但是通过闭包，能访问到其修改之前的原始值：

更多Jerry的原创文章，尽在：“汪子熙”:

使用 TypeScript 自定义装饰器给类的属性增添监听器 Listener相关推荐

使用 TypeScript 自定义装饰器给类的方法增添监听器 Listener
方法装饰器语法 type MethodDecorator = <T>(target: Object,propertyKey: string | symbol,descriptor: Ty ...
python 函数修饰器父类_Python函数嵌套、回调函数、闭包、装饰器和类
markdown内容:Python函数嵌套.回调函数.闭包.装饰器和类一级标题:主要描述内容二级标题:各个内容三级标题:重要概念一.函数嵌套 1.1.作用域和嵌套函数 LEGB查找规则的 E, ...
三分钟快速了解typeScript的装饰器
↓↓↓ typeScript系列学习文章目录装饰器:装饰器是一种特殊类型的声明,它能够被附加到类声明,方法,属性或参数上,可以修改类的行为. 通俗的讲装饰器就是一个方法,可以注入到类.方法.属性参数 ...
python知识：如何自定义装饰器
一.说明本文对装饰器做了一个极其简单的解释图例,并用类定义一个装饰器:一旦一个程序AAA套上@XXX这样的前缀,如 @XXX def AAA(): pass 意味着: 1)AAA已经是XXX的参数. ...
python 自定义装饰器来验证函数参数
# -*- coding: utf-8 -*- # by dl from inspect import signature # 用来获取函数的一些信息# 自定义参数验证装饰器 def typeasse ...
Angular2入门：TypeScript的装饰器
Angular2入门:TypeScript的装饰器转载于:https://www.cnblogs.com/lexiaofei/p/9215505.html
python 类方法装饰器_python类装饰器即__call__方法
上一篇中我对学习过程中的装饰器进行了总结和整理,这一节简单整理下类装饰器 1.类中的__call__方法: 我们在定义好一个类后,实例化出一个对象,如果对这个对象以直接在后边加括号的方式进行调用,程序 ...
python 类的使用(5)之类装饰器(类的装饰器和类作为装饰器)
在阅读博客中,发现了类装饰器的存在,由于之前就在写类相关的专栏,这次就赶紧补上之前的内容啦.类装饰器这个词是有歧义的,因为类本身可以作为装饰器,一个类也可以被函数装饰器所装饰.今天就简单介绍一下这两种 ...
python中的类装饰器应用场景_Python 自定义装饰器使用写法及示例代码
1.Python装饰器简介 python的装饰器就是一个Python函数,它可以让其他函数在不需要做任何代码变动的前提下增加额外功能,装饰器的返回值也是一个函数对象.简单的说装饰器就是一个用来返回函数 ...

使用 TypeScript 自定义装饰器给类的属性增添监听器 Listener

语法

使用 TypeScript 自定义装饰器给类的属性增添监听器 Listener相关推荐

最新文章

热门文章