如何在 TypeScript 严格模式下使用括号表示法访问对象的属性

Question

以下 TypeScript 示例代码显示了严格模式下Element implicitly has an 'any' type because type '{one: number; two: number;}' has no index signature该行const one = obj[prop];中的错误。

编译器允许 line const two = obj[propName];，所以我不明白为什么会显示错误或者一般来说如何使用括号表示法访问对象的属性。

const obj = { one: 1, two: 2 };

const props = { one: 'one', two: 'two' };

// it is not possible add or change any properties in the props object 
props.zero = 'zero';
props.one = 1;

// prop has the type string
const prop = props.one;

// using the bracket notation fails with the following error message:
// Element implicitly has an 'any' type because type '{one: number; two: number;}' has no index signature.
// const prop: string
const one = obj[prop];

// this works because propName is of type 'two'
const propName = 'two';
const two = obj[propName];

Answer 1

元素隐式具有 'any' 类型，因为类型 '{one: number; 二：number;}' 没有索引签名

您的对象没有索引签名，它有两个命名属性。

编译器允许行 const two = obj['two'];

它允许您的属性名称，这就是为什么 obj['two'] 和 obj['one'] 会起作用的原因。

并且 const prop 是一个字符串，所以我不明白为什么会显示错误

因为字符串可以有更多的值，而不仅仅是“一”或“二”，因此编译器无法确保，您的object[myString]调用将起作用。它仅对两个定义的字符串值有效。

一般而言，如何使用括号表示法访问对象的属性。

这会起作用：

 const prop: 'one' | 'two' = 'one';
 const test = obj[prop]

您说： prop 的值为“一”或“二”，因此编译器知道您的 obj[prop] 将始终有效。

或者

 class Example {
   one: string;
   two: string;
 }
 const prop: keyof Example = 'one';
 const test = obj[prop];

这里keyof(ClassName)告诉编译器，你的 prop var 将有一个现有的属性名称Example.

上面的示例假设您有一个对象，其中只有名为“one”和“two”的属性有效。如果您想以“字典样式”使用您的对象，请告诉打字稿并添加索引签名：

 const obj: {[key:string]: string;} = { one: 'one' };
 const text = obj[myString];

现在 obj 允许每个字符串值作为键。