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:

1. 切换到完整的Webpack( ng弹出可以为您提供帮助)
2. 硬编码类名

1. switch to full webpack (ng eject can help you with this)
2. 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.

jsFiddle

无论如何，如果您有构造函数，也可以这样定义它，并完全省略显式字段(优先事项，两者的作用相同):

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屋！