时间戳

首页 > 解决方案 > 如何动态访问对象属性？

typescript - 如何动态访问对象属性？

问题描述

我需要动态访问 forEach 中的对象属性。但我收到一个错误：“元素隐式具有'any'类型，因为'string'类型的表达式不能用于索引类型'{}'”

我尝试使用 props[key] 或 props.key，但收到相同的错误

Object.keys(props).forEach(key => element.setAttribute(key, props[key]));

标签： typescript

解决方案

如果您不想为对象创建特定的字符串键类型，则需要为 Javascript 对象创建一个通用类型：

interface IPojo {
  [key: string]: any,
}

const div = document.createElement('div');

const obj: IPojo = {
  'data-src': 'some-url',
  'data-width': 2,
};

Object.keys(obj).forEach(key => div.setAttribute(key, obj[key]));

通过声明它是该字符串键通用接口的实现，类型检查器将正确推断您的动态访问是可以的。

如果您的对象在值方面是同质的，您可以通过使用泛型使其更加类型安全：

interface IHomogenousObject<T> {
  [key: string]: T,
}

const obj2: IHomogenousObject<string> = {
  'data-src': 'some-url',
};

现在编译器将保留从对象中提取的字符串值的类型安全性。

这里是游乐场。

推荐阅读