There is no perfect way to type this currently, predominantly because recursive types are not allowed. If we could use recursive types, then the solution would be simple:

type Flattened<T> = T extends Array<infer U> ? Flattened<U> : T;

export const flatten = <T>(arr: T[]): Flattened<T>[] => (
  arr.reduce(
    (acc, val) => (
      Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val)
    ),
    [],
  )
);

In general, when a typing would be easily achieved via recursive types, overloads are the (somewhat nasty) solution. Although they obviously will not be able to type the entire domain of the function, we can write overloads for a reasonable sub-domain. For example, in this case we may want to type an array argument of depth up to 3. This can be done with generics:

function flatten<T>(arr: T[][][]): T[]
function flatten<T>(arr: T[][]): T[]
function flatten<T>(arr: T[]): T[]
function flatten<T>(arr: T[]): T[] {
    return arr.reduce(
        (acc, val) => (
            Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val)
        ),
        [],
    );
}
  
const depth1 = flatten([1, 2]); // number[]
const depth2 = flatten([[1], [2]]); // number[]
const depth3 = flatten([[[1]], [[2]]]); // number[]

A slightly subtle point is that the overloaded function definitions are matched from top-to-bottom, so we need to have the deepest definition first. All of the uses of the function would match the final (bottom) overload, however, T would end up being an array-type itself. Hopefully it's clear how this approach could be extended to allow deeper array forms to be used.

This is a relatively frequently used approach - see for example the type definitions for Ramda's compose

Edit: The above approach assumes that all the elements of the array argument have the same depth. If this is not true then you can adjust the types slightly to account for this, e.g.

function flatten<T>(arr: (T[][] | T[] | T)[]): T[]
function flatten<T>(arr: (T[] | T)[]): T[]
function flatten<T>(arr: T[]): T[]
function flatten<T>(arr: T[]): T[] {
    return arr.reduce(
        (acc, val) => (
            Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val)
        ),
        [],
    );
}

const depthVariable = flatten([[[1]], [2], 3]); // number[]

More on reddit.com

Here's the jsperf link: http://jsperf.com/2-dimensional-array-merge ... I don’t know what’s wrong with the JSPerf because the link is dead, but this is backwards. Repeated concat is not only slower, it’s asymptotically slower. 2022-03-03T03:01:14.93Z+00:00 ... I'm aware that this is hacky, but the must succinct way I know of to flatten ... More on stackoverflow.com

I don't think you can do quite this, because if you did for example: const input = Array.from(document.querySelectorAll('div')). map(x => x.textContent); myfunc(input, "hello"); There is no way the typescript compiler could guess what the elements of input might be. However, for completely static arrays, you can pass it as the type parameter: function myFunc(item: Flatten) { // Snipped } myFunc<["hello", "world"]>("foo") // bad myFunc<["hello", "world"]>("hello") // ok You could even do: type ValidInput = ['foo', 'bar']; const input2 = ['foo', 'bar'] as ValidInput myFunc('bar'); // ok myFunc('hello'); // bad myFunc('foo'); // ok myFunc('hello'); // bad But in that case, you might as well just do: type ValidStrings = 'hello' | 'world'; myFunc('foo'); TSPlayground link for better highlighting Edit: nice link syntax reddit/tsplayground More on reddit.com

Teachable moment. Try this and tell me what you think... const arrays = [ [1,2,[3,4]], ['a','b',['c']] ] arrays.forEach(array => { array = 'weird'; }) console.log(arrays) More on reddit.com