TypeScript 中装饰器的原理

本篇文章将介绍方法装饰器的使用实例，来讲解TypeScript中装饰器的原理。

定义方法装饰器

该方法装饰器用于修饰方法，并对方法进行异常捕获。

// target: 类原型
// key: 装饰器修饰的方法名
// descriptor: 装饰器修饰的方法原型

function catchError(target: any, key: string, descriptor: PropertyDescriptor) {
  // 类方法的引用
  const fn = descriptor.value
  // 对类的原型进行修改: 捕获异常
  descriptor.value = function () {
    try {
      return fn()
    } catch (error) {
      console.log(error)
    }
  }
}

class Test6 {
  @catchError
  getName() {
    return 'jake lee'
  }
  @catchError
  getAge() {
    return 12
  }
}

const test6 = new Test6()
console.log(test6.getName())
console.log(test6.getAge())

打印日志：

定制方法异常信息

在上面装饰器基础上再进行封装，可以对异常日志进行定制。

const userInfo:any = undefined
// target: 类原型
// key: 装饰器修饰的方法名
// descriptor: 装饰器修饰的方法原型

function catchError(msg:string) {
  return function(target: any, key: string, descriptor: PropertyDescriptor) {
    // 类方法的引用
    const fn = descriptor.value
    // 对类的原型进行修改: 捕获异常
    descriptor.value = function () {
      try {
        return fn()
      } catch (error) {
        console.log(msg)
      }
    }
  }
}

class Test6 {
  // 传入不同的日志信息
  @catchError('userName不存在')
  getName() {
    return userInfo.userName
  }
  // 传入不同的日志信息
  @catchError('userInfo.age不存在')
  getAge() {
    return userInfo.age
  }
}

const test6 = new Test6()
test6.getName()
test6.getAge()

输出日志：

通过此装饰器实例的介绍，说明了使用装饰器可以达到方法复用，可以对方法进行变更。