最近在捣鼓Typescript的装饰器,NodeJs项目的装饰器比较好理解,但是React项目的装饰器由于有JSX,走了一点弯路,但是总之来说是新技能get
typescript对装饰器的说明
装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。
装饰器为我们提供了运行时修改数据
的能力。
React例子
Parent.tsx
1 | @Component |
Component装饰器
1 | function Component<T extends { new(...args: any[]): any }>(component: T) { // 泛型限定 |
点击渲染之后的parent
字符,可以看到劫持成功
项目地址
结论
本文写的只是比较简单的装饰器用法,但是可以基于此文的原来来开发如登录后才能访问的组件
之类的装饰器,将业务逻辑更好的组织起来。
对TS有兴趣的伙伴可以加我微信交流~