TypeScript入门之装饰器-阿里云开发者社区

TypeScript入门之装饰器

2023-04-27 100

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 装饰器

简介

装饰器是一种特殊类型的声明，它能够被附加到类声明、方法、属性或参数上，可以修改类的行为。

使用@装饰器需要把 tsconfig.json 的 experimentalDecorators 字段设置为 true。

装饰器类型

在 TypeScript 里，主要有类装饰器、方法装饰器、属性装饰器、参数装饰器。

类装饰器

类装饰器定义在类上面。类装饰器运行是在类初始化的时候。

类装饰器的参数只有一个，参数是类本身。

比如，我们声明一个函数 addAge 去给 Class 的属性 age 添加年龄.

function addAge(constructor: Function) {
  constructor.prototype.age = 18;
}

@addAge
class Person{
  name: string;
  age!: number;
  constructor() {
    this.name = 'randy';
  }
}

let person = new Person();

console.log(person.age); // 18

所以这段代码实际上基本等同于：

Person = addAge(function Person() { ... });

constructor.prototype.age 就是在类原型上添加了age属性并赋值18。这样我们通过类Person实例化出来的每个对象都会有age属性，并且值为18。

属性/方法装饰器

实际上一个Class的属性/方法也可以被装饰，我们分别给 Person 类加上 say 和 run 方法。

属性/方法装饰器运行是在类初始化的时候。

// 声明装饰器修饰方法
function method(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
   console.log(target);
   console.log("prop " + propertyKey);
   console.log("desc " + JSON.stringify(descriptor) + "\n\n");
   descriptor.writable = false;
};

// 声明装饰器修饰属性
function prop(target: any, key: string): any {
  console.log(target);
  console.log("prop " + key);
  const descriptor: PropertyDescriptor = {
    writable: true,
    configurable: true,
    enumerable: true,
    value: "jack",
  };
  
  return descriptor;
}

// 类
class Person{
  @prop
  name: string;
  constructor() {
    this.name = 'randy';
  }

  @method
  say(){
    return 'instance method';
  }

  @method
  static run(){
    return 'static method';
  }
}

普通函数和静态函数参数是有区别的。

普通函数的装饰器接收的参数第一个是类的原型第二个是方法名第三个是修饰符。
static 函数的装饰器接收的参数第一个是类本身第二个是方法名第三个是修饰符。

属性的装饰器接收的参数第一个是类的原型第二个是属性名。

属性的装饰器可以返回属性描述符来描述该属性。

如果还不清楚Object相关API的可以看看笔者前面写的JS Object API详解这篇文章。

访问器属性getter或者setter同样可以用属性装饰器修饰，这里笔者就不再细说了。

参数装饰器

参数装饰器，顾名思义是用于修饰参数的装饰器。

function logParameter(target: Object, propertyKey: string, index: number) {
  console.log(target, propertyKey, index);
}

class Person {
  greet(@logParameter message: string, @logParameter name: string): string {
    return `${message} ${name}`;
  }
}
const p = new Person();
p.greet('hello', 'randy');

// Person { greet: [Function] } greet 1
// Person { greet: [Function] } greet 0

我们看到参数装饰器需要三个参数 target、propertyKey、index：