Блог

Я создал объект, значения которого содержат HTML, при обращении к нему я получаю следующую ошибку:

Элемент неявно имеет тип ‘any’, поскольку выражение типа ‘any’ нельзя использовать для индексации типа ‘AnimatedImagesConfig’

Вот мой код:

   interface AnimatedImagesConfig {
    waterAndFire?: JSX.Element
    hasFaults?: JSX.Element
  }
  const animatedImages: AnimatedImagesConfig = {
    waterAndFire: <div className="imagesContainer frame"></div>,
    hasFaults: (
      <div className="imagesContainer">
        
      </div>
    ),
  }

const AnimatedDefault: string = animatedImages[get(wf1, 'fetchAnimationData.type')]
  let AnimatedComponent: JSX.Element | string = get(wf1, 'fetchAnimationData.hasAnimations', false) ? AnimatedDefault : <></>


  

Я не могу понять, что я делаю не так, поэтому буду признателен за любую помощь в этом, спасибо.

В javascript ключами объекта могут быть только строки или числа, что одинаково работает для typescript

 export interface Config {
  // here you can use any string type 
  [key: string]: JSX.Element;
  // here you can use key as a number
  [key: number]: JSX.Element;
}
  

Теперь давайте посмотрим, есть ли у вашего объекта конфигурация интерфейса

 const object: Config = {
  // here editComponent, addComponent is object key
  editComponent: <div className="">.....</div>,
  addComponent: <div className="">.....</div>
}
  

возьмите строковый тип и используйте его в качестве индексного ключа

 const type: string = 'addComponent'
  

затем вы можете получить доступ к индексации объекта «Объект»

  const keyComponent: JSX.Element = condition ? object[type] : <></>
 // or
 const editComponent: React.Component = object['editComponent']
  

используйте пару ключ-значение объекта, где ключ принимает тип, а значение — возвращаемый тип