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.

Aaron Beall · Accepted Answer · 2019-08-15 20:58:05Z

570

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.

edited Aug 15, 2019 at 20:58

answered Nov 30, 2018 at 14:31

Aaron Beall

52.6k26 gold badges91 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

17 Comments

Azriz Over a year ago

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

timelfelt Over a year ago

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

Highspeed Over a year ago

@timelf123 did you restart your IDE?

JeffMinsungKim Over a year ago

Note: flatMap is now supported in node 11+

CervEd Over a year ago

@maninak 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

|

jonrsharpe · Accepted Answer · 2022-02-28 17:55:31Z

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

Thanks for this snippet — it was helpful as I still couldn't use .flat() even with the Typescript fix in the accepted answer.
This snippet helped as I still couldn't get .flat() to work after adding "lib": ["ES2019"], in tsconfig.json
be careful with concat() since it's a copying method. Use push() instead which is a mutating method

Hector Crean · Accepted Answer · 2020-05-12 19:08:17Z

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"],}

Ahmed Essam ElDessouki · Accepted Answer · 2021-09-03 15:49:11Z

9

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

but this did

npm i -D @types/node

answered Sep 3, 2021 at 15:49

Ahmed Essam ElDessouki

1,1312 gold badges8 silver badges4 bronze badges

Comments

Fenton · Accepted Answer · 2018-11-30 11:25:04Z

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

Raphaël Balet · Accepted Answer · 2021-04-02 07:56:04Z

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

Jonatas Nardi · Accepted Answer · 2021-03-19 21:31:25Z

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

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

It worked for me.

Collectives™ on Stack Overflow

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

7 Answers 7

17 Comments

3 Comments

Comments

Comments

Comments

Why `es2020` instead of `esnext`?

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

17 Comments

3 Comments

Comments

Comments

Comments

Why es2020 instead of esnext?

Comments

Comments

Linked

Related

Why `es2020` instead of `esnext`?