打字稿:在编译时在自己的属性中获取类名 [英] 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.但是，后者对缩小代码没有帮助.因此，在将 typescript 代码编译为 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.

推荐答案

/additional answer

因为即使在丑化之后您也需要原始类的实际名称，所以您需要查看您的构建过程.

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 支持保留原始类名的标志，甚至是应该忽略的类名白名单.具体是你感兴趣的ma​​ngler部分.官网甚至提到它将使用 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 eject 可以帮助您解决这个问题)
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 eject 仅仅意味着你需要用 webpack 做一些比 cli 为 ng build 和 ng serve 等命令提供的更高级或自定义的事情.所以它生成了一个 webpack.config.根据 cli 使用的配置修改 js，以便您可以进一步自定义它.

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 mangling 的情况下仍然有用)

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) {
    (..)
  }
}

这篇关于打字稿:在编译时在自己的属性中获取类名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！