Types for recursive array.map in Typescript-CodePudding

I have a simple case which transforms a nested string array to a nested number array, no flatting

const strArr = ["1", "2", ["3", "4"], "5"];

function mapToNumber(item: string | Array<string>): number | Array<number> {
    if (Array.isArray(item)) {
        return item.map(mapToNumber); // line Hey
    } else {
        return Number(item);
    }
}
console.log(strArr.map(mapToNumber));

However TS yells at me: Type '(number | number[])[]' is not assignable to type 'number | number[]'. Then I changed line Hey to return item.map<number>(mapToNumber), doesn't work. Function overloading came to my mind, I gave it a try:

const isStringArray = (arr: any): arr is Array<string> => {
    return Array.isArray(arr) && arr.every(item => typeof item === "string");
}

function mapToNumber(item: string): number;
function mapToNumber(item: Array<string>): Array<number>;
function mapToNumber(item: any) {
    if (isStringArray(item)) {
        return item.map<number>(mapToNumber);
    } else {
        return Number(item);
    }
}

console.log(strArr.map(mapToNumber));

Even though I added the custom type guard, still doesn't work.

The logic is quite simple, but how can I define the correct type for this simple case? The playground link

Edit:

I gave generics a try, still doesn't work

function mapToNumber3<T extends string | Array<string>>(item: T): T extends string ? number : Array<number> {
    if (Array.isArray(item)) {
        return item.map(mapToNumber3);
    } else {
        return Number(item);
    }
}

CodePudding user response：

In order to do that you should also create a recursive type:

const strArr = ["1", "2", ["3", "4"], "5"];


const mapToNumber = (item: string) => parseInt(item, 10)

const isString = (item: unknown): item is string => typeof item === "string"
const isStringArray = (arr: any): arr is Array<string> => Array.isArray(arr) && arr.every(isString)


const map = <
    N extends number,
    Elem extends `${N}` | Array<Elem>,
    T extends Array<T | Elem>,
    >(arr: [...T]): Array<unknown> => {
    return arr.map((item) => {
        if (isStringArray(item)) {
            return item.map(mapToNumber);
        }
        if (Array.isArray(item)) {
            return map(item)
        }
        if (isString(item)) {
            return mapToNumber(item)
        }
        return item
    })

}

const result = map(["1", "2", ["3", "4", ['6', ['7']]], "5"])

T extends Array<T | Elem> - T is a recursive generic

The safest approach is to return Array<unknown> since you don't know the deepnes of the array Playground

It is relatively easy to create recursive data structure type in typescript. See here, but it is hard to use it as a return type in function

CodePudding user response：

More information on this Github issue (basically, there's no good way to currently do this sadly). Proposal for what you want here.

I think you just have to use as for now:

const strArr = ["1", "2", ["3", "4"], "5"];

function mapToNumber(item: string | string[]): number | number[] {
  if (typeof item === 'string') {
    return Number(item);
  } else {
      return item.map(mapToNumber) as number[]; // Here
  }
}

console.log(strArr.map(item => mapToNumber(item)));

Your example with overloading technically works if you add one more overload. Up to you if you think it's worth all the effort.

const strArr = ["1", "2", ["3", "4"], "5"];

const isStringArray = (arr: any): arr is Array<string> => {
  return Array.isArray(arr) && arr.every(item => typeof item === "string");
}

function mapToNumber(item: string): number;
function mapToNumber(item: string[]): number[];
function mapToNumber(item: string | string[]): number | number[]; // Add this
function mapToNumber(item: any) {
  if (isStringArray(item)) {
      return item.map<number>(mapToNumber);
  } else {
      return Number(item);
  }
}

console.log(strArr.map(mapToNumber));