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

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.

angular typescript

Solution 1:^[1]

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

Solution 2:^[2]

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

Solution 3:^[3]

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

Solution 4:^[4]

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

Solution 5:^[5]

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

but this did

npm i -D @types/node

Solution 6:^[6]

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

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

It worked for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	jonrsharpe
Solution 2	Hector Crean
Solution 3	Fenton
Solution 4	RaphaÃ«l Balet
Solution 5	Ahmed Essam ElDessouki
Solution 6	Jonatas Nardi

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Why es2020 instead of esnext?

Solution 5:[5]

Solution 6:[6]