【TypeScript】从零开始玩转TypeScript - TypeScript中的装饰器

前言

小伙伴们大家好。今天我们继续学习TypeScript。在开始今天的主题之前我们先来看一个场景：小A入职了一家公司并接手了一个后台项目，目前这个后台项目有很多问题，比如系统中的一些增删改查操作不需登录就可操作，这显然很不合理。于是项目经理就要求小A给所有的增删改查添加登录验证操作，需要用户登录后才能操作，一开始小A把每个方法中都添加了相同的登录校验代码，后来写着写着发现所添加的代码都是相同的，于是干脆封装成了一个check方法，然后再在每个方法中去调用。开发完成感觉良好，但没过几天项目经理突发奇想跟小A说：本着封闭开放的原则，这些增删改查的方法是别人已经封装好的了，那么我们对这些方法的内部代码就不要去修改了，但在不改变其内部代码的情况下登录校验功能同样也得加。这下可难坏小A了。不让我改内部代码还有得增加校验功能。于是网上各种搜寻查找，一次偶然的机会让他发现：诶，有个叫装饰器的家伙刚好能够满足需求。于是就引出了我们今天的主题 - 装饰器

装饰器

我们都知道在JavaScript中目前是没有装饰器的，而在TypeScript中已经支持了装饰器，但也是仅仅作为一项实验性的特性来支持，也就是说还不算是正式支持装饰器。那么如果我们想要在TypeScript中使用装饰器则，需要借助tsconfig.json或命令行中启用这一实验性特性。

• tsconfig.json

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

• 命令行

tsc --target ES5 --experimentalDecorators

以上二选一即可。
接下来来看下官方给出的关于装饰器的定义：装饰器是一种特殊类型的声明，它能够被附加到类，方法，访问符，属性或者参数上，装饰器使用**@expression**的形式定义，其中expression求值后必须是一个函数，它会在运行时被调用，而被装饰的声明信息会作为参数传给它。其实说白了：装饰器的本质就是一个函数，它可以让其它函数在不需要做任何代码改动的前提下增加额外的功能。装饰器有如下几类：

• 类装饰器：类装饰器在类声明之前被声明，类装饰器有如下几个特点：

• 定义类的装饰器函数时，必须且只能接收一个参数，类的构造函数将作为实参传给装饰器
• 类装饰器必须紧跟着类的声明，不能用在声明文件中（.d.ts），也不能用在任何外部上下文中
• 类装饰器虽然是紧跟着类的声明，但实际上类装饰器是作用于类的构造函数的
• 类装饰器在运行时被当作函数执行，并且会把类的构造函数作为装饰器的唯一参数
• 类装饰器可用于监视，修改或者替换类的定义

//类装饰器，在不用new的情况下就可以调用类的构造函数
//必须接收一个参数
function hello(cons){
   
	//cons就是被装饰类的构造函数
	cons();	
}

@hello
class HelloWorld{
   
	constructor(){
   
		console.log('我在类装饰器中被调用了');
	}
}
// tsc编译后运行结果输出：=================
// "我在类装饰器中被调用了"

• 方法装饰器：方法装饰器声