Typescript .interpolate

[tnorlund]

I'm attempting to TypeScript-ify my blog. I'm using react-spring to animate a few SVG elements. How do I handle multiple interpolate calls while using typescript?

import React from 'react'
import { interpolate, Spring, animated } from 'react-spring/renderprops'
import { useInView } from 'react-hook-inview'
...
return <div ref={ref} style={ { height: `200pt`, } }>
Spring native to={ { x: inView ?  max_x : min_x } } >
      { ( props ) => (
        <svg width="100%" height="100%" viewBox="0 0 200 100">
          <animated.g
            style={ {
              position: `absolute`,
              transformOrigin: `25% 50%`,
              transform: props.x
                .interpolate( { range: [min_x, max_x], output: [0, 1] } ) // <- This doesn't work in TypeScript
                .interpolate( (x: Number) => `scale(${x}, ${x})` )
            } }
          >

[joshuaellis]

Is this v8 or v9? In v9, interpolate is depreceated, you should use to instead. If the problem persists, please consider filling out a bug report.