如何使用类装饰器向类添加新属性？答案

【问题标题】：How to add a new property to a class using class decorator?如何使用类装饰器向类添加新属性？
【发布时间】：2016-12-06 16:52:27
【问题描述】：

如何使用类装饰器向类添加新属性？

代码示例：

@MyClassDecorator
class MyClass {
    myFirstName: string;
    myLastName: string;
}

// I need something like this:
function MyClassDecorator (target: any): any {
    target['myNickname'] = 'Gambler';
}

let myClass = new MyClass();
console.log(myClass['myNickname']); // expecting "Gambler" but got "undefined"

如何修复此代码？

是否可以使用装饰器向类添加属性？

谢谢！

【问题讨论】：

标签： typescript

【解决方案1】：

您需要将属性添加到原型而不是构造函数：

function MyClassDecorator(target: any): any {
    target.prototype.myNickname = "Gambler";
}

这会让你得到你想要的，但问题是你将无法在没有打字稿抱怨的情况下访问这个属性：

let myClass = new MyClass();
console.log(myClass.myNickname); // error: Property 'myNickname' does not exist on type 'MyClass'

你可以试试这样的：

function myClassFactory(): MyClass & { myNickname: string } {
    return new MyClass() as MyClass & { myNickname: string };
}

let myClass = myClassFactory();
console.log(myClass.myNickname); // all good

(code in playground)

【讨论】：

有效！非常感谢！我的错误是 - 我认为应该使用一些特殊的方法来做到这一点:)))
我将这种方法与 angular 组件一起使用，它工作得很好，直到我尝试进行一个完整编译的发布版本，然后你得到各种属性不存在错误
@Simon_Weaver 我需要查看您的代码才能了解原因
它与您所拥有的基本相同 - 我想向 html 使用的角度组件添加一个属性。然后我在组件 html 中引用该属性，该属性有效，但是当它进行发布构建时，它会运行更多检查并且它们失败，因为就编译器而言该属性并不真正存在。我只是想变得聪明一点，但我可以通过手动添加属性来轻松实现我想要的。
@Simon_Weaver 手动添加属性是 IMO 的正确做法。装饰器最适合静态的东西，对于阅读代码的人来说也更清楚，而不仅仅是编译器。