javascript - JS 到 TS : Type 'null' is not assignable to type 'number'

Question

我是 TypeScript 的新手，刚开始将我的应用程序从 JavaScript 迁移到 TypeScript。

1. 第一个函数:calcAvg，获取一组数字并返回它们的平均值。
2. 第二个函数:avgRoasDiscrepancy，接受两个数组，如果两个数组长度相等且没有空值，它将从一个列表中减去每个元素，其中元素在相同索引中第二个数组。

问题出在以下 map 函数中(请参阅下面的完整代码):

const discArray = clientRoasArray.map((value: number, index: number) => value - roasArray[index]);

我收到以下错误:

Argument of type '(value: number, index: number) => number' is not assignable to parameter of type '(value: number | null, index: number, array: (number | null)[]) => number'.
Types of parameters 'value' and 'value' are incompatible.
Type 'number | null' is not assignable to type 'number'.
Type 'null' is not assignable to type 'number'

我不知道如何“说服”TypeScript value 和 roasArray[index] 实际上是数字而不是空值。

完整代码如下:

interface DailyData {
  id: number
  clientCost:number
  conValue:number
  clientConvValue:number
  margin: number

}

const calcAvg = (dataList: number[]) => {
  const reducer = (accumulator: number, curr: number) => accumulator + curr;
  const dataSum = dataList.reduce(reducer, 0);
  return dataSum / dataList.length;
};


const avgRoasDiscrepancy = (advertiserStats: DailyData[]) => {
  const clientRoasArray = advertiserStats.map((obj: DailyData) => obj.clientCost > 0 ? obj.clientConvValue/obj.clientCost: null);
  const roasArray = advertiserStats.map((obj: DailyData) => obj.clientCost > 0 ? obj.conValue/obj.clientCost: null);
  if (clientRoasArray.length === 0 || roasArray.length === 0) {
    return 'no data'
  }
  if (!!clientRoasArray.every((el: number|null) => el!== null) || (!roasArray.every((el: number|null) => el!== null) )) {
    //if one of the arrays has null values don't calculate
    return 'no data';
  }
  if (clientRoasArray.length === roasArray.length) {
    const discArray = clientRoasArray.map((value: number, index: number) => value - roasArray[index]);
    return calcAvg(discArray as number[]);
  }
  return 'no data';

};

Answer 1

在这一行

  const clientRoasArray = advertiserStats.map((obj: DailyData) => obj.clientCost > 0 ? obj.clientConvValue/obj.clientCost: null);

您假设 clientRoasArray 的元素可以是 number 或可以是 null 并且这在您的条件中很清楚 : null

在这一行中，您将 clientRoasArray 的值标识为 number only 这是错误的，因为您告诉您的代码该值可以是 number |null

你只需要改变这一行

const discArray = clientRoasArray.map((value: number, index: number) => value - roasArray[index]);

对此

const discArray = clientRoasArray.map((value: number | null, index: number) => value - roasArray[index]);

但是你会遇到 roasArray[index] 的问题，因为它也可能是 null