Typescript 如何在对象类型脚本代码中找到元素

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

let icon = iconsList[name];

当我在它上面盘旋的时候。。这就是解释。”

---

元素隐式具有“any”类型，因为类型为“string”的表达式不能用于索引类型{heart:string；star:string；like:string；Love: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；}'。 在类型{heart:string；star:string；like:string；厌恶：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）

界面道具{
名称：string，
}
常量图标=（{name}:Props）=>{
常量图标列表={
心脏：“；”，
星号：“；”，
例如：“；”，
不喜欢：“；”，
闪光：“和#xe803；”，
标记：“；”，
过滤器：“；”，
用户：“；”，
圆圈：“；”，
标签：“；”，
日历：“；”，
雪佛兰左：“；”，
选项V:'和#xf142；'，
选项sh:“；”，
聊天室：“；”，
探索：“；”
};
让icon=iconsList[name]；
icon=icon.substr（3）；
icon=String.fromCharCode（parseInt（icon，16））；
返回图标；
};
导出默认图标；

您可以为这种类型的对象创建

类型键值={
[索引：字符串]：字符串
}
常量IConList:KeyValues={
价值观
}

值得稍微细分一下，因为这很有教育意义。从

对象

获取属性

字符串

是一个局部函数；属性和对象的某些组合可以返回值，但不是全部

在您的示例中，从类型为

iconsList

的属性中获取类型为

string

（

name

）的属性并不能保证提供一个值；如果

string

是

“xyz”

，该值应该是什么？很难给出真正具体的答案

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

const getIcon=（iconName:string）=>{
常量图标列表={
心脏：“；”，
星号：“；”，
};
返回IConList[iconName]；
};

在

返回IConList[iconName]；

但是，我们可以做得更好，以实现这一点。如果我们想说的是，我们传入的

iconName

将始终是

IConList

对象的属性，那么我们可以通过以下方式实现。类型：

const图标列表={
心脏：“；”，
星号：“；”，
};
const getIcon=（iconName:keyof-typeof-iconsList）=>{
返回IConList[iconName]；
}
const x=getIcon（'heart'）；//有效
常量y=getIcon（'xyz'）；//类型错误

…我们可以通过以下方式获得更通用的功能：

constpath=（o:T）=>（k:keyof T）=>o[k]；
常量图标列表={
心脏：“；”，
星号：“；”，
};
const getIcon=path（iconsList）；
const x=getIcon（'heart'）；//有效
常量y=getIcon（'xyz'）；//类型错误

如果你想总是返回一个有用的值，不管输入什么，考虑查看返回类型；这样，你总是可以返回一个<代码>也许，如果你不能在对象上获得键，它将是一个<代码>没有< /代码>。 希望这能让你深入了解为什么会出现错误，以及如何修复错误。如果你有任何问题，请直接提问

---

根据评论更新：

您还需要确保在

道具中设置了类型，以便我们可以使用它访问
iconTypes
：

const图标列表={
心脏：“；”，
星号：“；”，
例如：“；”，
不喜欢：“；”，
闪光：“和#xe803；”，
标记：“；”，
过滤器：“；”，
用户：“；”，
圆圈：“；”，
标签：“；”，
日历：“；”，
雪佛兰左：“；”，
选项V:'和#xf142；'，
选项sh:“；”，
聊天室：“；”，
探索：“；”
};
界面道具{
名称：IConList类型的键；
}
等
因此，根据奥利维拉迪尼的说法，如果我以正确的方式跟随他，那么你可以如何实现它

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;

const图标列表={
心脏：“；”，
星号：“；”，
例如：“；”，
不喜欢：“；”，
闪光：“和#xe803；”，
标记：“；”，
过滤器：“；”，
用户：“；”，
圆圈：“；”，
标签：“；”，
日历：“；”，
雪佛兰左：“；”，
选项V:'和#xf142；'，
选项sh:“；”，
聊天室：“；”，
探索：“；”
};
界面道具{
名称：IConList类型的键；
}
常量图标=（{name}:Props）=>{
常量路径=（o:T）=>（k:keyof T）=>o[k]；
const getIcon=path（iconsList）；
const x=getIcon（name）；//有效
返回x；
};
导出默认图标；

那么，如何重用屏幕上的图标

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;

从“React”导入React；
从“react native”导入{Text，View}；
从“./Icon”导入图标；
界面道具{
}
const TestComponent=（{}:Props）=>{
返回(
测试图标
);
};
导出默认测试组件；
您得到了哪个错误代码？元素隐式地具有“any”类型，因为类型为“string”的表达式不能用于索引类型。这样做，我们就无法验证
iconsList[name]
exists作者没有指定这种情况。同样，这不是codereview堆栈交换，我认为这不是作者指定的