Types for recursive array.map in Typescript

Question

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);
    }
}

captain-yossarian from Ukraine · Accepted Answer · 2021-10-13 07:46:12Z

3

In order to do that you can use f-bounded quantification:

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

edited Oct 13, 2021 at 7:46

answered Oct 12, 2021 at 9:24

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

crazyones110 Over a year ago

Seems like @jeremynac's answer is way more simple but this answer is more general , defining a NestedArray<T> already suffices, why bother using T extends Array<T | Elem>

captain-yossarian from Ukraine Over a year ago

Sure. I had several versions of the code. Just did not polished it

jeremynac · Accepted Answer · 2021-10-12 13:12:51Z

1

I would try to just define a type: type NestedArray<T> = T | NestedArray<T>[] to represent a nested array of type T. Then, you just type your variables in your original functions, and it should work.

type NestedArray<T> = T | NestedArray<T>[]

const strArr: NestedAr

ray<string> = ["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: NestedArray<string>): NestedArray<number> {
    if (isStringArray(item)) {
        return item.map(mapToNumber);
    } else {
        return Number(item);
    }
}

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

answered Oct 12, 2021 at 13:12

jeremynac

1,2525 silver badges11 bronze badges

Comments

DemiPixel · Accepted Answer · 2021-10-12 09:08:28Z

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

Collectives™ on Stack Overflow

Types for recursive array.map in Typescript

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related