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.

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.

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

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

Answer 4

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

but this did

npm i -D @types/node

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

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

Answer 7

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

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

It worked for me.