Typescript 目标和库配置以使用 Promise.all在旧版浏览器上定居

Question

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

在较旧的浏览器上，特别是IPhone 8、IOS版本11上的Safari，我在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

正如问题中为什么我需要一个带有Typescript的polyfill？，TypeScript不会自动提供向后兼容性实现("polyfills"(。因此，targettsconfig的作用比您想象的要小：它只重写语法(如箭头函数和生成器(，而不是像Promise那样重写库。事实上，您首先可以解析Promise.allSettled的唯一原因是，您在lib列表中特别列出了"ES2020.Promise"，这告诉TypeScript，在您的环境中，您可以假设您可以访问ES2020 Promises(特别是Promise.allSettled(。

从那些lib文档中，重点挖掘：

您可能需要更改这些[lib条目]，原因如下：

• 你的程序不在浏览器中运行，所以你不想要"dom"；类型定义
• 您的运行时平台提供某些JavaScript API对象(可能通过polyfills(，但还不支持给定ECMAScript版本的完整语法
• 您有更高级别ECMAScript版本的部分(但不是全部(的polyfill或本机实现

正如问题Promise.allSettled在babel ES6实现中一样，您可以选择自己提供polyfill，但值得注意的是core js中的es.Promise.allSettled.js。您可以使用指向一个简短的polyfill仅导入JS文件的polyfills入口点将这些集成到您的Webpack构建中，尽管使用babel-polyfill的建议已被弃用，取而代之的是core-js/stable。

您需要import或require其中之一：

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