Angular 4 使用 ES2017（例如 string.prototype.padStart）

Posted 2023-03-07

【中文标题】Angular 4 使用 ES2017（例如 string.prototype.padStart）

【英文标题】：Angular 4 use ES2017 (e.g. string.prototype.padStart)

【发布时间】：2018-04-09 22:29:24

【问题描述】：

我正在使用 angular 4 并在字符串管道上工作以用零填充字符串。 但是 angular 或 vs-code 会丢弃原型“padStart”不存在的错误。

如何为我的项目和/或编辑器设置此支持？

如何添加 polyfill，例如padStart 不存在？

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/String/padStart

【问题讨论】：

我刚刚将 polyfill 添加到我的自定义字符串填充管道组件中。但是一般如何设置es2017支持呢？

所有的 polyfill 通常都添加在一个地方。这个地方取决于你的设置。 Zone.js 应该已经存在了。

你用什么，angular-cli？

是的 Angular-CLI。我只是想知道，因为所有浏览器都支持 padStart 只是 angulars 打字稿界面没有。好的，我可以为字符串原型方法扩展 typescript types 接口。

【参考方案1】：

在tsconfig.json 中，您需要将lib 更新为es2017。

目标（--target）

指定 ECMAScript 目标版本

库（--lib）

要包含在编译中的库文件列表。

将 lib 更改为 es2017 会引入 VSCode 的类型，而对于编译，您可以使用 polyfill。

示例

  "compileOnSave": false,
  "compilerOptions": 

    // ...

    "target": "es2015",

    // ...

    "lib": [
      "dom",
      "es2017" // <-- change to use es2017
    ],
    "paths":  ... 
  

您可以在 TypeScript 的 docs 中找到完整的编译器选项列表

Angular 有一堆 polyfill，默认情况下在 polyfills.ts 中被注释掉。您可以取消注释您需要的内容并使用npm 或yarn 添加他们请求的依赖项。在您的情况下，您只需要来自 ES7 的字符串原型 polyfill。

【讨论】：

这对我不起作用，我不知道它会如何，因为 IE 不支持 es2017，除非我弄错了，如果你将目标设置为 es2017 你不是编译很多，你也不需要 polyfills。 IE 的目标应该是 es5。

@AsGoodAsItGets 如果您进一步阅读，您需要包含 polyfills

@mtpultz OP 没有指定哪个浏览器抛出关于padStart() 的错误，在我的情况下是 IE11，我认为 OP 是一样的，因为所有其他浏览器似乎都很好用它。因此，将目标设置为es2017 将在 IE 中中断，即使您在末尾包含 polyfill。你可以在这里阅读原因：***.com/a/42429053/134120

我意识到这一点。您是否尝试仅添加 polyfill，而不更改 target，而是更改 tsconfig 中的 lib，以便运行时具有支持 ES2017 的正确类型？如果您将 lib 设置为 es2017，这不起作用吗？我们在 polyfills.ts 中添加了 ES6 和 ES7 填充，并在我们当前的项目中将 lib 设置为 es2017 以毫无问题地支持 IE11。

@mtpultz 抱歉回复晚了。您的解决方案可能有效，但远非最佳，因为如果我理解正确，您正在为 ES6 和 ES7 加载 all 填充物，这是为了支持 ES7 的一个特性而大量添加不必要的代码，在这种情况下为padStart。

【参考方案2】：

在您的polyfills.ts 中添加以下行：

import 'core-js/es7/string';

padStart 是 es2017（或简称 es7）的一部分。

或者你可以安装mdn-polyfills 模块并把这一行：

import 'mdn-polyfills/String.prototype.padStart';

【讨论】：

当将 polyfill 导入 lib: 2015 和 target: ES5 项目时，TypeScript 仍然返回 Property 'padStart' does not exist on type 'string'.。避免这种错误的正确方法是什么？据我了解，将lib 属性更改为es2017 告诉我的代码编辑器所有es2017 函数都可用。这可能很危险，因为我只填充了字符串，对吧？

@YannicHamann 抱歉回复晚了。在我的tsconfig.json 我有"target": "es5"。您使用的是我建议的两种解决方案中的哪一种？如果您使用 mdn-polyfills，您首先必须使用 npm i mdn-polyfills --save 安装它们。

感谢您的回复，我已经想通了，并在帖子中添加了单独的答案。

【参考方案3】：

不要像接受的答案中建议的那样允许 ALL ES2017 打字，而是执行以下操作以仅填充单个 ES2017.string 功能。

将import 'core-js/es7/string'; 行添加到polyfill.ts 将库ES2017.string 附加到lib 选项（位于tsconfig.json）

lib 选项告诉编译器存在哪些方法（在运行时）。他们不添加任何代码。这就是为什么我们还必须导入实际的 polyfill。如果没有 polyfill 'old' 提供的代码，浏览器可能会抛出异常。

在我看来，当前接受的答案可能很危险，因为您很可能会忘记您必须填充所有其他功能，而您的代码编辑器/转译器告诉您 ALL other @987654331 @typings /features 将可用。