一文搞懂typescript的装饰器

最新推荐文章于 2024-04-30 15:54:41 发布
最新推荐文章于 2024-04-30 15:54:41 发布
阅读量4.5k 收藏 14
点赞数 4
分类专栏： javascript 文章标签： node javascript typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuangshp128/article/details/98489691
版权

装饰器是一种特殊类型的声明，它能够附加到类、类的函数、类属性、类函数的参数上，以达到修改类的行为，主要是面向切片编程思维

一、装饰器的分类

  • 1、根据装饰器的位置

    • 类装饰器
    • 类函数装饰器
    • 类属性装饰器
    • 类函数参数装饰器

  • 2、根据装饰器是否有参数

    • 无参装饰器(一般装饰器)
    • 有参装饰器(装饰器工厂)

二、基础环境的搭建

  • 1、创建一个文件夹并且初始化

    tsc --init

  • 2、配置tsconfig.json文件

    {
  "compilerOptions": {
    // 打开装饰器
    "experimentalDecorators": true
  }
}

三、关于几种装饰器的参数

  • 1、类装饰器

    • 参数就是类本身
    function ClsDes(args: string): ClassDecorator {
  return (target: object) => {
    console.log(args, target);
  }
}

  • 2、类方法装饰器

    • 第一个参数是类本身
    • 第二个参数是被装饰的方法名
    • 第三个参数是属性描述符
    function funDesc(args: string): MethodDecorator {
  return (target: object, methodName: string | symbol, desc: TypedPropertyDescriptor<any>  ) => {
    console.log(target, methodName, desc);
  }
}

  • 3、类方法参数装饰器

    • 第一个参数是类本身
    • 第二个参数是被装饰的函数名
    • 第三个参数是参数在方法中的位置
    function test1(args: string): ParameterDecorator {
  return (target: object, methodName: string | symbol, index: number) => {
    console.log(target, methodName, index, args);
  }
}

  • 4、属性装饰器

    • 第一个参数是类本身
    • 第二个参数是被装饰的属性名
    function argDec(args: string):PropertyDecorator {
  return (target: object, name: string | symbol) => {
    console.log(args, target, name);
  }
}

class Person1 {
  @argDec('hello')
  name: string

  constructor (name: string) {
    this.name = name;
  }
}

四、类的装饰器

  • 1、类装饰器的写法

    function desc(target) {
  console.log('---------------类的装饰器参数 start------------------');
  console.log(target); // 输出 [Function: Person]表示当前装饰的类
  console.log('---------------类的装饰器参数 end------------------');
}

@desc // 使用装饰器
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let p = new Person('哈哈', 20);

  • 2、使用类的装饰器扩展类的属性和方法

    function desc(target) {
  console.log('---------------类的装饰器参数 start------------------');
  console.log(target);
  console.log('---------------类的装饰器参数 end------------------');
  return class extends target{ // 在react高阶组件中经常看到这种写法
    gender = '男';
    say() {
      console.log(this.name, this.age, this.gender);
    }
  }
}

@desc
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let p = new Person('哈哈', 20);
console.log(p);
p.say();

/*
---------------类的装饰器参数 start------------------
[Function: Person]
---------------类的装饰器参数 end------------------
class_1 { name: '哈哈', age: 20, gender: '男' }
哈哈 20 男
*/

  • 3、使用装饰器修改类的构造函数(构造函数的重载、方法重载)

    function desc(target) {
  return class extends target{
    name = '我是重载后的';
    sayHell() {
      console.log('我是重载后的', this.name);
    }
  }
}

@desc
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor() {
    this.name = '哈哈';
    this.age = 20;
  }

  sayHell() {
    console.log('hello word', this.name);
  }
}

let p = new Person();
console.log(p);
p.sayHell();

  • 4、装饰器工厂的写法(外部传递参数)

    function desc(params: string) {
  return function (targe: any) {
    console.log('---------------参数说明 start------------------');
    console.log('params', params);
    console.log('target', targe);
    console.log('---------------参数说明 end------------------');
    // 直接在原型上扩展一个属性
    targe.prototype.apiUrl = params;
  }
}

@desc('http://www.baidu.com')
class P {
  say() {
    console.log('说话')
  }
}

let p:any = new P();
console.log(p.apiUrl);

五、类函数装饰器

它应用到方法上，可以用来监视、修改、替换该方法

  • 1、定义方式

    function desc(target, key, descriptor) {
  console.log('---------------类的装饰器参数 start------------------');
  console.log('target', target); // Person { say: [Function] } 表示类的原型
  console.log('key', key); // 被装饰的函数名
  console.log('descriptor', descriptor); // 被装饰的函数的对象属性
  console.log('---------------类的装饰器参数 end------------------');
}

  • 2、使用

    class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  @desc
  say() {
    console.log('说的方法')
  }
}

  • 3、在装饰器中添加类的原型属性和原型方法

    function desc(target, key, descriptor) {
  target.gender = '男';
  target.foo = function () {
    console.log('我是原型上的方法')
  }
}

// 测试代码
let p = new Person('哈哈', 20);
console.log(p);
console.log(Person.prototype);
p.say();
console.log(p.gender); // 使用p原型链上的属性
p.foo() // 调用了p原型链上的方法

  • 4、使用装饰器拦截函数的调用(替换)

    function desc(params: string) {
  return function (target: any, key: string, descriptor: {[propsName: string]: any}) {
    // 修改被装饰的函数的
    let method = descriptor.value;
    descriptor.value = function (...args: Array<any>) {
      args = args.map(it => String(it));
      console.log(args);
      // method.apply(this, args);
    }
  }
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  @desc('装饰器上的参数')
  say() {
    console.log('说的方法')
  }
}


let p = new Person('哈哈', 20);
console.log(p);
p.say(123, 23, '你好');

  • 5、使用装饰器拦截函数的调用(附加新的功能)

    function desc(params: string) {
  return function (target: any, key: string, descriptor: {[propsName: string]: any}) {
    // 修改被装饰的函数的
    let method = descriptor.value;
    descriptor.value = function (...args: Array<any>) {
      args = args.map(it => String(it));
      console.log(args);
      method.apply(this, args);
    }
  }
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  @desc('装饰器上的参数')
  say(...args) {
    console.log('说的方法', args)
  }
}


let p = new Person('哈哈', 20);
console.log(p);
p.say(123, 23, '你好');

六、类属性装饰器

  • 1、定义方式

    function desc(target, name) {
  console.log('---------------类属性装饰器的参数 start------------------');
  console.log('target', target, target.constructor); // 表示类的原型
  console.log('name', name); // 表示被装饰属性名
  console.log('---------------类属性装饰器的参数 end------------------');
}


class Person {
  public name: string | undefined;
  public age: number | 0;

  @desc
  private gender: string | undefined;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let p = new Person('哈哈', 20);
console.log(p);

  • 2、在装饰器中修改属性值

    function desc(target, name) {
  target[name] = '女';
}


class Person {
  public name: string | undefined;
  public age: number | 0;

  @desc
  public gender: string | undefined;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  say() {
    console.log(this.name, this.age, this.gender);
  }
}

let p = new Person('哈哈', 20);
console.log(p);
p.say();

七、类函数参数的装饰器

参数装饰器表达式会在运行时候当做函数被调用，以使用参数装饰器为类的原型上附加一些元数据

  • 1、使用方式

    function desc(params: string) {
  return function (target: any, key, index) {
    console.log('---------------参数装饰器 start------------------');
    console.log(target); // 类的原型
    console.log(key); // 被装饰的名字
    console.log(index); // 序列化
    console.log('---------------参数装饰器 end------------------');
  } 
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  say(@desc('参数装饰器') age: number) {
    console.log('说的方法')
  }
}

let p = new Person('哈哈', 20);
console.log(p);
p.say(20);

  • 2、为类的原型上添加一些东西

    function desc(params: string) {
  return function (target: any, key, index) {
    console.log('---------------参数装饰器 start------------------');
    console.log(target); // 类的原型
    console.log(key); // 被装饰的名字
    console.log(index); // 序列化
    target.message = params;
    console.log('---------------参数装饰器 end------------------');
  } 
}
class Person {
  public name: string | undefined;
  public age: number | 0;

  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  say(@desc('参数装饰器') age: number) {
    console.log('说的方法')
  }
}


let p: any = new Person('哈哈', 20);
console.log(p);
p.say(20);
console.log(p.message)

八、几种装饰器的执行顺序

  • 1、测试代码

    function logCls(params: string) {
  return function (target: any) {
    console.log('4.类的装饰器');
  }
}

function logMehod(params: string) {
  return function (target: any, key: string, descriptor: {[propsName: string]: any}) {
    console.log('3.类的函数装饰器');
  }
}

function logParams(params: string) {
  return function (target: any, name: string) {
    console.log('1.类属性装饰器');
  }
}

function logQuery(params: string) {
  return function (target: any, key: string, index: number) {
    console.log('2.函数参数装饰器');
  }
}

@logCls('类的装饰器')
class Person{
  @logParams('属性装饰器')
  public name: string | undefined;

  @logMehod('函数装饰器')
  getData(@logQuery('函数参数装饰器') age: number, @logQuery('函数参数装饰器') gender: string) {
    console.log('----');
  }
}

  • 2、运行结果

    1.类属性装饰器
2.函数参数装饰器
3.类的函数装饰器
4.类的装饰器

九、结合Reflect Metadata在项目中开发

Reflect Metadata 是 ES7 的一个提案，它主要用来在声明的时候添加和读取元数据。TypeScript在 1.5+ 的版本已经支持它，你只需要安装依赖包，并且在tsconfig.json中开启配置

安装依赖包

npm i reflect-metadata --save

在tsconfig.json中开启配置

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
  }
}

  • 1、基本使用

    import 'reflect-metadata';

const IN_CLASS = 'inClass';
const in_METHOD = 'inMethod';

@Reflect.metadata(IN_CLASS, 'A')
class Test {
  @Reflect.metadata(in_METHOD, 'B')
  public hello(): string {
    return 'hello world';
  }
}

console.log(Reflect.getMetadata(IN_CLASS, Test)); // 'A'
console.log(Reflect.getMetadata(in_METHOD, new Test(), 'hello')); // 'B'

  • 2、自定义metadataKey

    function classDecorator(): ClassDecorator {
  return target => {
    // 在类上定义元数据，key 为 `classMetaData`，value 为 `a`
    Reflect.defineMetadata('classMetaData', 'a', target);
  };
}

function methodDecorator(): MethodDecorator {
  return (target, key, descriptor) => {
    // 在类的原型属性 'someMethod' 上定义元数据，key 为 `methodMetaData`，value 为 `b`
    Reflect.defineMetadata('methodMetaData', 'b', target, key);
  };
}

@classDecorator()
class SomeClass {
  @methodDecorator()
  someMethod() {}
}

Reflect.getMetadata('classMetaData', SomeClass); // 'a'
Reflect.getMetadata('methodMetaData', new SomeClass(), 'someMethod'); // 'b'
水痕01
关注
  • 4
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
TypeScript之装饰器
Ming_xm的博客
11-02 365
后面的使用场景中，借助装饰器的特性，除了提高可读性之后，针对已经存在的类，可以通过装饰器的特性，在不改变原有代码情况下，对原来功能进行扩展。装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。上述可以看到，当装饰器作为修饰类的时候，会把构造器传递进去。同样的，本质也不是什么高大上的结构，就是一个普通的函数，的三个参数，如果是类的属性，则没有传递第三个参数。是一个实验性特性，若要使用，需要在。
5.typescript装饰器
m0_55967670的博客
05-11 201
装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或者参数上，
typescript装饰器
最新发布
wubeidangziqiang的博客
04-30 478
在语法上，装饰器有如下几个特征。第一个字符（或者说前缀）是 ，后面是一个表达式 后面的表达式，必须是一个函数（或者执行后可以得到一个函数）。这个函数接受所修饰对象的一些相关值作为参数。这个函数要么不返回值，要么返回一个新对象取代所修饰的目标对象。装饰器有多种形式，基本上只要在 符号后面添加表达式都是可以的。下面都是合法的装饰器。 @myFunc @myFuncFactory(arg1, arg2) ​ @libraryModule.prop @someObj.method(123) ​ @(wrap(di
TypeScript 的装饰器有哪些？
fe_watermelon的博客
09-18 453
总的看来，TS 装饰器可以在类上加一些标记，然后对应的装饰器就能拿到必要的信息（类的原型、方法名、描述符等），然后就可以做一些代理、记录信息的功能增强。TS 装饰器最后编译成的 JS 会丢掉这些装饰器标记，本质其实是语法糖。我是前端西瓜哥，欢迎关注我，学习更多前端知识。
TypeScript 自定义装饰器
Nodejs
06-11 2457
装饰器一种更现代的代码模式，通过使用@的形式注入在属性，寄存器，方法，方法参数和类中，比如在Angular，Nestjs和midway等流行框架中也都用到了装饰器。由于Reflect.decorate装饰器反射机制还不支持，且相关资料较少，所以在本文中不进行深入研究。装饰器目前已经在阶段3，相信不久的将来，js中也会支持装饰器。Stage 0 - 设想（Strawman）：只是一个想法，可能有 Babel插件。Stage 3 - 候选（Candidate）：完成规范并在浏览器上初步实现。
面试题-TS(八)：什么是装饰器（decorators）？如何在 TypeScript 中使用它们？
weixin_42560424的博客
07-25 2072
在TypeScript中，装饰器（Decorators）是一种用于增强代码功能的特殊类型声明。装饰器提供了一种在类、方法、属性等代码元素上注释或修改的方式，使得我们可以通过装饰器来扩展、修改或监视代码的行为。通过使用装饰器，我们可以在不修改原始代码的情况下，给代码添加新的功能，提高代码的可维护性和灵活性。装饰器是一种特殊类型的声明，它以符号为前缀，后跟一个表达式，通常是一个函数。装饰器可以附着在类、方法、属性等代码元素上，并在运行时对这些元素进行注释或修改。类装饰器：装饰类的声明。
Vue框架TypeScript装饰器使用指南小结
10-17
主要介绍了Vue框架TypeScript装饰器使用指南小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
【JavaScript源代码】一文搞懂TypeScript的安装、使用、自动编译的教程.docx
12-29
一文搞懂TypeScript的安装、使用、自动编译的教程 　1. 初识 TypeScript　上篇文章给大家介绍过TypeScript的安装、使用、自动编译的实现 需要的朋友点击查看。　TypeScript 是一种由微软开发的开源、跨平台的编程...
vue中typescript装饰器的使用方法超实用教程
12-02
VueConf ，尤大说， Vue 支持 Ts 了，网上关于 Vue + Ts 的资料有点少， 楼主踩了一个星期坑，终于摸明白了 修饰器 的玩法，下面我们就来玩下 Vue 的 decorator 吧 1，data 值的声明   在这里 public 声明的是公有...
overnight:ExpressJS服务器的TypeScript装饰器
05-02
ExpressJS Web服务器的TypeScript装饰器！ 它是什么 OvernightJS是一个简单的库，可为要调用Express路由的方法添加TypeScript装饰器。 它还包括一个用于管理json-web-token和打印日志的软件包。 特征 使用@...
一文讲清什么是TypeScript装饰器以及如何使用TypeScript装饰器
乐闻世界
12-23 1482
装饰器在 TypeScript 中的应用场景非常广泛，可以为我们提供强大的编程工具，如类装饰器、方法装饰器、属性装饰器、参数装饰器和访问器装饰器等，使得我们可以在编译阶段进行诸如日志记录、性能计算、参数验证等多种复杂的操作，使用这些装饰器，我们可以保持代码的整洁和解耦，使程序更易于理解和维护。
TypeScript装饰器
weixin_60376559的博客
01-31 449
TypeScript装饰器
TypeScript 装饰器：完整指南
我的博客，不一样的自我表达
06-11 196
属性描述符 Dead Simple Chat 提供 Javascript Chat API 和 SDK，可在几分钟内将应用内聊天添加到您的 React 应用程序。就像一个程序可能会依赖其他类的方法或属性一样，这可能是装饰器的一个用例，它们提供了一种维护代码并提高可读性的简单方法。然后我们记录一个之前的属性名称，然后我们调用该originalMethod函数，然后我们记录之后的属性名称。装饰器是很棒的功能，许多库都是由装饰器组成的，比如 react 和 angular。args属性接受 n 个参数。
Typescript - 装饰器
RequesToGod的博客
06-10 389
Typescript 装饰器上手简单案例。
Vue+Typescript+Express+Mongodb 短链接平台全栈开发实战
01-09
大喵将手把手带着大家，使用Vue-cli3.x脚手架工具、Typescript、Express、Mongodb、QRCode 等等工具，搭建我们的短链接平台，而且为了方便大家在vue项目学习使用Typescript，大喵在开发的时候，会首先使用vue+js开发一版这个平台；开发完成之后呢，我们再接着使用vue+ts这种方式，重新开一个项目，单独再对比JS版的项目开发一版TS的项目；这样呢，可以让大家对TS+VUE项目开发，有更加清楚的认识和理解，并且也可以给大家重构Vue+JS前端项目开发提供思路及基本路线；
TypeScript 中装饰器的理解
杨振洲的博客
09-10 269
定义 装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上 是一种在不改变原类和使用继承的情况下，动态地扩展对象功能 同样的，本质也不是什么高大上的结构，就是一个普通的函数，@expression 的形式其实是Object.defineProperty的语法糖 expression求值后必须也是一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入 使用方式 由于typescript是一个实验性特性，若要使用，需要在tsconfig.json文件启动，如下： { "co
typescript 装饰器
米斯特尔曾的博客
06-27 1310
类装饰器 function test() { return function(target: Function) { console.log(target); // 打印出类A的构造函数 } } @test() class A { data = 1; constructor(val: any) { console.log('v...
TypeScript基础总结
qq_41028725的博客
03-29 186
1.typescript下载 编译 npm install -g typescript 新建 index.ts 编译：tsc index.ts ; 会生成一个index.js文件 2.vsvode 配置自动编译ts文件 (1)tsc --init 生成一个tsconfig.json文件 (2)修改tsconfig.json中outDir为'./js' (3)Termin...
知乎 一文看懂 typescript
11-18
Typescript 是由微软开发的一种编程语言，它是 Javascript 的一个超集，可以在其基础上拓展更多的功能和特性。Typescript 主要解决了 Javascript 中的一些缺陷和不足，比如弱类型、无法进行静态类型检查等问题。使用 Typescript 可以让我们在开发大型复杂的应用时，更加容易管理，提高代码的可读性和维护性。 Typescript 引入了静态类型检查，可以在代码编写阶段发现潜在的错误，帮助开发者迅速发现和修复问题，避免在运行时出现意外的错误。另外，Typescript 还支持面向对象的特性，如接口、类、模块等，这些都使得代码更加规范和结构化。 另外，Typescript 还提供了更强大的工具支持，能够更好地进行代码自动补全、重构、错误提示和文档化等功能，大大提高了开发效率。同时，可以通过编译器将 Typescript 代码编译成普通的 Javascript 代码，从而可以在任何支持 Javascript 运行的地方使用，保证了代码的兼容性和可移植性。 总的来说，Typescript 是一种功能强大的编程语言，它继承了 Javascript 的灵活性和易用性，同时又解决了 Javascript 的一些常见问题，使得我们能够更加高效地编写、维护和扩展代码。因此，学习和掌握 Typescript 对于前端开发工程师来说是非常有益的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水痕01

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值