javascript - 区分 JavaScript Set 和不可变 Set

Question

我最近遇到了一个问题，我最终使用了 JavaScript Set 对象，但没有使用 new 运算符进行实例化。我在我的项目中使用了不可变，并期望从那里使用 Set 构造，但我忘了导入它。

正如预期的那样，代码崩溃了，因为代码希望我编写 let set = new Set() 而不仅仅是 let set = Set()。

是否有任何可用的 es-lint 规则可以帮助捕获此类问题？

Answer 1

您可以添加自定义的 no-restricted-globals 规则:

"no-restricted-globals": [
    "error",
    {
        "name": "Set",
        "message": "Use window.Set or add an eslint-ignore if native Set is what you want"
    },
    {
        "name": "Map",
        "message": "Use window.Map or add an eslint-ignore if native Map is what you want"
    }
],

我们的项目在开始时使用了 ImmutableJS，所以我们最终遇到了很多这样的问题。最糟糕的情况之一是当有人将代码从一个文件迁移到另一个文件时，同时使用了 JavaScript Set 和 Immutable Set。突然，未触及的代码开始失败，因为 import { Set } from 'immutable'; 隐藏了 native 类。

有两件事帮助我们发现了这些问题:

• 每当我们有意使用原生 JavaScript 类型时，我们都会在它们前面加上技术上无用但视觉上明显的 window 范围:new window.Set()
• 由于它是一个 React 项目，我们使用了 prop-types和 react-immutable-proptypes在所有组件上。不过永远不要使用 PropTypes.object，这条规则几乎总是正确的!