TypeScript（八）装饰器-阿里云开发者社区

前言

本文收录于TypeScript知识总结系列文章，欢迎指正！

程序遵循开放封闭原则，即在设计和编写软件时应该尽量避免对原有代码进行修改，而是通过添加新的代码来扩展软件的功能。

在日常开发中不知你有没有遇到以下情况，我们封装了一个Request模块，现在需要对请求进行拦截，访问请求参数，此时我们可以通过装饰器针对请求函数或者请求类进行访问，获取参数并解析

定义

在TS中，装饰器是一种特殊类型的声明。可以附加到类、方法、属性或参数上用于修改类的行为或属性。

在面向对象编程中，有时需要对类的行为和功能做出修改，直接修改类的内部可能会使成本升高，或出现其他问题；此时可以使用装饰器来修改类，在保证类内部结构与功能不变的前提下对数据或行为进行迭代

TS中装饰器可以分为类装饰器、方法装饰器、属性装饰器和参数装饰器。

tips：使用装饰器前需要在tsconfig中开启experimentalDecorators属性

类装饰器

类装饰器是应用于类的构造函数的函数，它可以用来修改类的行为。类装饰器可以有一个参数，即类的构造函数，通过这个参数我们可以对类的行为进行修改。

基本用法

类装饰器的语法是在一个普通的函数名前面加上@符号，后面紧跟着要装饰的类的声明，如：

const nameDecorator = (constructor: typeof Animal) => {
    console.log(constructor.prototype.name)// undefined
}
@nameDecorator
class Animal {
    name: string = "阿黄"
    constructor() {
        console.log(this.name);// 阿黄
    }
}
new Animal()

在上述代码中，我使用decorator获取Animal类的name属性，发现获取的是未定义，而在构造函数中却可以获取，原因是类的装饰器是在类定义时对类进行操作的，而属性及函数的初始化是当类实例化时进行的，所以获取不到name的值

操作方式

通过类装饰器操作类的方式有两种：操作类的原型和类的继承

操作类的原型

ES6之前的类是通过构造函数实现的，其原型prototype属性是存在的，所以我们在对类进行操作时可以使用修改原型的方式

type IAnimal = {
    name?: string
    getName?: () => string
}
const nameDecorator = (constructor: Function) => {
    const _this = constructor.prototype // 模拟类内部环境
    _this.name = "阿黄"
    _this.getName = () => {
        return _this.name
    }
}
@nameDecorator
class Animal implements IAnimal { }
const animal: IAnimal = new Animal()
console.log(animal.getName()) // 阿黄

上面代码实现了对类中name属性初始化以及实现了类的getName方法，在ES5中如何实现类的重写？看看下面代码对装饰器的修改：

const nameDecorator = (constructor: IAnimalProto) => {
    const _this = constructor.prototype // 模拟类内部环境
    _this.name = "阿黄"
    return class extends constructor {
        getName = () => {
            return "名字：" + _this.name
        }
    }
}

tips：如果通过这种方式无法修改类的属性或方法，可以把tsconfig中target属性调整为ES5，兼容低版本浏览器，此时类是通过构造函数实现的

类继承操作

ES6中的类语法糖中没有prototype属性，所以我们可以使用继承的方式实现上面的代码，并使用重写的方式修改类中的同名函数

type IAnimal = {
    name?: string
    getName?: () => string
}
type IAnimalProto = {
    new(): Animal
} & IAnimal
const nameDecorator = (constructor: IAnimalProto) => {
    return class extends constructor {
        constructor(public name = "阿黄") {
            super()
        }
        getName() {// 重写类中的函数
            return "姓名：" + this.name
        }
    }
}
@nameDecorator
class Animal implements IAnimal {
    name?: string;
    getName() {
        return this.name
    }
}
const animal: IAnimal = new Animal()
console.log(animal.getName()) // 姓名：阿黄

方法装饰器

方法装饰器是应用于类方法的函数，它可以用来修改方法的行为。方法装饰器可以接收三个参数，分别是目标类的原型对象（若装饰的是静态方法，则指的是类本身）、方法名称和方法描述符。

需要注意的是构造函数不是类的方法，所以方法装饰器不能直接用于装饰构造函数

tips：在类中使用方法装饰器需要避免箭头函数的出现，因为箭头函数的this指向它定义的环境，而不是实例对象，这导致了它无法获取到类的属性和方法

下面是一个案例

 
const nameDecorator = (target: Animal, key: string, descriptor: PropertyDescriptor): PropertyDescriptor => {
    console.log(target); // { setName: [Function (anonymous)] }
    console.log(key); // setName
    console.log(descriptor); 
    //   {
    //     value: [Function (anonymous)],
    //     writable: true,
    //     enumerable: true,
    //     configurable: true
    //   }
    return descriptor
}
 
class Animal {
    name: string
    @nameDecorator
    setName(name: string) {
        this.name = name
    }
}
const animal = new Animal()
animal.setName("阿黄")
console.log(animal.name); // 阿黄

其中target表示当前函数所在的类，key一般指函数名，descriptor指当前函数对象的描述符

基于上面的代码我们可以重写一下类中的setName函数：

const nameDecorator = (target: Animal, _: string, descriptor: PropertyDescriptor): PropertyDescriptor => {
    descriptor.value = (name: string) => {
        target.name = "名字：" + name
    }
    return descriptor
}

属性装饰器

属性装饰器应用于类属性的函数，它可以用来修改属性的行为或拦截属性的定义和描述符的访问，但是不能修改属性值。属性装饰器可以接收两个参数，分别是目标类的原型对象（若装饰的是静态属性，则指的是类本身）和属性名称。

与方法装饰器不同属性装饰器不会返回descriptor这个参数，也就是无法获取到属性的描述

const nameDecorator = (target: Animal, key: string) => {
    target[key] = '阿黄'
}
class Animal {
    @nameDecorator
    name: string
    setName(name: string) {
        this.name = name
    }
}
const animal = new Animal()
console.log(animal.name);// 阿黄
animal.setName("小黑")
console.log(animal.name);// 小黑

tips：为什么无法使用属性装饰器给属性定义初始值？此时可以检查一下你的tsconfig.json里面的配置target是不是设置成ES2021以后（如：ESNext，ES2022，ES2023等），在ES2022前在TS中声明了属性成员会在JS编译成第一张图，ES2022及以后显示的是第二张图

解决方法：参考这个

我们可以将属性声明修改为环境声明（declare，在后续文章会说到），或者使用旧版本的target配置

class Animal {
    @nameDecorator
    declare name: string
    setName(name: string) {
        this.name = name
    }
}

存取器装饰器

存取器装饰器是一种特殊类型的装饰器，它可以被用来装饰类中的存取器属性。它的使用方式与方法装饰器相同。但是与方法装饰器不同的是存取器descriptor参数中没有value值，但是我们可以通过修改descriptor来重写getter和setter方法

const nameDecorator = (_: any, __: string, descriptor: PropertyDescriptor) => {
    const __getter = descriptor.get;
    descriptor.get = function () {// 必须使用function，使用箭头函数获取不到this
        const value = __getter?.call(this);// 运行get获取存取器属性
        return "名字：" + value;
    };
}
class Animal {
    constructor(private _name: string) { }
    @nameDecorator
    get name() {
        return this._name
    }
}
const animal = new Animal("阿黄")
console.log(animal.name);

参数装饰器

参数装饰器是应用于类构造函数或方法参数的函数，它可以用来获取参数位置。参数装饰器可以接收三个参数，分别是目标类的原型对象（若装饰的是静态方法，则指的是类本身）、方法名称和参数索引（第几个参数，从0开始）。

基本用法

参数装饰器是一个函数，它可以被应用到类的构造函数、方法的参数上，它无法应用在访问器（getter 和 setter）的参数。

const nameDecorator = (target: any, key: string, parameterIndex: number) => {
    const name = target.name ?? target.constructor.name
    console.log(`${name}中的${key ?? '构造函数'}第${parameterIndex}个参数`);
}
class Animal {
    constructor(public _name: string) { }
    setName(@nameDecorator name: string) {
        this._name = name
    }
}
new Animal("阿黄")

参数装饰器虽然无法直接获取或者修改参数，但是可以将参数的位置标识出来，与元数据（reflect-metadata库），以及方法装饰器配合达到过滤参数的目的

参数过滤器

下面我们借助一个简单的反射元数据操作实现一个参数过滤器

元数据函数实现

type IKey = string | symbol | number
const getReflect = () => Reflect ?? Object
const __Reflect = getReflect()
 
const defineMeta = (target: any, key: IKey, metadataKey: IKey, descriptor: PropertyDescriptor): void => {
    __Reflect.defineProperty(target[key], metadataKey, descriptor)
}
 
const getMeta = (target: any, key: IKey, metadataKey: IKey,): PropertyDescriptor => {
    return __Reflect.getOwnPropertyDescriptor(target[key], metadataKey)
}

参数过滤

下面我们实现一个参数过滤，如果name等于阿黄，则中断函数执行并跳出

// 存储参数的索引
const saveMeta2Arr = (target: any, key: string, parameterIndex: number, keyWord: string) => {
    const paramsList = getMeta(target, key, keyWord)?.value ?? []
    paramsList.push(parameterIndex)
    defineMeta(target, key, keyWord, { value: paramsList })
    return paramsList
}
// 参数装饰器
const paramsDecorator = (target: any, key: string, parameterIndex: number) => {
    const paramsList: string[] = saveMeta2Arr(target, key, parameterIndex, 'list:params')// 参数列表
    defineMeta(target, key, 'filter:params', {
        value: (...args) => {
            if (!!!args.length) return void 0 // 没传参数默认跳过参数校验
            return paramsList.filter(it => args[it] === "阿黄").length > 0// 我的校验规则是参数等于阿黄就跳出函数，这个可以自行修改
        }
    })
}
// 函数装饰器
const methodDecorator = (target: Animal, key: string, descriptor: PropertyDescriptor) => {
    const fn = getMeta(target, key, 'filter:params').value // 获取参数装饰器的回调函数
    const method = descriptor.value
    descriptor.value = function (...args) {
        if (fn(...args)) return console.error("跳出了函数");// 过滤操作
        method.apply(this, args)
    }
}
class Animal {
    constructor(public name?: string) { }
    @methodDecorator
    setInfo(@paramsDecorator name?: string) {
        console.log("执行了函数");
        this.name = name
    }
}

效果实践

实现完成我们实例化一下类试试，可以看到，此时由于我们传入的参数是阿黄，所以setName函数未执行

const animal = new Animal()
animal.setInfo("阿黄")
console.log(animal.name);
// 跳出了函数
// undefined

下面我们修改一下，传入一个参数：小黑

const animal = new Animal()
animal.setInfo("小黑")
console.log(animal.name);
// 执行了函数
// 小黑

上述代码执行了setName并且将name赋值了小黑

装饰器优先级

下面说说当多个装饰器作用于同一个目标时，它们执行的顺序和影响的优先级是怎样的

相同装饰器

同一种装饰器的执行顺序是从下往上，理解为就近原则，近的先执行

const decorator1 = (...args: any[]) => {
    console.log(1)
}
const decorator2 = (...args: any[]) => {
    console.log(2)
}
const decorator3 = (...args: any[]) => {
    console.log(3)
}
@decorator1
@decorator2
@decorator3
class Animal { }
new Animal()
// 输出3 2 1

不同装饰器

不同装饰器遵循：参数>函数=属性=存取器>类，参数优先级最高，类最后执行。何以见得？

const decorator1 = (...args: any[]) => {
    console.log(1)
}
const decorator2 = (...args: any[]) => {
    console.log(2)
}
const decorator3 = (...args: any[]) => {
    console.log(3)
}
const decorator4 = (...args: any[]) => {
    console.log(4)
}
const decorator5 = (...args: any[]) => {
    console.log(5)
}
@decorator1
class Animal {
    @decorator2
    _name: string
    @decorator3
    get name() {
        return this._name
    }
    @decorator4
    setName(@decorator5 name: string) {
        this._name = name
    }
}
new Animal()

上面的代码输出2 3 5 4 1；我们换个顺序，把属性，函数，存取器调换位置再试试

@decorator1
class Animal {
    @decorator4
    setName(@decorator5 name: string) {
        this._name = name
    }
    @decorator3
    get name() {
        return this._name
    }
    @decorator2
    _name: string
}

输出5 4 3 2 1。可见属性，函数，存取器优先级在同级，参数更高，类更低

装饰器工厂

使用类装饰器和方法装饰器时，我们难免会遇到参数传递的问题，每个装饰器都有可以复用的可能，为了使代码高可用，我们可以尝试使用高阶函数实现一个工厂，外部函数接收参数，函数返回装饰器

type IAnimal = {
    name?: string
}
type IAnimalProto = {
    new(name: string): Animal
} & IAnimal
 
const nameDecorator = (name: string) => (constructor: IAnimalProto) => {
    return class extends constructor {
        constructor() {
            super(name)
        }
    }
}
@nameDecorator("阿黄")
class Animal implements IAnimal {
    constructor(public name?: string) { }
}
const animal: IAnimal = new Animal()
console.log(animal.name);

上述代码中我们实现了使用装饰器工厂给Animal类的属性name赋予默认值的功能

hooks与class兼容

在实际开发中，如果是使用react开发应该会遇到这样的问题，使用类开发的组件装饰器写法是这样

@EnhanceConnect((state: any) => ({
  global: state['@global'].data
}))
export class MyComponent {
  constructor(props: IProps) {
    // ...
  }
}

如何转换成hooks写法？

export const MyComponent = EnhanceConnect((state: any) => ({
  global: state['@global'].data
}))((props: IProps) => {
  useEffect(() => {
    // ...
  })
})

结语

本文详细讲述了类装饰器，方法装饰器，属性装饰器，存取器装饰器，参数装饰器这五种装饰器的基本用法及注意事项；此外还针对装饰器优先级进行了排序及证明；最后介绍了装饰器工厂即装饰器的实际应用场景兼容方法。

感谢你的阅读，希望文章能对你有帮助，有任何问题欢迎留言私信，请别忘了给作者点个赞哦，感谢~

TypeScript（八）装饰器

前言

本文收录于TypeScript知识总结系列文章，欢迎指正！

定义

类装饰器

基本用法

操作方式

操作类的原型

类继承操作

方法装饰器

属性装饰器

存取器装饰器

参数装饰器

基本用法

参数过滤器

元数据函数实现

参数过滤

效果实践

装饰器优先级

相同装饰器

不同装饰器

装饰器工厂

hooks与class兼容

结语

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

TypeScript（八）装饰器

前言

本文收录于TypeScript知识总结系列文章，欢迎指正！

定义

类装饰器

基本用法

操作方式

操作类的原型

类继承操作

方法装饰器

属性装饰器

存取器装饰器

参数装饰器

基本用法

参数过滤器

元数据函数实现

参数过滤

效果实践

装饰器优先级

相同装饰器

不同装饰器

装饰器工厂

hooks与class兼容

结语

热门文章

最新文章

相关电子书