javascript - TypeScript 中奇怪的联合类型行为

Question

有人能解释一下 TypeScript (2.4.1) 中的以下行为吗？

场景:我有一个按钮，可以是“红色”或“红色和圆形”(修改)。我想要以下语法来描述它:

button.mods = "red";
button.mods = ["red", "round"];
button.mods = { red: true, round: false };

为了描述所有这些，我使用以下接口(interface):

interface HasMods<T extends string>{ 
    mods: T | T[] | { [key in T]?: boolean } 
}

interface Button extends HasMods<"round" | "red"> { 
}

好的，现在我们可以做一些测试:

let b: Button;
b.mods = "red"; //ok, correct 
b.mods = "green"; //error, correct

b.mods = ["red"]; //ok, correct
b.mods = ["green"]; //error, correct

b.mods = {red: true}; //ok, correct
b.mods = {red: true, green: true}; //error, correct

到目前为止一切都很完美。但现在还是个谜:

b.mods = {red: true, map: false}; //ok, why ???

为什么值“map”对于我的类型为 { [key in T]?: boolean } 的对象有效，其中 T 是“red” | “圆形的”？ “map”既不是“红色”也不是“圆形”。

实际上，所有数组方法在这里都是有效的 - “every”、“copyWithin”等...

Answer 1

如果您查看数组的 proto 定义，就会发现“map”是属性之一。

因此，当您比较“T 中的映射”时，它是 true，因为它是在数组结构内进行比较，如果它是一个对象，它将是 false

console.log("map" in {"element":4}) // false
console.log("map" in [4]) //true