第十章 TypeScript装饰器的介绍和使用

image.png

  • 注意 : 装饰器目前是一项实验性特性,在未来的版本中可能会发生改变
  • 装饰器一般使用在以下几个地方
    • 类属性
    • 类方法
    • 类方法的参数
    • 通过这些我们也能看得出来,其实说白了,就是在类中会使用到装饰器
  • 装饰器的意义 :
    • 说白了,装饰器就是一个方法,可以注入到 类,属性,方法 中对其进行一些扩展
    • 让我们的一个类变得更加的多样化,更加的完善

一、类装饰器

  • 其实就是自己书写一个方法,对一个类进行扩展
// 准备一个装饰器函数
function fn(params: any) {
  // params 就是将来 fn 去装饰的类
  params.prototype.name = 'Jack'
  params.prototype.sayHi = function () { console.log('hello world') } 
}
  • 我们就可以在定义这个类的时候,使用 fn 方法对其进行装饰
@fn
  class Person {
    constructor () {}
  }

// 使用 Person 类去创建实例
// 在创建的时候,会先执行一遍 fn 装饰器函数
const user = new Person()
console.log(user.name) // 'Jack'
user.sayHi() // 'hello world'
  • 看似好像没有什么用处
  • 其实装饰器主要的作用就是在类的原型上去扩展一些方法
  • 来看一个例子吧

原始形态

class Person {
  constructor () {}
  play () {}
  study () {}
  sleep () {}
}
class Student {
  constructor () {}
  play () {}
  study () {}
  sleep () {}
}
class Teacher {
  constructor () {}
  play () {}
  study () {}
  sleep () {}
}
  • 我们发现每一个类里面都会有一个 play 一个 study 一个 sleep 方法
  • 这个时候,我们就是在重复的书写代码
  • 我们这个时候就想到一个内容,叫做继承

继承实现

class People {
  constructor () {}
  play () {}
  study () {}
  sleep () {}
}
// 每次定义其他类的时候进行继承
class Student extends People {}
class Person extends People {}
class Teacher extends People {}
  • 我们发现效果是可以实现的

装饰器实现

function fn(params: any) {
  params.prototype.play = function () {}
  params.prototype.study = function () {}
  params.prototype.sleep = function () {}
}

@fn
  class Student {}

@fn
  class Person {}

@fn
  class Teacher {}
  • 同样的内容,我们用装饰器也可以实现,我们发现和继承没有什么区别
  • 但是,我们如果用装饰器实现的话,可以通过装饰器,把不同的内容分开,实现更加灵活
function addPlay(params: any) {
  params.prototype.play = function () {}
}
function addStudy(params: any) {
  params.prototype.study = function () {}
}
function addSleep(params: any) {
  params.prototype.sleep = function () {}
}

// 扩展 study 和 sleep
@addStudy
  @addSleep
  class Student {}

// 扩展 play 和 sleep
@addPlay
  @addSleep
  class Person {}

// 扩展 play 和 study
@addPlay
  @addStudy
  class Teacher {}
  • 这样看起来是不是灵活了很多呢

二、类属性装饰器

  • 顾名思义,就是用来对于类里面属性的扩展
  • 注意 : 可以修改属性的值,但是不能修改该属性的类型限制
// fn 函数用来生成装饰器函数
// 目的: 为了将来使用装饰器的时候可以传递参数
function formatTime(time: Date) {
  // 把这个返回值函数当做装饰器函数
  return function (params: any, key: string) {
    // params 就是将来 fn 去装饰的类
    // key 就是你想修改的属性
    // 做一个简单的格式化时间的逻辑
    let timeStr = `${ time.getFullYear() }-${ time.getMonth() + 1 }-${ time.getDate() }`
    Object.defineProperty(params, key, {
      value: timeStr
    })
  }
}


// 创建一个类
class Student {
  // 在创建属性的时候直接对该属性进行赋值
  @formatTime(new Date(1652500063190))
  time: string

  constructor () {}
}

const s1 = new Student()
console.log(s1.time) // '2022-5-14'
  • 这样我们在定义类的时候,可以根据装饰器对于某些属性进行修饰

三、类方法的装饰器

  • 同样的,我们的方法装饰器就是用来对方法进行一些修饰
// 利用 fn 做一个装饰器工厂
// 目的: 还是要在使用装饰器的时候可以接受参数
function fn(x: string, y: number) {
  // 返回一个真实的装饰器函数
  return function (params: any, name: string, descriptor:TypedPropertyDescriptor<Function>) {
    // params 接受的就是当前类的实例的原型
    // name 接受的就是你要修饰的函数名
    // descriptor 接受的是一个当前函数的描述对象, 是一个数据劫持形式(defineProperty)
    descriptor.value = function () {
      console.log(`我玩的是 ${ x }, 已经玩了 ${ y } 年了`)
    }
  }
}

// 不使用装饰器
class Student1 {
  play () {
    console.log('我喜欢玩的是 篮球, 足球, 羽毛球')
  }
}

const s1 = new Student1()
s1.play() // 我喜欢玩的是 篮球, 足球, 羽毛球

// 使用装饰器
class Student2 {
  @fn('TS', 3)
  play () {
    console.log('我喜欢玩的是 篮球, 足球, 羽毛球')
  }
}

const s2 = new Student2()
s2.play() // 我玩的是 TS, 已经玩了 3 年了
  • 这里其实就是利用装饰器把函数给换掉了

四、类方法的参数装饰器

  • 这种装饰器就是用来修饰类身上的方法中的参数的
// 依旧是我书写的装饰器工厂
function fn(n: any) {
  console.log('n : ', n)
  return function (params: any, name: string, index: number) {
    // params 接受的是当前的原型
    // name: 函数名
    // index: 索引位置
    // 查看函数实参的个数
    console.log('length : ', params[name].length)
  }
}
  • 注意
    • 只能做监控参数是否传递,没办法修改
    • 必须要使用装饰器工厂形式
    • 因为目前的装饰器机制还不是很完善
class Student {
  play (
    // 修饰参数, 就放在参数的前面
    @fn(20)
    n: number
  ) {
    console.log('play 内的 n : ', n)
  }
}

const s1 = new Student()
s1.play(100)
  • 输出结果
n :  20
length : 1
'play 内的 n' : 100
  • 说白了,各种装饰器就是对对应的内容进行一些修饰而已
  • 目前还没有那么完善,期待后期 TS 的更新和完善
  • 我相信完善以后的装饰器会是非常强大的存在
  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

杨树林er

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值