Typescript 中递归 array.map 的类型

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[]' 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 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>[] 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));

Answer 3

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