Как устранить различные ошибки с помощью функции стиля StaggeredMotion в машинописи? - PullRequest
Новая
       26

Как устранить различные ошибки с помощью функции стиля StaggeredMotion в машинописи?

0 голосов
/ 24 января 2019

Я хочу использовать StaggeredMotion, как указано здесь: https://github.com/chenglou/react-motion#staggeredmotion-

Пример кода 

<StaggeredMotion
  defaultStyles={[{h: 0}, {h: 0}, {h: 0}]}
  styles={prevInterpolatedStyles => prevInterpolatedStyles.map((_, i) => {
    return i === 0
      ? {h: spring(100)}
      : {h: spring(prevInterpolatedStyles[i - 1].h)}
  })}>
  {interpolatingStyles =>
    <div>
      {interpolatingStyles.map((style, i) =>
        <div key={i} style={{border: '1px solid', height: style.h}} />)
      }
    </div>
  }
</StaggeredMotion>

Поскольку мой проект написан на typescript, мне нужно преобразовать его в соответствующий синтаксис typescript и соответствовать стандарту кодирования моего проекта.

Например, он не позволяет использовать неявный тип any.

Итак, вот что я сделал 

import { StaggeredMotion, PlainStyle, spring } from 'react-motion';

const styleFn = (previousInterpolatedStyles?: PlainStyle[]) => prevInterpolatedStyles.map((tmp, i) => {
          return i === 0
              ? { h: spring(100) }
              : { h: spring(prevInterpolatedStyles[i - 1].h) };
        })
return (
    <StaggeredMotion
        defaultStyles={[{ h: 0 }, { h: 0 }, { h: 0 }]}
        styles={styleComputer}>
      />
    {interpolatingStyles =>
    <div>
      {interpolatingStyles.map((style, i) =>
        <div key={i} style={{border: '1px solid', height: style.h}} />)
     }
    </div>
   }
    </StaggeredMotion>
);

Однако я получил ряд ошибок от компилятора машинописи:

ошибка TS7006: параметр tmp неявно имеет тип 'any'. Ошибка

ошибка TS7006: параметр 'i' неявно имеет тип 'any'. ошибка TS2532: Возможно объект не определен

Мне удалось исправить первые два, явно предоставив информацию о типах tmp и i: 

const styleFn = (previousInterpolatedStyles?: PlainStyle[]) => prevInterpolatedStyles.map((tmp: PlainStyle, i: number) => {
          return i === 0
              ? { h: spring(100) }
              : { h: spring(prevInterpolatedStyles[i - 1].h) };
        })

Теперь я получаю эти две ошибки:

ошибка TS2322: Тип '(prevInterpolatedStyles ?: PlainStyle [] | undefined) => {h: OpaqueConfig; } [] | undefined 'не может быть назначен type '(previousInterpolatedStyles ?: PlainStyle [] | undefined) => Стиль[]'. Тип '{h: OpaqueConfig; } [] | не определено присваивается типу «Стиль []». Тип 'undefined' нельзя назначить типу 'Style []'.

Как я могу исправить эту ошибку?

...