Я новичок в машинописном тексте, и это ад, пытаясь заставить работать какой-то код, может кто-нибудь помочь мне решить эту ошибку 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;
В машинописном тексте вам не разрешен доступ к свойствам, которые могут не существовать. Это означает, что при наличии такого типа, как { 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, что мы сертифицируем эту операцию как безопасную.