Question

我目前有一个带变量参数的翻译管道

@Pipe({name: 'translate', pure: true})
export class TranslationPipe {
    constructor(private service: TranslationService) {}
    transform(key: string, ...params: (number|string)[]): string {
        // The translation service takes an array
        return this._service.translate(key, params);
    }
}

对于error.message=You have {0} of {1} tries left这样的消息，它在模板中被称为如下所示

{{ 'error.message' | translate : currentTry : totalTriesAllowed }}

但是，我们现在有一个组件将密钥和替换参数作为一个数组的情况（因为它不知道密钥是由调用者提供的可能有多少）并且我不知道为该方法创建重载的好方法。

我确实尝试从模板传播参数，但这不是有效的语法

{{ translationKey | translate : ...translationArgs }}

为了能够完成这项工作，我认为我需要像下面这样的重载，以便转换管道也可以将数组作为第一个参数而不是单独的参数传递

transform(key: string, params: (string|number)[]): string;
transform(key: string, ...params: (string|number)[]): string;

但是，我无法找到支持此重载的良好实现。这就是我目前所处的位置。

type ArryayOfStringOrNumber  = (string|number)[];
export class TranslationPipe {
    // ERROR: Overload signature is not compatible with function implementation
    transform(key: string, params: ArryayOfStringOrNumber): string;
    transform(key: string, ...params: ArryayOfStringOrNumber): string;
    transform(key: string, ...params: ArryayOfStringOrNumber): any {
        if (params[0] instanceof Array) {
            // ERROR: The left-hand side of an 'instanceof' expression must 
            //        be of type 'any', an object type or a type parameter.
            params = params[0] as ArryayOfStringOrNumber;
        }
        return this._service.translate(key, params as ArryayOfStringOrNumber);
    }
}

Answer 1

问题是实现重载的函数必须接受一个对象数组，其中每个对象可以是(string|number)[]类型或其数组，即((string|number)[])[]

transform(key: string, ...params: (ArryayOfStringOrNumber|(string|number))[]): any {
    if (params[0] instanceof Array) {
        params = params[0] as ArryayOfStringOrNumber;
    }
    return this._service.translate(key, params as ArryayOfStringOrNumber);
}

Answer 2

我遇到了类似的问题，我所做的是拆分扩展数组的第一个可能的参数，使其成为一个联合类型，并在必要时将其添加到扩展数组中。

结果有点像这样：

foo(bar: Bar): void;
foo(...bazs: Array<Baz>): void;
foo(barOrBaz: Bar | Baz, ...bazsRest: Array<Baz>): void {
    if (barOrBaz instanceof Bar) {
        let bar = barOrBaz;
        // first overload
    } else {
        let bazs = [barOrBaz, ...bazsRest];
        // second overload
    }
}

因此，在您的情况下，实现也可以这样写：

transform(key: string, paramsFirst: string | number | ArrayOfStringOrNumber, ...paramsRest: ArrayOfStringOrNumber): string {
    let params = paramsFirst instanceof Array ? paramsFirst : [paramsFirst, ...paramsRest];
    return this._service.translate(key, params);
}

如何使用变量参数

2 个答案: