Typescript flatMap, flat, flatten 在任何类型上不存在 []

Posted 2023-02-19

【中文标题】Typescript flatMap, flat, flatten 在任何类型上不存在 []

【英文标题】：flatMap, flat, flatten doesn't exist on type any[]

【发布时间】：2019-05-02 13:01:34

【问题描述】：

我使用的是 chrome 70，并且 chrome 确实添加了方法 .flatMap, .flatten, .flat。所以我的代码确实按预期运行。不幸的是，Typescript 不喜欢它。

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

我收到的警告是TS2339: Property 'flatMap' does not exist on type 'any[]'.

顺便说一句，我使用的是Angular 6，它使用的是Typescript ~2.9.2，并且我已经在polyfills.ts 中包含了import 'core-js/es7/array';。

我的猜测是这些方法没有打字，我确实尝试过npm run -dev @types/array.prototype.flatmap但仍然没有解决。

【参考方案1】：

您应该将es2019 或es2019.array 添加到您的--lib 设置中，以便TypeScript 识别array.flat() 和flatMap()。

例子：

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

以前它作为 esnext 或 esnext.array 的一部分提供，但现在它正式成为 ES2019 的一部分。

【讨论】：

是的，我复制了这个并且它有效。这是我的compilerOptions tsconfig.app.json "lib": [ "es2017", "dom", "esnext.array", ] 谢谢先生

这并没有在我的 IDE VSCode 中为我解决。有什么建议吗？

@timelf123 你重启你的IDE了吗？

注意：node 11+现在支持flatMap

@maninak es2019.array 在大多数情况下是首选，因为它明确指定了项目支持的 es2019 规范的功能，避免意外使用不支持的 es2019 功能

【参考方案2】：

如果您的版本低于 es2019，您可以实现一个 shiv 以提供与后续库提供的 .flat() 和 .flatMap() 类似的功能。

到平面单级数组

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

到平面多级数组

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

要深入了解，您也可以查看以下链接

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

【讨论】：

感谢这个 sn-p — 它很有帮助，因为即使在接受的答案中使用了 Typescript 修复，我仍然无法使用 .flat()。

@DavidYeiser 如果这对你有帮助，也许你应该投票 :)

这个 sn-p 有帮助，因为在 tsconfig.json 中添加 "lib": ["ES2019"], 后我仍然无法让 .flat() 工作

【参考方案3】：

Aaron Beall 的回答非常出色。值得知道的是，如果 tsConfig.JSON 文件中未指定“lib”，则会注入默认的库列表。注入的默认库是： ► 对于 --target ES5：DOM,ES5,ScriptHost ► 对于 --target ES6：DOM,ES6,DOM.Iterable,ScriptHost

换句话说：我们必须指定之前自动添加的那些库。 （请参阅：https://www.typescriptlang.org/docs/handbook/compiler-options.html 了解更多信息）

"compilerOptions": 

   "target": "es6",

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

【参考方案4】：

您可以在等待稳定性的同时扩展全局数组接口，此时它将被添加到默认库中。

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

【参考方案5】：

从 angular 11 开始，感谢 typescript 3.9，这是现在的新配置。

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

为什么是es2020 而不是esnext？

在 TypeScript 3.9 中，由模块控制的 TypeScript 编译器的行为与“esnext”和“es2020”值相同。这种行为将来可能会发生变化，因为“esnext”选项可能会以向后不兼容的方式发展，从而在 TypeScript 更新期间导致构建时或运行时错误。结果，代码可能变得不稳定。使用“es2020”选项可以降低这种风险。

for further read

【参考方案6】：

您也可以将 esnext 添加到您的 --lib 而不是“es2019”

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

它对我有用。

【参考方案7】：

我尝试了大多数答案，但它们对我不起作用。 IDE：VScode

但确实如此

npm i -D @types/node