flatMap, flat, flatten doesn't exist on type any[]

Question

I'm using Chrome 70 and Chrome does add methods .flatMap, .flatten, .flat. So my code does run as expected. Unfortunately, TypeScript doesn't like it.

// data.flatMap lint error
export const transformData = (data: any[]) => data.flatMap(abc => [
   parentObj(abc),
   ...generateTasks(abc)
]);

The warning I got is TS2339: Property 'flatMap' does not exist on type 'any[]'.

I'm using Angular 6, which uses Typescript ~2.9.2, and I already include import 'core-js/es7/array'; in polyfills.ts.

My guess is that there is no typing for these methods, and I did try to npm run -dev @types/array.prototype.flatmap but still not solve.

Caroleecarolin

Answer 1

You should add es2019 or es2019.array to your --lib setting for TypeScript to recognize array.flat() and flatMap().

Example:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "es2019"
    ]
  }
}

Previously this was available as part of esnext or esnext.array, but it's now officially part of ES2019.

Umbra

Yup I reproduce this and it works. Here my compilerOptions in tsconfig.app.json "lib": [ "es2017", "dom", "esnext.array", ] Thank you sir – Caroleecarolin

This did not fix it for me in my IDE, VSCode. Any tips? – Maxi

@timelf123 did you restart your IDE? – Lalla

Is there a reason (and if so what's the effect) of using "esnext" instead of "esnext.array"? – Footless

@Footless "esnext" just includes additional stuff besides the array proposals. – Umbra

Replacing esnext, esnext.array or es2017 with es2019 got it to work for me. – Isolationism

@BlairZajac Yep, Array stuff is officially part of ES2019 now, so I updated the answer. Thanks for the tip! – Umbra

Note: flatMap is now supported in node 11+ – Horrific

@Onza It should work, the problem is likely in your build configuration not properly using your tsconfig, as the default settings don't allow flat at this time. – Umbra

Nope, double checked, this is on VScode; all the other configurations seem to have an effect but this one, I have absolutely no clue, the solution of Frenton does work however; either way, I just ended up deciding not to use the method. – Morality

I think commenting under accepted answer will be more efficient. getting an error: property flat does not exist on type string[][]; shouldn't be flat of type any[] still work with string[][]. I don't know how to structure well this statement. – Panda

@Footless es2019.array is in most cases preferred as it explicitly specifies the features of the es2019 spec that are supported in the project which avoids accidentally using es2019 features not supported – Tiresias

is there a way to add all the esXXXX years? – Sudarium

Worked for me to change tsconfig.json files from "lib": ["es2018"] to "lib": ["es2019"]. – Ascribe

Thank you, it unexpectedly and surprisingly well worked for me right away. Intellij idea was able to catch up flatMap and flat RIGHT after I added libs (I already had target:es5 configured). Usually, the process is harder.... 😉👌 – Calcareous

This works technically but the typings are terrible. T will be of type S | Array<S> basically, so flat is not of type Array<T>, but fo type Array<S> where S is the nested structure. I think you need to add a generic like interface Array<T, S = any> { flat(): Array<S> } or find a way to filter out array types from T. – Marv

Just to add , VSC needs restarted – Keek

Answer 2

If you're are in a lower version than es2019, you can implement a shim to provide similar functionality to .flat() and .flatMap() provided by later libraries.

To flat single level array

arr.reduce((acc, val) => acc.concat(val), []);

To flat multi level array

function flatDeep(arr, d = 1) {
   return d > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? flatDeep(val, d - 1) : val), []) : arr.slice();
};

to know deeply you can also check below link

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

Pentamerous

Thanks for this snippet — it was helpful as I still couldn't use .flat() even with the Typescript fix in the accepted answer. – Earwig

This snippet helped as I still couldn't get .flat() to work after adding "lib": ["ES2019"], in tsconfig.json – Marginate

be careful with concat() since it's a copying method. Use push() instead which is a mutating method – Precess

Answer 3

Aaron Beall's answer is excellent. It may be worth knowing that if "lib" is not specified in the tsConfig.JSON file a default list of libraries are injected. The default libraries injected are: ► For --target ES5: DOM,ES5,ScriptHost ► For --target ES6: DOM,ES6,DOM.Iterable,ScriptHost

In other words: We must specify those libs that were previously added automatically. (see: https://www.typescriptlang.org/docs/handbook/compiler-options.html for further info)

"compilerOptions": {

   "target": "es6",

   "lib": [ "es2019", "DOM", "ES6" ,"DOM.Iterable", "ScriptHost"],}

Crotty

Answer 4

I tried most answers and they didn't work for me. IDE: VScode

but this did

npm i -D @types/node

Childlike

Answer 5

You can extend the global array interface while you wait for stability, at which point it will be added to the default library.

interface Array<T> {
    flat(): Array<T>;
    flatMap(func: (x: T) => T): Array<T>;
}

Councilwoman

Answer 6

As of angular 11 and thx to typescript 3.9 this is now the new config.

"compilerOptions": {
    "target": "es2018",
    "module": "es2020",
    "lib": ["es2020", "dom"],
}

Why es2020 instead of esnext?

In TypeScript 3.9, the behavior of the TypeScript compiler controlled by module is the same with both "esnext" and "es2020" values. This behavior can change in the future, because the "esnext" option could evolve in a backwards incompatible ways, resulting in build-time or run-time errors during a TypeScript update. As a result, code can become unstable. Using the "es2020" option mitigates this risk.

for further read

Hauser

Answer 7

You can also add esnext to your --lib instead of 'es2019'

"compilerOptions": {
    "target": "es2015",
    "lib": ["dom", "esnext"]
}

It worked for me.

Johppa