【typescript】TS编写和使用装饰器之（四）：属性装饰器

小孟js

已于 2022-04-18 16:45:35 修改

阅读量1.6k

点赞数 1

分类专栏： Typescript 文章标签： typescript javascript 前端

于 2022-04-14 10:10:58 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39576711/article/details/124165139

版权

Typescript 专栏收录该内容

6 篇文章

订阅专栏

接着上一篇，咱们来介绍ts的属性装饰器。ts的安装和使用请看：TS编写和使用装饰器之（一）：类装饰器。

属性装饰器声明在一个属性声明之前（紧靠着属性声明）。属性装饰器不能用在声明文件中（.d.ts），或者任何外部上下文（比如 declare的类）里。

属性装饰器表达式会在运行时当作函数被调用，传入下列2个参数：

1.对于静态成员来说是类的构造函数，对于实例成员是类的原型对象。
2.成员的名字。
注意  属性描述符不会做为参数传入属性装饰器，这与TypeScript是如何初始化属性装饰器的有关。
因为目前没有办法在定义一个原型对象的成员时描述一个实例属性，并且没办法监视或修改一个属性的初始化方法。
返回值也会被忽略。因此，属性描述符只能用来监视类中是否声明了某个名字的属性。

下面来看示例，咱们用属性装饰器写一个格式化时间戳的装饰器：

function formatTime(formayStr:string/**需要的格式*/,timeTamp:number/**时间戳*/){
    let date = new Date(timeTamp)
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let day = date.getDate()
    //这里只做一个年月日的示例，时分秒省略
    return function (target:any,key:string):any{
        switch (formayStr) {
            case "yyyy-MM-dd" : {
                target[key] =  year + "-" + (month > 9?month:'0'+month)+ "-" + (day > 9?day:'0'+day)
            }
        }
    }
}

class ProTest {
    @formatTime("yyyy-MM-dd",new Date().getTime())
    date?:string
    
    constructor(){
    }
    
    getDate(){
        return this.date
    }
}

let p = new ProTest()
console.log(p.date);
console.log(p.getDate())
//>>2022-04-14
//>>2022-04-14