javascript - 如何使用装饰器扩展类类型

Question

我想在我的项目中使用装饰器。这是我写的:

export const DetachedWindow = (options: TDetachedWindowOptions = defaultOptions) => <R extends Constructable>(Clazz: R): R => {
    const tmp = class extends Clazz {
        value = 'value';

        value2 = 'value2';

        constructor(...args: any[]) {
            super(...args);
            // <some logick>
        }
    };
    Object.defineProperty(tmp, 'name', { value: Clazz.name });
    return tmp;
};

如您所见，这个装饰器创建了一些字段。但是 typescript 无法识别它们

@DetachedWindow({ optA: 'optA' })
export class SomeClass {
    constructor() {
        setTimeout(() => {
            console.log(this.value); // TS2339: Property 'value' does not exist on type 'SomeClass'.
        });
    }
}

它确实存在。如果我在使用这些参数之前添加 @ts-ignore，代码可以正常工作。

我很受伤，我怎样才能创建一个类装饰器，它会扩展父类的类型。我试图做这样的事情:

export const DetachedWindow = (options: TDetachedWindowOptions = defaultOptions) => <R extends Constructable>(Clazz: R): R & { value: string } => {

但这并没有帮助。

有什么想法吗？

Answer 1

答案在 Class decorators 的 TypeScript 文档中:

// Note that the decorator _does not_ change the TypeScript type
// and so the new property `reportingURL` is not known
// to the type system:
bug.reportingURL;
Property 'reportingURL' does not exist on type 'BugReport'.