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

Question

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

let icon = iconsList[name];

当我盘旋的时候......这就是解释"

元素隐式有一个'any'类型，因为'string'类型的表达式不能用于索引类型'{ 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; }'。 在类型'{ 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)上没有发现带有'string'类型参数的索引签名。

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行，我试图选择特定的图标颜色，但它抱怨说

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

你可以做 可索引类型 对于这种类型的对象

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;