@babel/babel-plugin-proposal-decorators的使用

@babel/plugin-proposal-decorators

安装

npm install -D @babel/plugin-proposal-decorators

注: 为了让vscode 支持decorator语法, 需要在tsconfig.ts中进行如下设置

{
	"experimentalDecorators": true,
}

作用

插件会支持类的装饰器语法, 包括类装饰器, 属性装饰器, 方法装饰器

参数

decoratorsBeforeExport

boolean, 默认是false
export 语法是否在装饰器之前

// decoratorsBeforeExport: false
export @decorator class A {}

// decoratorsBeforeExport: true
@decorator
export class A {}

legacy

boolean, 默认是false
同插件**@babel/plugin-proposal-class-properties的参数legacy**的配置相同, 两个插件一般连着用, 配置如下

{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose" : true }]
  ]
}

功能

源码

function isTestable(value: boolean) {
  return function decorator(target: any) {
    target.isTestable = value;
  };
}
@isTestable(true)
class MyClass {}

编译后得效果

var _dec, _class;
function isTestable(value) {
  return function decorator(target) {
    target.isTestable = value;
  };
}
let MyClass =
  ((_dec = isTestable(true)), _dec((_class = class MyClass {})) || _class);

其他

关于装饰器, 请查看阮一峰的装饰器讲解