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

Question

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

编译器允许行 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

Element implicitly has an 'any' type because type '{one: number; two: number;}' has no index signature

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

The compiler allows the line const two = obj['two'];

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

and the const prop is a string, so I cannot understand why the error is shown

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

how to generally speaking access a property of an object using the bracket notation.

这会起作用:

 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”的属性有效。如果您想以“字典样式”使用您的对象，请告诉 typescript 并添加索引签名:

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

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