Typescript:在编译时在其自己的属性中获取类名 [英] Typescript: get class name in its own property at compile time
问题描述
例如,如果我们有一个这样的类:
For example if we have a class like this:
class MyClass {
className: string;
}
是否可以在编译时将'MyClass'分配给className属性?
Is it possible to get 'MyClass' assigned to className property at compile time?
已经尝试过this.constructor.name.但是,后者对缩小代码没有帮助.因此,当将打字稿代码编译为JS时,检查是否有一种捕获类名的方法.我正在使用angular-cli.
already tried this.constructor.name. However, latter doesnt help with minified code. Hence checking if there is a way to capture class name when typescript code is compiled to JS. I'm using angular-cli.
推荐答案
/其他答案
由于即使在丑化之后也需要原始类的实际名称,所以您将需要研究构建过程.
Since you need the actual name of the original class even after uglifying, you will need to look into your build process instead.
您说您使用angular-cli,该引擎在幕后使用UglifyJS进行丑化. UglifyJS支持用于保留原始类名的标志,甚至保留应忽略的类名白名单.具体来说,这就是您感兴趣的 mangler 部分.官方网站甚至提到它将使用Function.name
破坏代码.
You say you use angular-cli, which uses UglifyJS under the hood for uglifying. UglifyJS supports a flag for keeping the original Class names, or even a whitelist of class names that should be ignored. Specifically it is the mangler portion you are interested in. The official website even mentions it will break code using Function.name
.
您可以完全禁用重整,也可以专门禁用重整类名(或将某些类名列入白名单).我认为使用angular-cli(在webpack中可以)是不可能的,但是您要查找的标志是keep-classnames
或keep_fnames
.但是,angular-cli团队已表示多次如此精细的配置.
You can completely disable mangling, or you can specifically disable mangling class names (or white list certain class names). I don't think this is possible with angular-cli (in webpack you can), but the flag you are looking for is keep-classnames
or keep_fnames
. However, the angular-cli team has indicated multiple times it won't support configuration on this granular level.
那么看来您还有两个选择:
So then you have two options left it seems:
- 切换到完整的Webpack( ng弹出可以为您提供帮助)
- 硬编码类名
- switch to full webpack (ng eject can help you with this)
- hard code the class names
像这样:
class MyClass {
className = 'MyClass';
}
什么是ng弹出?引用 dave11mj的评论:
What is ng eject? Quoting dave11mj's comment:
ng弹出只是意味着您需要对Webpack进行一些比cli为ng build和ng serve等命令提供的命令更高级或自定义的操作.因此,它会生成一个webpack.config. js基于cli使用的配置,因此您可以进一步对其进行自定义.
ng eject simply means you need to do something a lot more advance or custom with webpack than what the cli provides for commands like ng build and ng serve .. So it generates a webpack.config.js based on the configurations that the cli uses, so that you can then customize it further.
因此,只要angular-cli本身不支持UglifyJS的配置,这听起来肯定是针对您的情况而
So it certainly sounds like it was made for your case as long as angular-cli doesn't natively support configuration for UglifyJS.
/原始答案(在禁用了UglifyJs的情况下仍然有用)
class MyClass {
className = this.constructor.name;
}
const instance = new MyClass();
console.info(instance.className); // yields "MyClass"
如果使用TypeScript> = 2.1,则类型string
由编译器推断.
If you use TypeScript >= 2.1, the type string
is inferred by the compiler.
无论如何,如果您有构造函数,也可以这样定义它,并完全省略显式字段(优先事项,两者的作用相同):
If you have a constructor anyway, you can also define it like this and omit the explicit field completely (matter of preference, both work the same):
class MyClass {
constructor(public className = this.constructor.name) {
(..)
}
}
这篇关于Typescript:在编译时在其自己的属性中获取类名的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!