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

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

简介

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

使用@装饰器需要把 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