如何在对象打字稿代码中找到元素 [英] How do I find element in object typescript code

问题描述

所以，我试图动态地为我的图标分配颜色......但是这行代码一直在抱怨，

So, am trying to assign colours to my icons dynamically ... but this line of code keeps complaining,

let icon = iconsList[name];

当我悬停它时..这就是解释

When I hover of it .. This is the explanation "

元素隐式具有'any'类型，因为'string'类型的表达式不能用于索引类型'{ heart: string;星:字符串；如:字符串；不喜欢:字符串；闪光:字符串；标记:字符串；过滤器:字符串；用户:字符串；圆圈:字符串；标签:字符串；日历:字符串；雪佛龙左:字符串；选项V:字符串；optionsH:字符串；聊天:字符串；探索:字符串；}'.在类型{ heart: string;"上找不到带有string"类型参数的索引签名.星:字符串；如:字符串；不喜欢:字符串；闪光:字符串；标记:字符串；过滤器:字符串；用户:字符串；圆圈:字符串；标签:字符串；日历:字符串；雪佛龙左:字符串；选项V:字符串；optionsH:字符串；聊天:字符串；探索:字符串；}'.ts(7053)

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ heart: string; star: string; like: string; dislike: string; flash: string; marker: string; filter: string; user: string; circle: string; hashtag: string; calendar: string; chevronLeft: string; optionsV: string; optionsH: string; chat: string; explore: string; }'. No index signature with a parameter of type 'string' was found on type '{ heart: string; star: string; like: string; dislike: string; flash: string; marker: string; filter: string; user: string; circle: string; hashtag: string; calendar: string; chevronLeft: string; optionsV: string; optionsH: string; chat: string; explore: string; }'.ts(7053)

interface Props{
    name:string,
}

const Icon = ({ name }:Props) => {
    const iconsList = {
      heart: '',
      star: '',
      like: '',
      dislike: '',
      flash: '',
      marker: '',
      filter: '',
      user: '',
      circle: '',
      hashtag: '',
      calendar: '',
      chevronLeft: '',
      optionsV: '',
      optionsH: '',
      chat: '',
      explore: ''
    };
  
    let icon = iconsList[name];
    icon = icon.substr(3);
    icon = String.fromCharCode(parseInt(icon, 16));
  
    return icon;
  };
  
  export default Icon;
  

Vscode 中代码的屏幕截图 在第 25 行，我正在尝试选择特定的图标颜色，但是它抱怨

ScreenShot of the code in Vscode On line 25, am trying to pick the specific icon color but it complains

推荐答案

值得稍微分解一下，因为它很有教育意义.从 object 获取属性 string 是一个偏函数；某些属性和对象的组合可以返回值，但不是全部.

It's worth breaking this down a little bit because it's quite educational. Getting a property string from an object is something of a partial function; some combinations of properties and objects can return values, but not all.

在您的示例中，不能保证从 iconsList 类型中获取类型为 string (name) 的属性会给出值;如果 string 是 "xyz" 会怎样?在那种情况下，应该值是多少?很难给出一个真正具体的答案.

In your example, getting a property which has type string (name) from the type of iconsList is not guaranteed to give a value; what if the string is "xyz"? What ought the value be in that case? It's hard to give a really concrete answer to that.

如果我们看一个精简的例子，我们会看到同样的错误:

If we look at a condensed example, we see the same error:

const getIcon = (iconName: string) => {
  const iconsList = {
      heart: '',
      star: '',
  };

  return iconsList[iconName];
};

给我们同样的错误 return iconsList[iconName];

不过，我们可以做得更好，以完成这项工作.如果我们想说的是，我们传入的 iconName 将始终是 iconsList 对象的属性，我们可以通过.一种类型:

We can do better though, in order to make this work. If what we want to say is that the iconName we pass in will always be a property of the iconsList object, we can do that via. a type:

const iconsList = {
    heart: '',
    star: '',
};

const getIcon = (iconName: keyof typeof iconsList) => {
  return iconsList[iconName];
}

const x = getIcon('heart'); // works
const y = getIcon('xyz');   // type error

...我们可以通过这个变得更通用:

...and we can get more generic with this:

const path = <T>(o: T) => (k: keyof T) => o[k];

const iconsList = {
    heart: '&#xe800;',
    star: '&#xe801;',
};

const getIcon = path(iconsList);

const x = getIcon('heart'); // works
const y = getIcon('xyz');   // type error

如果您希望无论输入什么都始终返回可用值，请考虑查看 Maybe 返回类型；这样，你总是可以返回一个 Maybe，如果你不能得到对象的键，它就会是一个 Nothing.

If you'd like to always return a usable value no matter what the input, consider looking into a Maybe return type; that way, you can always return a Maybe, which will be a Nothing if you can't get the key on the object.

希望这能让您深入了解为什么会出现错误以及如何修复它.如果您有任何问题，请随时提问.

Hopefully that gives an insight into why you're getting the error and how you can fix it. If you have any questions, please ask away.

根据评论更新:

您需要确保您还在 Props 中设置了类型，以便我们可以使用它来访问 iconTypes:

You'd want to make sure that you're also setting the type in Props in order that we can use it to access iconTypes:

const iconsList = {
    heart: '',
    star: '',
    like: '',
    dislike: '',
    flash: '',
    marker: '',
    filter: '',
    user: '',
    circle: '',
    hashtag: '',
    calendar: '',
    chevronLeft: '',
    optionsV: '',
    optionsH: '',
    chat: '',
    explore: ''
};

interface Props{
    name: keyof typeof iconsList;
}

etc.

这篇关于如何在对象打字稿代码中找到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！