Saturday, June 1, 2024
 Popular · Latest · Hot · Upcoming
130
rated 0 times [  132] [ 2]  / answers: 1 / hits: 8851  / 2 Years ago, mon, january 24, 2022, 12:00:00

I am new to TypeScript and have just started migrating my application from JavaScript to TypeScript.



  1. First function: calcAvg, takes an array of numbers and returns their average.

  2. Second function: avgRoasDiscrepancy, takes two arrays, if the two arrays are of equal length and with no null values, it will subtract each element from one list with the element in the same index from the second array.


The issue is in the following map function (see full code below):



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

I get the following error:


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'


I don't know how to "convince" TypeScript that both value and roasArray[index] are in fact numbers and not nulls.


Here is the complete code :


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';

};

More From » typescript

 Answers
2

I wasn't able to get type inference to work properly using the every calls on the arrays, however you can make a type guard to help the compiler understand that the arrays are of type number[] instead of (number | null)[]. This will also help with refactoring a bit.


Note that there's also an issue with your current type checking logic, but looks like it's just a typo: the !! before the first condition should just be a single !.


Here's a simple type guard:


function isNonNullNumberArray(x: (number | null)[]): x is number[] {
return x.every(e => e !== null);
}

Then you can use isNonNullNumberArray like this:


  if (!(isNonNullNumberArray(clientRoasArray) && isNonNullNumberArray(roasArray))) {
//if one of the arrays has null values don't calculate
return 'no data';
}
// now the compiler knows that neither array contains null values
if (clientRoasArray.length === roasArray.length) {
const discArray = clientRoasArray.map((value: number, index: number) => value - roasArray[index]);
return calcAvg(discArray);
}
return 'no data';

You could make a more general type guard like this too if you wanted using generics so that it works for types other than number:


function isNonNullArray<T>(x: T[]): x is Exclude<T, null>[] {
return x.every(e => e !== null);
}

By the way, you don't need to explicitly declare parameter types in functions passed to map and other array method as the compiler can infer the types based on the signature of the array method (e.g. map).


[#452] Saturday, January 15, 2022, 2 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
longd

Total Points: 616
Total Questions: 110
Total Answers: 101

Location: Andorra
Member since Sat, May 27, 2023
1 Year ago
;