在旧版浏览器上使用 Promise.allSettled 的 Typescript 目标和库配置

Question

我使用的是 typescript 版本 4.3.5 和节点版本 14.18.1。我正在编译针对旧浏览器和新浏览器的代码（tsconfig 中的target=es5）。我在我的源代码中使用 Promise.all 和 Promise.allSettled。

在旧版浏览器上，特别是 Safari IPhone 8，IOS 版本 11，我收到客户端错误 Promise.allSettled .

根据我的理解，当使用 target=es5 时，typescript 应该编译以使代码与旧设备兼容，因此 Promise.allSettled 应该可以工作。请帮我理解这个问题！以下是我的 tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "module": "commonjs",
    "esModuleInterop": true,
    "outDir": "dist",
    "jsx": "react",
    "lib": [
      "ES2020.Promise",
      "dom",
      "webworker"
    ],
    "skipLibCheck": true
  },
  "include": [
    "typings/node.d.ts",
    "typings/modules.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "**/*.scss.d.ts"
  ]
}

Answer 1

如问题 Why do I need a polyfill with Typescript?, TypeScript doesn't automatically provide backwards-compatibility implementations ("polyfills"). Consequently, the target tsconfig does less than you think it would: It only rewrites syntax like arrow functions and generators, not libraries like Promise. In fact, the only reason you can resolve Promise.allSettled in the first place is that you've specifically listed "ES2020.Promise" in your lib list, which tells TypeScript that in your environment you can assume you have access to ES2020 Promises (specifically Promise.allSettled).

来自那些 lib docs，强调我的：

You may want to change these [lib entries] for a few reasons:

Your program doesn’t run in a browser, so you don’t want the "dom" type definitions

Your runtime platform provides certain JavaScript API objects (maybe through polyfills), but doesn’t yet support the full syntax of a given ECMAScript version

You have polyfills or native implementations for some, but not all, of a higher level ECMAScript version

如问题 , you have several options to provide a polyfill yourself, but a notable one is es.promise.all-settled.js in core-js. You can integrate those into your Webpack build using the polyfills entry point pointing to a short polyfill-import-only JS file, though the suggestion to use babel-polyfill has been deprecated in favor of core-js/stable.

您需要 import 或 require 以下之一：

core-js/stable/promise/all-settled
promise.allsettled
ts-polyfill/lib/es2020-promise（无论如何使用 core-js）

在旧版浏览器上使用 Promise.allSettled 的 Typescript 目标和库配置

Typescript target & library configuration to use Promise.allSettled on older browsers

typescript

webpack

promise

ecmascript-5

tsconfig