Блог

У меня возникают различные @typescript-eslint ошибки при использовании Transition компонента из react-transition-group .

Я следовал небольшому примеру официальной группы перехода React для JS, но с TypeScript ESLint в моем проекте я получаю следующую ошибку: Unsafe assignment of an any value .

Еще одна связанная ошибка, которая element implicitly has an 'any' type because expression of type 'string' can't be used to index type .

 const transition = {
  transitionStyles: {
    entering: { opacity: 0, transform: 'translateX(0rem)' },
    entered: { opacity: 1, transform: 'translateX(0rem)' },
    exiting: { opacity: 1, transform: 'translateX(2rem)' },
    exited: { opacity: 0, transform: 'translateX(-2rem)' },
    unmounted: { opacity: 0, transform: 'translateX(-2rem)' },
  } as { [key: string]: React.CSSProperties },
};
 

 <Transition in timeout={700}>
  {(state) => (
    <div style={{ ...transition.transitionStyles[state] }}>
      /* ... */
    </div>
  )}
</Transition>
 

1. Вам нужно привести state переменную в виде строки, потому что по умолчанию она a TransitionStatus (объявлена из react-transition-group ):

    {(state: string) => (
     <div style={{ ...transition.transitionStyles[state] }}>
       /* ... */
     </div>
   )}
    

2. Затем перейдите к приведению transitionStyles any object в типизированный объект, который возвращает для каждого key React.CSSProperties объекта. Это можно сделать следующим образом:

    const transition = {
     transitionStyles: {
       entering: { opacity: 0, transform: 'translateX(0rem)' },
       entered: { opacity: 1, transform: 'translateX(0rem)' },
       exiting: { opacity: 1, transform: 'translateX(2rem)' },
       exited: { opacity: 0, transform: 'translateX(-2rem)' },
       unmounted: { opacity: 0, transform: 'translateX(-2rem)' },
     } as { [key: string]: React.CSSProperties }
   };