Typescript 装饰器概念学习日记

共计 1030 个字符，预计需要花费 3 分钟才能阅读完成。

初次了解装饰器，是在阅读现有开源项目的 nest js 后端代码部分接触到的。因其形态使用上像极了 JAVA 的注解.。而在学习 Java 时也对注解这个东西比较好奇，在好奇心驱使下，我专门学习 装饰器的概念。

初体验

装饰器的概念是 Typescript 语言中的语法。装饰器 本质是函数。

@addMethod()
class foo {a = 1}

我们通过定义这个函数 addMethod，并且 其有一些参数返回给我们以操作目标类以及其成员 的能力。

比如，我们看一下方法 addMethod 的具体实现

function addMethod() {return (target:any) => { 
     // target 代表目标类的原型
     target['myFun'] = () =>{console.log('你好')

      }

    }
}

此时，类 foo 原型上 就有了一个方法 myFun，调用它，(new foo).myFun 就会打印 你好。

显然，@addMethod 方法 的参数给了我们能够重写类甚至覆盖 目标类的能力。

分类

按照文档，且由于 TS 的装饰器概念是为类服务的，且装饰器也只能在类及其成员上应用。所以，装饰器在前端 并不常用。这是因为 主流框架 Vue / React 已经不再使用类来声明组件，它们现在主流是函数组件。

而在后端，nest，前端的 angular 框架 则大量使用装饰器这一概念。

由此，装饰器 有这些分类：

1. 类装饰器
2. 方法装饰器
3. 属性装饰器
4. 参数装饰器

顾名思义，它们是应用在类的不同成员上的。如此，它们的入参也有所不同

1. 类装饰器

入参只有一个

return (target:any) =>{.../}

target 作为类的原型

2. 方法装饰器

入参有三个

return (target:any,identifyName:string,descriptor) => {.../}

分别是，类原型，方法名，属性描述符。其中属性描述符 与 对象属性描述符类似，但其行为与默认值方面会有所不同

3. 访问符描述符

入参与方法装饰器的入参一致。

4. 属性装饰器

入参有两个

return (target:any,identifyName:any) =>{target[identifyName] = 'hello xe'
}

类原型，属性名

5. 参数装饰器

入参有三个，类的原型 、 参数名 与参数在函数参数中的索引值（即第几个参数）

return (target:any,identifyName,index) => {.../}

总结

通过以上概念，我们目前已经可以手写一些装饰器来使用，当然 对于更全面理解 装饰器还有一段距离。

未完待续。。。