本文将介绍 npm 包 babel-plugin-transform-decorators-typescript 的使用教程，这是一个非常有用的包，可以帮助我们在 TypeScript 中使用装饰器。
装饰器
在介绍如何使用这个 npm 包之前，我们需要先了解一下装饰器。装饰器是一种特殊的语法，用于给类或成员添加额外的功能或修改行为。它们可以在类、方法、属性和参数上使用。
装饰器使用 @ 符号来表示，常见的装饰器有 @Component、@Injectable、@ViewChild 等。
安装包
在使用 npm 包 babel-plugin-transform-decorators-typescript 之前，需要先安装 babel-core 和 babel-plugin-syntax-decorators 这两个包。
npm install --save-dev babel-core babel-plugin-syntax-decorators
接着安装 babel-plugin-transform-decorators-typescript：
npm install --save-dev babel-plugin-transform-decorators-typescript
配置 Babel
安装完成后，我们需要在 Babel 的配置文件中添加对该插件的引用。如果没有 Babel 配置文件，可以手动创建一个 .babelrc 文件。
{
"plugins": [
"syntax-decorators",
["transform-decorators-typescript", {
"legacy": true
}]
]
}其中，syntax-decorators 插件是必须的，因为它是使得 Babel 能够识别装饰器语法的基础。
还需要注意的是，这里添加了一个名为 legacy 的配置项。它的作用是使得该插件能够兼容 TypeScript 的装饰器实现。如果不设置该配置项，可能会有一些不兼容的情况出现。
示例代码
以下是一个使用装饰器的示例代码：
@Component
class AppComponent implements OnInit {
@Input() username: string;
ngOnInit() {
console.log(this.username);
}
}在这个示例代码中，我们使用了 @Component 装饰器来声明一个组件，使用 @Input 装饰器来声明一个输入属性。
总结
到这里，我们就学会了如何使用 npm 包 babel-plugin-transform-decorators-typescript 来使用 TypeScript 装饰器。如果在实际项目中使用该插件，可以大大提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560b181e8991b448def38