React-spring: TypeScript: Property does not exist on 'AnimatedValue<Pick<OverwriteKeys<....>>

[Daniel15]

🐛 Bug Report

This code:

const {height, opacity} = useSpring({
  from: {height: 0, opacity: 0},
  to: {
    height: isExpanded ? dimensions.height : 0,
    opacity: isExpanded ? 1 : 0,
  },
});

works fine at runtime, but produces this TypeScript error:

Property 'height' does not exist on type 'AnimatedValue<Pick<OverwriteKeys<{ from: { height: 0; opacity: 0; }; to: { height: number; opacity: number; }; 
}, CSSProperties>, never>>'

To Reproduce

Save above code in a .tsx file.

Expected behavior

This works fine at runtime, so the TypeScript definitions should be fine with it too.

Environment

• react-spring v8.0.27
• react v16.10.2

[aleclarson]

The typings for v8 aren't maintained anymore. Please use v9 beta instead. 👍

[Daniel15]

@aleclarson Is v9 beta stable? I usually try to avoid using beta software in prod. Seems like there's a pretty large increase in bundle size, too (ref https://bundlephobia.com/[email protected])

[VMatyagin]

Guys, if you see this error and you cannot use v9, just write the type explicitly
const { time } = useSpring({ from: { time: 0 }, to: { time: 1 } }) as AnimatedValue<{ time: number }>;
I hope I didn't say something stupid, because I met a lot of questions and no answers