开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情
上文中讲了装饰模式，今天来来介绍一些Typescript里面的装饰器，以及如何用装饰器来实现之前提及装饰模式，装饰器只是实现装饰模式的一种方式，并非唯一
在Typescript中使用装饰器
配置
在Typescript要使用装饰器需要在tsconfig打开装饰器的语法
"compilerOptions": {
"experimentalDecorators": true
}
类装饰器
在Typescript中我们可以对一个class用装饰器进行拓展，比如下面的例子, 会打印出'target is class A'的log日志；
const injectable = () =>
(target: { new (...args: any[]): {} }) => {
console.log('target is ',target)
};
@injectable()
class A {}
在类装饰器中我们可以获取到这个类，从而对他进行拓展
比如我们可以为这个类实现拓展
const AddName = (name: string) => (cls: { new (...args: any[]): {} }) => {
cls.prototype.name = name
}
@AddName('name')
class A {
age = 18
}
const a = new A()
console.log(a.name)
console.log(a.age)
方法装饰器
方法装饰器的语法如下，你可以获取到当前类，方法名，以及该属性的描述符
const log = () => {
return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
console.log(target, propertyKey, descriptor)
};
}
class A {
@log
say() {}
}
打印如下
A: {}, "say", {
"writable": true,
"enumerable": false,
"configurable": true
}
那么方法装饰器可以用来做什么呢？
AOP就是其中一个例子
AOP(面向切面编程)
在软件业，AOP为Aspect Oriented Programming的缩写，意为：[面向切面编程]，通过[预编译]方式和运行期间动态代理实现程序功能的统一维护的一种技术。AOP是[OOP]的延续，是软件开发中的一个热点，也是[Spring]框架中的一个重要内容，是[函数式编程]的一种衍生范型。利用AOP可以对业务逻辑的各个部分进行隔离，从而使得业务逻辑各部分之间的[耦合度]降低，提高程序的可重用性，同时提高了开发的效率。
这贴一段百科对AOP的简介
下面给一个简单的例子，我们可以对函数执行过程进行
const log = () => {
return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
const oldFn = descriptor.value
descriptor.value = function (...args:any[]) {
console.log('在函数执行前');
const res = oldFn.apply(this, args);
console.log('在函数执行后', res);
return res;
}
};
}
class A {
@log()
say() {
return 'Hello world'
}
}
new A().say()
执行结果如下
[LOG]: "在函数执行前"
* * *
[LOG]: "在函数执行后", "Hello world"
其他文章
在线等，后端悄悄改了接口文档被我抓住了怎么办?
和后端对线 | 前端如何保存base64字符串为文件
释放生产力 | Yapi，swagger2，swagger3生成请求代码
什么？在React中也可以使用vue响应式状态管理
clean-js | 在hooks的时代下，使用class管理你的状态
clean-js | 手把手教你写一个羊了个羊麻将版
有没有一种可能，你从来都没有真正理解async
