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);
}
}
More info on this Github issue (basically, unfortunately there's no good way to do this currently). Proposal of 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 overload technically works if you add one more overload. It's 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));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
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));