typescript - 任意类型定义给出 : Property 'x' of type 'boolean' is not assignable to string index type 'string'

Question

好像THIS是相关的，但我不明白。

这是我想要的示例:

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}}

Property 'btnWrap' of type 'boolean' is not assignable to string index type 'string'.ts(2411)

(我不明白上面的错误信息。)

请注意:

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

我很高兴得到一些指导。

---

@埃弗特:

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

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

Type '{ 'arr1': string; 'btnWrap': boolean; }' is not assignable to type 'string | boolean'. Type '{ 'arr1': string; 'btnWrap': boolean; }' is not assignable to type 'true'.ts(2322)

Answer 1

错误信息是因为 btnWrap输入 boolean与 string index 不匹配输入 string .类型{[key: string]: string, btnWrap: boolean}}试图说每个属性都有一个字符串值和 btnWrap有一个 bool 值。它们不可能都为真，因此编译器会警告您。

---

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

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

类型MyObj<K>是 mapped type其中每个属性都有键 P要么具有值类型 string ，或 intersection的 {btnWrap: boolean}与 Record<P, string> .后一种类型本身是一个映射类型 ( defined in the standard library )，键为 P。和属性 string .所以 MyObject<K> 的每个属性必须看起来像 someKey: string或 someKey: {btnWrap: boolean, someKey: string} .

同样，描述 myObj 的类型，而不是像 let myObj: MyObj = ... 这样简单的东西, 你必须做类似 let myObj: MyObj<"key1"|"key2"|"key3"> = ... 的事情您在其中指定通用参数。为避免您必须自己执行此操作，您可以使用通用辅助函数来帮助 infer 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 link到上面的代码。祝你好运!