typescript - 如何在 TypeScript 的装饰器中重用装饰器

Question

我正在尝试创建一些包装 Angular2 装饰器的功能。我想简化向主机添加 CSS 类的过程，因此我创建了以下内容:

警告:不适用于 AOT 编译

type Constructor = {new(...args: any[]): {}};

export function AddCssClassToHost<T extends Constructor>(cssClass: string) {
    return function (constructor: T) {
        class Decorated extends constructor {
            @HostBinding("class") cssClass = cssClass;
        }
        // Can't return an inline class, so we name it.
        return Decorated;
    };
}

我还希望能够创建另一个添加特定 CSS 类的装饰器。

/**
 * Decorator to be used for components that are top level routes. Automatically adds the content-container class that is
 * required so that the main content scrollbar plays nice with the header and the header won't scroll away.
 */
export function TopLevelRoutedComponent<T extends Constructor>(constructor: T) {
   // This causes an error when called as a decorator
   return AddCssClassToHost("content-container");
    // Code below works, I'd like to avoid the duplication
    // class Decorated extends constructor {
    //     @HostBinding("class") cssClass = "content-container";
    // }
    // return Decorated;
}

// Called like
@TopLevelRoutedComponent
@Component({
    selector: "vcd-administration-navigation",
    template: `
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
        <vcd-side-nav [navMenu]="navItems"></vcd-side-nav>`
})
export class AdminNavigationComponent {
    navItems: NavItem[] = [{nameKey: "Multisite", routerLink: "multisite"}];
}

我得到的错误信息是

 TS1238: Unable to resolve signature of class decorator when called as an expression.
 Type '(constructor: Constructor) => { new (...args: any[]): AddCssClassToHost<Constructor>.Decorated; p...' is not assignable to type 'typeof AdminNavigationComponent'.
 Type '(constructor: Constructor) => { new (...args: any[]): AddCssClassToHost<Constructor>.Decorated; p...' provides no match for the signature 'new (): AdminNavigationComponent'

我能够通过创建一个由两者调用的函数来解决这个问题

function wrapWithHostBindingClass<T extends Constructor>(constructor: T, cssClass: string) {
    class Decorated extends constructor {
        @HostBinding("class") cssClass = cssClass;
    }
    return Decorated; // Can't return an inline decorated class, name it.
}
export function AddCssClassToHost(cssClass: string) {
    return function(constructor) {
        return wrapWithHostBindingClass(constructor, cssClass);
    };
}
export function TopLevelRoutedComponent(constructor) {
    return wrapWithHostBindingClass(constructor, "content-container");
}

有没有一种方法可以使第一种样式起作用，而不需要辅助函数或复制代码？我意识到我的尝试不是很好而且没有意义，但我无法理解错误消息。

(某种)AOT 兼容的版本因为下面的要简单很多，不会导致AOT编译器崩溃。但是，请注意，如果使用 webpack 编译器，自定义装饰器将被删除，因此它仅在使用 ngc 编译时有效。

export function TopLevelRoutedComponent(constructor: Function) {
    const propertyKey = "cssClass";
    const className = "content-container";
    const descriptor = {
        enumerable: false,
        configurable: false,
        writable: false,
        value: className
    };
    HostBinding("class")(constructor.prototype, propertyKey, descriptor);
    Object.defineProperty(constructor.prototype, propertyKey, descriptor);
} 

Answer 1

装饰器的类型签名中存在一些错误，无法满足类型检查器的要求。

为了修复它们，您必须了解装饰器 和装饰器工厂 之间的区别。

正如您可能怀疑的那样，装饰器工厂只不过是一个返回装饰器的函数。

当您想要自定义通过参数化应用的装饰器时，请使用装饰器工厂。

以您的代码为例，下面是一个装饰器工厂

export type Constructor<T = object> = new (...args: any[]) => T;

export function AddCssClassToHost<C extends Constructor>(cssClass: string) {
    return function (Class: C) {
        
        // TypeScript does not allow decorators on class expressions so we create a local
        class Decorated extends Class {
            @HostBinding("class") cssClass = cssClass;
        }
        return Decorated;
    };
}

装饰器工厂采用一个参数来自定义它返回的装饰器使用的 css，并用(那是一口)替换目标。

但是现在我们想重新使用装饰器工厂来添加一些特定的css。这意味着我们需要一个普通的旧装饰器，而不是工厂。

由于装饰器工厂只返回我们需要的东西，所以我们可以直接调用它。

使用你的第二个例子，

export const TopLevelRoutedComponent = AddCssClassToHost("content-container");

现在我们遇到应用程序的错误

@TopLevelRoutedComponent
@Component({...})
export class AdminNavigationComponent {
    navItems = [{nameKey: "Multisite", routerLink: "multisite"}];
}

我们必须考虑原因。

调用工厂函数实例化其类型参数。

我们需要一个创建通用装饰器的工厂，而不是返回非通用装饰器的通用装饰器工厂!

也就是说，TopLevelRoutedComponent 需要是通用的。

我们可以通过简单地重写我们原来的装饰器工厂，将类型参数移动到它返回的装饰器来做到这一点

export function AddCssClassToHost(cssClass: string) {
    return function <C extends Constructor>(Class: C) {

        // TypeScript does not allow decorators on class expressions so we create a local
        class Decorated extends Class {
            @HostBinding("class") cssClass = cssClass;
        }
        return Decorated;
    };
}

这是一个live example