【typescript】TS编写和使用装饰器之（一）：类装饰器

随着TypeScript和ES6里引入了类，在一些场景下我们需要额外的特性来支持标注或修改类及其成员。 装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式。 Javascript里的装饰器目前处在 建议征集的第二阶段，但在TypeScript里已做为一项实验性特性予以支持。

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

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

命令行:

tsc --target ES5 --experimentalDecorators

tsconfig.json:

{
    "compilerOptions": {
        "target": "ES5",
        "experimentalDecorators": true,
        "outDir": "./dist",  //此篇文章中，我把编译后的文件放在dist文件夹
    }
}

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用 @expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

现在，咱们介绍装饰器之一的类装饰器如何编写和使用。

类装饰器在类声明之前被声明（紧靠着类声明）。 类装饰器应用于类构造函数，可以用来监视，修改或替换类定义。 类装饰器不能用在声明文件中( .d.ts)，也不能用在任何外部上下文中（比如declare的类）。

类装饰器表达式会在运行时当作函数被调用，类的构造函数作为其唯一的参数。

看这个例子：

function createMan<T extends {new (...args:any[]):{}}>(constructor:T){
    return class extends constructor {
        name = "小李"
        age = 25
    }
}

@createMan
class Man {
    name:string
    height = 180
    constructor(name:string){
        this.name = name
    }
}

console.log(new Man("jack"))

在根目录新建文件test.ts和tsconfig.json，复制上面代码到test.ts，tsconfig.json的内容在文章最开始有介绍，也可以通过

tsc --init

来初始化一个tsconfig.json。
如果提示tsc不是可用命令，就执行

npm install -g typescript

来全局安装ts。
一切准备就绪之后，咱们的根目录为：

test.ts
tsconfig.json

在根目录执行命令行:

tsc

完成后，目录变为：

dist
	> test.js
test.ts
tsconfig.json

在命令行执行

node ./dist/test.js

可以看到控制台输出

>> class_1 { height: 180, name: '小李', age: 25 }

由于咱们的

name = "小李"
age = 25

是写死的，不具有通用性，所以要在外边套一层函数，变为装饰器工厂函数：

function createMan(name:string,age:number){
    return function<T extends {new (...args:any[]):{}}>(constructor:T){
        return class extends constructor {
            name = name
            age = age
        }
    }
}

@createMan("小张",22)
class Man {
    name:string
    height = 180
    constructor(name:string){
        this.name = name
    }
}

console.log(new Man("jack"))

同样的，执行刚才的两个命令，可以看到控制台输出了：

>> class_1 { height: 180, name: '小张', age: 22 }

好了，关于类装饰器就介绍到这里，后续会介绍其他的装饰器，欢迎关注。

上一篇：读vue3源码和vue3设计与实现，用Proxy实现简单的响应式
下一篇：TS编写和使用装饰器之（二）：方法装饰器