Как найти элемент в коде машинописного текста объекта

Question

Итак, я пытаюсь динамически назначать цвета своим значкам ... но эта строка кода продолжает жаловаться:

let icon = iconsList[name];

Когда я нахожу на нее курсор ... Это объяснение "

Элемент неявно имеет тип 'any', поскольку выражение типа 'string' не может использоваться для индексации типа '{heart: string; star: string; like: string; dislike: string; fla sh : строка; маркер: строка; фильтр: строка; пользователь: строка; круг: строка; хэштег: строка; календарь: строка; chevronLeft: строка; параметрыV: строка; параметр sH: строка; чат: строка; исследовать: строка; } '. Для типа' {heart: string; star: string; like: string; dislike: string; fla sh: string; marker: string; filter: string ; пользователь: строка; круг: строка; хэштег: строка; календарь: строка; chevronLeft: строка; параметрыV: строка; параметр sH: строка; чат: строка; исследовать: строка;} '. 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 я пытаюсь выбрать определенный цвет значка c, но он жалуется

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

... и мы можем получить более общие c с этим:

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

Итак, согласно 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 3

Вы можете сделать индексируемый тип для этого типа объекта

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

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