如何在 TypeScript 中使用 react-use-gesture 和 useSpring？

如何解决如何在 TypeScript 中使用 react-use-gesture 和 useSpring？

我正在尝试在 TypeScritpt 中实现 react-use-gesture 和 useSprign 的类似实现。我正在尝试的 JS 示例是 https://codesandbox.io/s/cards-fduch 我得到了这张黑卡，但在 html 元素中我可以看到呈现的卡片。

我对 TypeScript 的尝试就在这里。

 const to = (i:number) => ({ x: 0,y: i * -4,scale: 1,rot: -10 + Math.random() * 20,delay: i * 100 })
      const from = (i:number) => ({ x: 0,rot: 0,scale: 1.5,y: -1000 })
    const Card:React.FC<Props> = ({ items1}) => {
      const items = [
        'https://upload.wikimedia.org/wikipedia/en/f/f5/RWS_Tarot_08_Strength.jpg','https://upload.wikimedia.org/wikipedia/en/5/53/RWS_Tarot_16_Tower.jpg'
        
      ]
      
     
      const [trans,setTrans] = React.useState( "translateX(0px)");
      
      const [gone] = React.useState(() => new Set()) 
      const [props,set] = useSprings(items.length,(i:number) => ({ ...to(i),from: from(i) })) 
    
      const bind = useDrag(({ args: [index],down,movement: [mx],direction: [xDir],veLocity }) => {
          const trigger = veLocity > 0.2 
        const dir = xDir < 0 ? -1 : 1 
        if (!down && trigger) gone.add(index) // If button/finger's up and trigger veLocity is reached,we flag the card ready to fly out
        set((i) => {
          if (index !== i) return // We're only interested in changing spring-data for the current spring
          const isGone = gone.has(index)
          const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0 
          const rot = mx / 100 + (isGone ? dir * 10 * veLocity : 0) 
          const scale = down ? 1.1 : 1 
          return { x,rot,scale,delay: undefined,config: { friction: 50,tension: down ? 800 : isGone ? 200 : 500 } }
        })
      });
    
     
      return <>{props.map(({ x,y },i) => (
        
        <animated.div key={i} style={{ x,y }}>
          {/* This is the card itself,we're binding our gesture to it (and inject its index so we kNow which is which) */}
          <animated.div {...bind(i)} style={{ backgroundImage: `url(${items[i]})` }} />
        </animated.div>
      ))}</>
      
    
    };  
    export default Card;