Typescript中的array.reduce函数引发类型错误答案

【问题标题】：array.reduce Function in Typescript throws Type errorTypescript中的array.reduce函数引发类型错误
【发布时间】：2021-03-16 01:17:22
【问题描述】：

我有一个 NameValuePair 接口，我想编写一个函数，将名称-值对列表“减少”为字符串。在这种情况下，该函数将生成一个查询字符串，例如

?name=foo&age=10

在给定的名称-值对中。

export interface NameValuePair {
  name: string,
  value: any
};

export const nameValuePairsToString = (
  pairs: NameValuePair[],
  innerSeperator: string="=", outerSeperator: string="&",
  startValue="?"
): string => (
  pairs.reduce((acc: string, pair: NameValuePair, idx: number): string => {
    const pairAsString = pair.name + innerSeperator + pair.value;
    const tail = idx === 0
      ? pairAsString
      : outerSeperator + pairAsString;
    return acc + tail;
}), startValue);

TypeScript 在传递给 reducer 的匿名函数的定义中抛出此错误：

'(acc: string, pair: NameValuePair, idx: number) => string' 类型的参数不可分配给 '(previousValue: NameValuePair, currentValue: NameValuePair, currentIndex: number, array: NameValuePair[] 类型的参数) => 名称值对'。参数“acc”和“previousValue”的类型不兼容。类型 'NameValuePair' 不可分配给类型 'string'.ts(2345)

是否不能将一种类型（NameValuePair）的数组减少为另一种类型（字符串）。我认为这就是减速器的全部意义所在？在 JavaScript 中，我总是这样使用 Array.prototype.reduce... 在 TypeScript 中是不可能的还是我做错了什么？

【问题讨论】：

第一眼：双括号((在reduce处。第一个参数应该是之前的值acc，而不是可调用的
如果我错了请纠正我，但我认为 Array.reduce 将函数作为第一个参数（因此匿名箭头函数的双括号）和第二个参数 initValue。跨度>
我认为这也不是问题，因为如果你编写一个没有大括号（只是括号）的箭头函数，你不需要编写 return 关键字，而是默认返回值.我认为问题在于reduce的每个参数给出的匿名函数，因为错误表明函数的参数类型不适合（acc对我来说是字符串，它说它必须是NameValuePair）。我认为减速器的工作方式不同，因此“previousValue”可以是任何类型的值......

标签： typescript

【解决方案1】：

你的括号错了。

你的左括号：

export const nameValuePairsToString = (...): string => (

在这里终止：

}), startValue);

应该是：

}, startValue));

你也可以省略：

export const nameValuePairsToString = (
    pairs: NameValuePair[],
    innerSeperator: string = "=", outerSeperator: string = "&",
    startValue = "?"
): string => pairs.reduce((acc: string, pair: NameValuePair, idx: number): string => {
    const pairAsString = pair.name + innerSeperator + pair.value;
    const tail = idx === 0
        ? pairAsString
        : outerSeperator + pairAsString;
    return acc + tail;
}, startValue);

或者用括号：

export const nameValuePairsToString = (
    pairs: NameValuePair[],
    innerSeperator: string="=", outerSeperator: string="&",
    startValue="?"
): string =>
    (pairs.reduce((acc: string, pair: NameValuePair, idx: number): string => {
        const pairAsString = pair.name + innerSeperator + pair.value;
        const tail = idx === 0
            ? pairAsString
            : outerSeperator + pairAsString;
        return acc + tail;
    }, startValue));

您可以通过以下方式看到它的工作原理：

console.log(nameValuePairsToString([
    {name: 'foo', value: 'bar'}, 
    {name: 'age', value: 10}])
);

输出：

?foo=bar&age=10

【讨论】：

非常感谢！它有效，但我不明白为什么。我认为右括号放错了。虽然奇怪的错误消息
@IceRevenge 是的，我同意错误消息乍一看并没有太大帮助。我标记了错误括号的位置。