关于前端:一文说明TypeScript-的装饰器

●装璜器 (Decorators)
●留神 : 装璜器目前是一项实验性个性，在将来的版本中可能会产生扭转

●装璜器个别应用在以下几个中央
○类
○类属性
○类办法
○类办法的参数
○通过这些咱们也能看得出来, 其实说白了, 就是在类中会应用到装璜器
●装璜器的意义 :
○说白了, 装璜器就是一个办法, 能够注入到 类, 属性, 办法 中对其进行一些扩大
○让咱们的一个类变得更加的多样化, 更加的欠缺

类装璜器
●其实就是本人书写一个办法, 对一个类进行扩大

// 筹备一个装璜器函数
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 的更新和欠缺
●我置信欠缺当前的装璜器会是十分弱小的存在