Question

这是测试代码：

class TBaseClass {}

interface Newable<T> {
    new(...args: any[]): T;
}

function Decorate() {
    return function <T extends Newable<TBaseClass>>(constructor: T): any {
        // extend constructor
        return class extends constructor {
            protected _extraField: string = '-'
        }; 
    }
}

@Decorate()
class Test {}

@Decorate()
class ExtTest extends Test {}

alert(ExtTest.name) // returns "class_1", how to get "ExtTest"?

如果代码被转换为JS（ES2015），结果将是＆＃34; ExtTest ＆＃34;。

但是如果项目针对带有ES2015 lib的ES5，那么结果将是＆＃34; class_1＆＃34;。

可以在playground here中测试。这是正常的行为吗？

如何正确解决该问题的任何建议将不胜感激。

Answer 1

在构建步骤中进行转换，缩小或以其他方式修改的任何代码都不应该依赖于Function.name在运行时可预测的任何内容。当然，这包括TypeScript代码。

如果您关心它，可以尝试显式设置类构造函数的name属性，但是它not straightforward，并且在某些运行时环境中甚至可以完全阻止它。此外，TypeScript将not let you取决于您的目标JS版本。

你为什么需要这个？用于调试？是否有一些第三方工具关心构造函数的name属性？如果可能的话，我建议您只使用自己的属性并明确设置：

@Decorate()
class Test {
  static readonly className: string = "Test"
}

@Decorate()
class ExtTest extends Test {
  static readonly className: string = "ExtTest"
}    

alert(ExtTest.className) // returns "ExtTest"

希望有所帮助;祝你好运！

打字稿：使用类装饰器时的正确构造函数名称（目标为ES5 + Lib.ES2015）

1 个答案: