CODEWITHSUNDEEP
angulartypescript
Azriz
Azriz

Reputation: 3211

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.

Upvotes: 301

Views: 179127

Answers (7)

Manoj Rana
Manoj Rana

Reputation: 3460

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

Upvotes: 40

Ahmed Essam ElDessouki
Ahmed Essam ElDessouki

Reputation: 1131

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

but this did

npm i -D @types/node

Upvotes: 9

Raphaël Balet
Raphaël Balet

Reputation: 8605

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

Upvotes: 3

Jonatas Nardi
Jonatas Nardi

Reputation: 66

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

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

It worked for me.

Upvotes: 1

Hector Crean
Hector Crean

Reputation: 332

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

Upvotes: 21

Aaron Beall
Aaron Beall

Reputation: 52213

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.

Upvotes: 571

Fenton
Fenton

Reputation: 251262

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

Upvotes: 4

Related Questions