任意类型定义给出：“boolean”类型的属性“x”不能分配给字符串索引类型“string”

Question

看来这是相关的，但我不明白。

这是我想要的一个例子：

myObj应接受以下设置：

myObj = {'key1': 'val1', 'key2': 'val2', 'key3': 'val3'};
myObj = {'key1': 'val1', 'key2': {'key2': 'val2', 'btnWrap': true}, 'key3': 'val3'};

所以我想出了以下类型定义：

let myObj: {[key: string]: string | {[key: string]: string, btnWrap: boolean}}

“boolean”类型的属性“btnWrap”不可分配给字符串索引类型“string”.ts(2411)

（我不明白上面的错误信息。）

请注意：

• key1、2、3 代表任意键名。
• 请'key2': {'key2': 'val2', 'btnWrap': true}注意，它应该是相同的任意键名。（例如 key2）

我很高兴得到一些指导。

---

@翻转：

let myObj: {
  [key: string]: string | boolean,
  btnWrap: boolean
}

myObj = {'arr0': 'val0', 'arr1': {'arr1': 'val1', 'btnWrap': false}};

输入 '{ 'arr1': 字符串; 'btnWrap'：布尔值；}' 不可分配给类型 'string | 布尔值'。输入 '{ 'arr1': 字符串; 'btnWrap'：布尔值；}' 不可分配给类型“true”。ts(2322)

Answer 1

错误信息是因为btnWrap类型与字符串索引类型boolean不匹配。该类型试图表示每个属性都有一个字符串值和一个布尔值。它们不可能同时为真，因此编译器会警告您。string{[key: string]: string, btnWrap: boolean}}btnWrap

没有一个具体类型MyObj可以代表您所描述的约束。但是您可以创建一个通用类型，它采用键文字的并集K并生成一个类型MyObj<K>：

type MyObj<K extends keyof any> = 
  { [P in K]: string | (Record<P, string> & { btnWrap: boolean }) };

该类型MyObj<K>是映射类型，其中带有键的每个属性P要么具有值类型string，要么具有与的交集。后一种类型本身就是一个带有键和属性的映射类型（在标准库中定义）。因此 的每个属性必须类似于或。{btnWrap: boolean}Record<P, string>PstringMyObject<K>someKey: stringsomeKey: {btnWrap: boolean, someKey: string}

同样，要描述 的类型myObj，let myObj: MyObj = ...您必须执行诸如let myObj: MyObj<"key1"|"key2"|"key3"> = ...指定通用参数之类的操作，而不是像 之类的简单操作。为了防止您自己执行此操作，您可以使用通用辅助函数来帮助推断K给定对象的类型，如下所示：

const asMyObj = <T extends MyObj<keyof T>>(myObj: T) => myObj;

现在我们来尝试一下：

let myObj1 = asMyObj({ key1: 'val1', key2: 'val2', key3: 'val3' });
let myObj2 = asMyObj({ key1: 'val1', key2: { key2: 'val2', btnWrap: true }, key3: 'val3' });

这些工作得很好。现在让我们看看如果违反约束会出现什么问题：

let badMyObj1 = asMyObj({ key1: 1 }); 
// error, number is bad

let badMyObj2 = asMyObj({ key1: "val1", key2: { key2: "val2" } }); 
// error, missing btnWrap

let badMyObj3 = asMyObj({ key1: "val1", key2: { btnWrap: true } }); 
// error, missing key2 inside value

let badMyObj4 = asMyObj({ key1: "val1", key2: { key3: "val3", btnWrap: true } }); 
// error, key3 not expected inside value

这些错误可能是您希望看到的，对吧？

好的，希望有帮助。这是上述代码的Playground 链接。祝你好运！