全球识别的元素、类型记录和仅限Safari的bug？

Question

假设您有这样一个select元素：

<select id="Stooge" name="Stooge">
    <option value="0">Moe</option>
    <option value="1">Larry</option>
    <option value="2">Curly</option>
</select>

根据等级库，当浏览器解析此页面时，它会创建一个全局范围的javascript变量window.Stooge。到目前一切尚好。

在我的TypeScript代码中，我想以强类型的方式引用这些选项，因此我有以下内容：

enum Stooge
{
  Moe,
  Larry,
  Curly
}

它被编译成javascript，如下所示：

var Stooge;
(function (Stooge) {
    Stooge[Stooge["Moe"] = 0] = "Moe";
    Stooge[Stooge["Larry"] = 1] = "Larry";
    Stooge[Stooge["Curly"] = 2] = "Curly";
 })(Stooge || (Stooge = {}));  <---error here

我的问题是:在每个浏览器中，除了 Safari之外，这一切都很好。但是在Safari中，我得到了以下错误：

YourFile.js:[Line X]TYPE_MISMATCH_ERR: DOM Exception 17: The type of an object was incompatible with the expected type of the parameter associated to the object.

这只发生在与DOM元素具有相同名称的枚举中，我猜想这是因为这两个定义之间存在冲突，但除了在Safari中以外，相同的代码不会导致任何其他错误。

那么，为什么它能在其他浏览器中工作，在Safari中有什么方法可以解决这个问题呢？(我可以重命名枚举或DOM元素，但如果可能的话，我希望避免人工命名约定的需要。)

Answer 1

只要有可能，就应该避免在全局范围内放置任何内容。外部模块(很快将被重命名为更简单的名称，模块)是一种很好的方法。使用外部模块，您的enum将安全地隐藏在模块的范围内，不应该与其他任何东西发生冲突。

另一种解决方案是使用常量枚举，将其转换为普通数字(即删除枚举类型)。例如，下面的TypeScript：

const enum Stooge
{
  Moe,
  Larry,
  Curly
}

var x = Stooge.Curly;

JavaScript的结果如下：

var x = 2 /* Curly */;

您的最后一个选择是避免可能发生冲突的名称。在全局范围内放置某物时，它有助于尽可能具体地将碰撞的风险降到最低。