Ошибка машинописного текста: элемент неявно имеет тип «любой», поскольку выражение типа «строка» не может использоваться для типа индекса

Я новичок в машинописном тексте, и это ад, пытаясь заставить работать какой-то код, может кто-нибудь помочь мне решить эту ошибку ts.

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ 'sections.hero': ({ sectionData, key }: props) => Element; }'.   No index signature with a parameter of type 'string' was found on type '{ 'sections.hero': ({ sectionData, key }: props) => Element; }'.

мой код:

type sectionDataProps = {
  sectionData: {
    __component: string;
  };
};

// Map Strapi sections to section components
const sectionComponents = {
  'sections.hero': Hero,
};

// Display a section individually
const Section = ({ sectionData }: sectionDataProps) => {
  // Prepare the component
  const SectionComponent = sectionComponents[sectionData.__component];

  if (!SectionComponent) {
    return null;
  }

  // Display the section
  return <SectionComponent data = {sectionData} />;
};

// Display the list of sections
const Sections = (props: { sections: [] }) => {
  return (
    <>
      {/* Show the actual sections */}
      {props.sections.map((section) => (
        <Section
          sectionData = {section}
          key = {`${section.__component}${section.id}`}
        />
      ))}
    </>
  );
};

export default Sections;

625
1

Ответ:

Решено

В машинописном тексте вам не разрешен доступ к свойствам, которые могут не существовать. Это означает, что при наличии такого типа, как { a: number }, вы можете получить доступ только к свойству a. Проверка свойства b будет ошибкой типа, потому что оно не существует.


Итак, у вас есть этот тип для ключа:

__component: string;

И этот тип для объекта, на котором ожидается ключ:

const sectionComponents = {
  'sections.hero': Hero,
};

Это означает, что для этой операции разрешена только одна строка:

sectionComponents[sectionData.__component]

И эта строка 'sections.hero' любая другая строка не допускается.

Вы можете исправить это несколькими способами.


Во-первых, вы можете изменить тип свойства __component на:

type sectionDataProps = {
  sectionData: {
    __component: keyof typeof sectionComponents;
  };
};

Теперь любой string не является допустимым значением. Строки должен являются ключами объекта sectionComponents.

И остальная часть вашего кода работает без изменений. См. Детская площадка


Если вы не хотите менять типы свойств, вам нужно изменить логику вашей функции, чтобы убедиться, что вы не получаете доступ к свойству, которое может не существовать.

// Display a section individually
const Section = ({ sectionData }: sectionDataProps) => {
  // Prepare the component
  if (sectionData.__component in sectionComponents) {
      const key = sectionData.__component as keyof typeof sectionComponents
      const SectionComponent = sectionComponents[key];
      return <SectionComponent data = {sectionData} />;
  }

  return null
};

Здесь мы используем проверку in, чтобы увидеть, существует ли свойство для этого объекта. Тогда должно быть безопасно вручную привести это к keyof typeof sectionComponents, чтобы сообщить typescript, что мы сертифицируем эту операцию как безопасную.

Посмотреть игровую площадку


Интересные вопросы для изучения

Почему в TypeScript пустой массив выводится как «любой []», когда значение noImplicitAny равно true, и выводится как «никогда []», когда оно ложно?Как протестировать ввод с помощью библиотеки тестирования React?Jest collectCoverageFrom и CoverageThreshold не работаетКак исправить «Возможно, вам понадобится соответствующий загрузчик для обработки этого типа файла, в настоящее время загрузчики не настроены для обработки этого файла»Ошибка Webpack 5 - Uncaught ReferenceError: требование не определеноReferenceError: я не определен при использовании CKEditorРеагировать на ошибки onMouseEnter и onMouseLeave, не работающие последовательноУ кого-нибудь есть рабочий пример для новой папки приложения Next JS Layouts RFC?Передать переменную от клиента к серверу в NEXTJSСоздание панели инструментов в Next.js: лучшие практики для создания частных страниц с ролями без «мерцания» с использованием аутентификации JWT?