Ts Decorator装饰

博主：迷途橘
发布时间：2022 年 02 月 24 日
54 次浏览
暂无评论
1197字数
分类： ts

Decorator装饰，顾名思义，是为类或者方法进行拓展，比如定义Car类，我们想为这个车装上一个音乐播放器或者喷气式发动机~  开玩笑

## 类装饰器

```ts
const zs:ClassDecorator = (target: Function) => {
    target.prototype.name = '🐎'
    target.prototype.song = () => {
        console.log('唱歌')
    }
}

@zs
class  Decorator {
}

const decorator  = new Decorator()

console.log(decorator.name)
console.log((<any>decorator).song())
```

解决直接调用爆红的三种方法,或者直接在类里用 public 定义一下

```ts
console.log((decorator as any).name)
console.log((<any>decorator).name)
console.log(decorator['name'])
```

## 装饰工厂

```ts
const zs = (name):ClassDecorator => {
   return (target: Function):void => {
       target.prototype.name = name
   }
}

@zs('🐖')
class  Decorator {
}

const decorator  = new Decorator()
console.log((<any>decorator).name)
```

## 函数装饰

```ts
const zs:MethodDecorator = (target: Object, propertyKey: string | symbol, descriptor: PropertyDescriptor) => {
   descriptor.value = () => {
       console.log('🐕')
   }
}

class  Decorator {
    @zs
    public song() {

}
}

new Decorator().song()
```

## 写法解析

```ts
@zs
class  Decorator {
}
```

相当于

```ts
class  Decorator {
}
zs(Decorator )
```

最后修改：2022 年 12 月 07 日