如何在对象打字稿代码中找到元素

Question

因此，我正在尝试为图标动态分配颜色...但是这一行代码不断让人抱怨，

let icon = iconsList[name];

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

元素隐式地具有“ any”类型，因为类型“ string”的表达式不能用于索引类型“ {heart：string;星：字符串；例如：字串；不喜欢：string; flash：字符串;标记：字符串；过滤器：字符串;用户：字符串；圆圈：字符串；主题标签：字符串；日历：字符串； chevronLeft：字符串; optionsV：字符串； optionsH：字符串； chat：字符串；探索：字符串； }'。 在类型'{heart：string;的类型上找不到带有参数'string'的索引签名。星：字符串；例如：字串；不喜欢：string; flash：字符串;标记：字符串；过滤器：字符串;用户：字符串；圆：字符串;主题标签：字符串；日历：字符串； chevronLeft：字符串; optionsV：字符串； optionsH：字符串； chat：字符串；探索：字符串； }'。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 On line 25, am trying to pick the specific icon color but it complains 中的代码的屏幕截图

Answer 1

值得一讲，因为它很有教育意义。从string获取属性object是部分功能；属性和对象的某些组合可以返回值，但不是全部。

在您的示例中，不能保证从string类型获得类型为name（iconsList）的属性；如果string是"xyz"怎么办？在这种情况下，值应该是什么？很难给出一个真正具体的答案。

如果我们看一个简短的例子，会看到相同的错误：

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

  return iconsList[iconName];
};

在第return iconsList[iconName];行上给我们同样的错误

尽管如此，我们才能做得更好。如果我们要说的是传入的iconName始终是iconsList对象的属性，则可以通过以下方式进行操作。类型：

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

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

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

...我们可以通过以下方式获得更多通用信息：

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。

希望能够深入了解为什么会出现错误以及如何解决该错误。如有任何疑问，请问。

---

根据评论更新：

您需要确保还在Props中设置类型，以便我们可以使用它来访问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.

Answer 2

您可以为此类型的对象制作indexable type

type KeyValues = {
  [index: string]: string
}

const iconsList: KeyValues = {
   ...values...
}

Answer 3

因此，根据OliverRadini的介绍，如果以正确的方式关注他，您将如何实施它。

Icon.ts文件

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

interface Props{
    name: keyof typeof iconsList;
}

const Icon = ({ name }:Props) => {
    const path = <T>(o: T) => (k: keyof T) => o[k];

    const getIcon = path(iconsList);
    const x = getIcon(name); // works
    return x;
 };

export default Icon;

然后如何重用

上的图标

test.tsx文件

import React from 'react';
import { Text, View } from 'react-native';
import Icon from './Icon';

interface Props {
}

const TestComponent = ({}: Props) => {
  return (
    <View style={styles.containerTest}>
      <View style={styles.testView}>
        <Text style={styles.testText}>
          <Icon name="heart" /> Test icon
        </Text>
      </View>
    </View>
  );
};

export default TestComponent;