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

Answer 1

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

Answer 2

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