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

Question

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

let icon = iconsList[name];

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

元素隐式具有“any”类型，因为“string”类型的表达式不能用于索引类型“{ heart:string;星：字符串；比如：字符串；不喜欢：字符串；闪光：字符串；标记：字符串；过滤器：字符串；用户：字符串；圆圈：字符串；标签：字符串；日历：字符串；雪佛龙左：字符串；选项V：字符串；选项H：字符串；聊天：字符串；探索：字符串； }'。 在“{ heart: string; 类型”上找不到带有“string”类型参数的索引签名。星：字符串；比如：字符串；不喜欢：字符串；闪光：字符串；标记：字符串；过滤器：字符串；用户：字符串；圆圈：字符串；标签：字符串；日历：字符串；雪佛龙左：字符串；选项V：字符串；选项H：字符串；聊天：字符串；探索：字符串； }'.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

因此，根据 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;

Answer 2

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

在您的示例中，不能保证从 iconsList 类型中获取类型为 string (name) 的属性会给出值；如果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 3

你可以为这种类型的对象创建indexable type

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

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