typescript - 在 TypeScript 中通过装饰器向类添加属性

Question

在 TypeScript 的装饰器引用页面上，有一段代码片段说明了如何使用类装饰器覆盖构造函数:

function classDecorator<T extends {new(...args:any[]):{}}>(constructor:T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

@classDecorator
class Greeter {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
}

console.log(new Greeter("world"));

在日志中:

class_1 {
  property: 'property',
  hello: 'override',
  newProperty: 'new property' }

到目前为止一切顺利。但是尝试通过点符号访问 newProperty 失败:

Property 'newProperty' does not exist on type 'Greeter'.ts(2339)

错误，它没有在 VS Code 的提示中列出。可以通过括号表示法访问它，但 TS 警告说

Element implicitly has an 'any' type because type 'Greeter' has no index signature.ts(7017)

我错过了什么吗？如何以类型安全的方式通过装饰器实现添加新属性？我希望像普通类(class)成员一样获得普通编译器支持。

Answer 1

设计上的装饰器不能改变类的类型。这仍在讨论中，直到装饰器提案最终确定 team 才会出现。不会改变行为。您可以为此任务使用 mixin(阅读 mixins in ts)

使用 mixin 的代码看起来像这样:

function classDecorator<T extends { new(...args: any[]): {} }>(constructor: T) {
    return class extends constructor {
        newProperty = "new property";
        hello = "override";
    }
}

const Greeter = classDecorator(class {
    property = "property";
    hello: string;
    constructor(m: string) {
        this.hello = m;
    }
});
type Greeter = InstanceType<typeof Greeter> // have the instance type just as if we were to declare a class

console.log(new Greeter("world").newProperty);