在打字稿中，这两种索引签名类型有什么区别？

Question

我想根据道具将对象属性设置为布尔值或布尔数组值。

但是，当键值作为变量而不是文字字符串值接收时，它会显示错误。

我不知道两者之间的区别。

export interface State {
a: {
[key: string]: any[];
};
b: {
[key: string]: boolean | boolean[];
};
}
const state:State = {
a: {},
b: {},
}

const key:string = "test key";
// this works
let test1 = typeof state.b["test key"] === 'object' && state.a["test key"][0];
// type error : Property '0' does not exist on type 'boolean | boolean[]
let test2 = typeof state.b[key] === 'object' && state.b[key][0];

Answer 1

第一个索引签名之所以有效，是因为您使用的是any。所以state.a["test key"]是任意的，你可以用any做任何事情，包括对它进行索引。

第二个示例不起作用的原因是typescript不会使用变量缩小索引访问范围。所以这是有效的：

export interface State {
[key: string]: boolean | boolean[];
}
const state:State = {
}

let test2 = typeof state["test key"] === 'object' && state["test key"][0];

游乐场链接

替代方案是使用类型断言，或者将idex操作的结果放在变量中，并缩小其范围：

const key:string = "test key";
// This does not work
let test2 = typeof state[key] === 'object' && state[key][0];
// This works
let keyValue  = state[key];
let test3 = typeof keyValue === 'object' && keyValue[0];

// Or with a assertion
let test4 = typeof state[key] === 'object' && (state[key] as boolean[])[0];

游乐场链接