Convert target index files to TypeScript

package.json

@@ -89,6 +89,7 @@
     "react": "16.8.1",
     "react-dom": "16.8.1",
     "react-konva": "^16.8.0",
+    "react-native": "^0.58.4",
     "react-test-renderer": "16.8.1",
     "react-testing-library": "5.6.1",
     "rimraf": "2.6.3",
@@ -127,7 +128,9 @@
       "src/**/*.js",
       "!test/"
     ],
-    "setupFilesAfterEnv": ["<rootDir>/setupTests.js"]
+    "setupFilesAfterEnv": [
+      "<rootDir>/setupTests.js"
+    ]
   },
   "collective": {
     "type": "opencollective",

rollup.config.js

@@ -29,7 +29,7 @@ const getBabelOptions = ({ useESModules }, targets) => ({
 function createConfig(entry, out) {
   return [
     {
-      input: `./src/${entry}/index.js`,
+      input: `./src/${entry}/index`,
       output: { file: `dist/${out}.js`, format: 'esm' },
       external,
       plugins: [
@@ -44,7 +44,7 @@ function createConfig(entry, out) {
       ],
     },
     {
-      input: `./src/${entry}/index.js`,
+      input: `./src/${entry}/index`,
       output: { file: `dist/${out}.cjs.js`, format: 'cjs' },
       external,
       plugins: [

src/animated/Globals.ts

@@ -2,14 +2,15 @@ import { MutableRefObject, ReactType } from 'react'
 import createInterpolation from '../shared/interpolation'
 import AnimatedStyle from './AnimatedStyle'
 
-interface ApplyAnimatedValues {
-  fn(node?: any, props?: any): undefined | false
-  transform<Style extends object>(style: Style): Style
+type ApplyPropsFunction = (node?: any, props?: any) => undefined | false
+type TransformFunction = (style: any) => any
+export let applyAnimatedValues: {
+  fn: ApplyPropsFunction
+  transform: TransformFunction
 }
-export let applyAnimatedValues: ApplyAnimatedValues
 export function injectApplyAnimatedValues(
-  fn: ApplyAnimatedValues['fn'],
-  transform: ApplyAnimatedValues['transform']
+  fn: ApplyPropsFunction,
+  transform: TransformFunction
 ) {
   applyAnimatedValues = { fn, transform }
 }
@@ -45,15 +46,16 @@ export function injectDefaultElement(el?: typeof defaultElement) {
 }
 
 interface AnimatedApi {
-  <T extends ReactType>(node: MutableRefObject<T>): T
   <T extends ReactType>(
     node: MutableRefObject<T>,
-    mounted: MutableRefObject<boolean>,
-    forceUpdate: () => void
-  ): {
-    getNode(): T
-    setNativeProps(props: any): void
-  }
+    mounted?: MutableRefObject<boolean>,
+    forceUpdate?: () => void
+  ):
+    | T
+    | {
+        getNode(): T
+        setNativeProps(props: any): void
+      }
 }
 export let animatedApi: AnimatedApi = (node: any) => node.current
 export function injectAnimatedApi(fn: typeof animatedApi) {

src/animated/createAnimatedComponent.tsx

@@ -1,8 +1,11 @@
 import React, {
   ComponentPropsWithRef,
   forwardRef,
+  ForwardRefExoticComponent,
   MutableRefObject,
+  PropsWithoutRef,
   ReactType,
+  RefAttributes,
   useCallback,
   useEffect,
   useImperativeHandle,
@@ -38,9 +41,17 @@ type AnimatedComponentProps<C extends ReactType> = JSX.LibraryManagedAttributes<
   AnimateStyleProp<ComponentPropsWithRef<C>> & ScrollProps
 >
 
-export default function createAnimatedComponent<C extends ReactType>(
+export interface CreateAnimatedComponent<C extends ReactType> {
+  (Component: C): ForwardRefExoticComponent<
+    PropsWithoutRef<AnimatedComponentProps<C>> & RefAttributes<C>
+  >
+}
+
+const createAnimatedComponent: CreateAnimatedComponent<ReactType> = <
+  C extends ReactType
+>(
   Component: C
-) {
+) => {
   const AnimatedComponent = forwardRef<C, AnimatedComponentProps<C>>(
     (props, ref) => {
       const forceUpdate = useForceUpdate()
@@ -89,3 +100,5 @@ export default function createAnimatedComponent<C extends ReactType>(
   )
   return AnimatedComponent
 }
+
+export default createAnimatedComponent

src/modules.d.ts

@@ -0,0 +1,2 @@
+// @types/react-native introduces lots of global conflicts
+declare module 'react-native'

src/targets/konva/index.js → src/targets/konva/index.ts

@@ -1,15 +1,18 @@
-import * as Globals from '../../animated/Globals'
-import Controller from '../../animated/Controller'
+import { ReactType } from 'react'
+import * as konva from 'react-konva'
 import { interpolate } from '../../animated/AnimatedInterpolation'
-import animated from '../../animated/createAnimatedComponent'
-import createInterpolation from '../../shared/interpolation'
+import animated, {
+  CreateAnimatedComponent,
+} from '../../animated/createAnimatedComponent'
+import * as Globals from '../../animated/Globals'
 import colorNames from '../../shared/colors'
 import { config } from '../../shared/constants'
+import createInterpolation from '../../shared/interpolation'
+import { useChain } from '../../useChain'
 import { useSpring } from '../../useSpring'
+import { useSprings } from '../../useSprings'
 import { useTrail } from '../../useTrail'
 import { useTransition } from '../../useTransition'
-import { useChain } from '../../useChain'
-import { useSprings } from '../../useSprings'
 
 Globals.injectDefaultElement('Group')
 Globals.injectInterpolation(createInterpolation)
@@ -18,47 +21,62 @@ Globals.injectApplyAnimatedValues(
   (instance, props) => {
     if (instance.nodeType) {
       instance._applyProps(instance, props)
+      return
     } else return false
   },
   style => style
 )
 
-const konvaElements = [
-  'Layer',
+type KonvaComponents = Pick<
+  typeof konva,
+  {
+    [K in keyof typeof konva]: typeof konva[K] extends ReactType ? K : never
+  }[keyof typeof konva]
+>
+
+const konvaElements: (keyof KonvaComponents)[] = [
+  'Arc',
+  'Arrow',
+  'Circle',
+  'Ellipse',
   'FastLayer',
   'Group',
+  'Image',
   'Label',
-  'Rect',
-  'Circle',
-  'Ellipse',
-  'Wedge',
+  'Layer',
   'Line',
-  'Sprite',
-  'Image',
-  'Text',
-  'TextPath',
-  'Star',
-  'Ring',
-  'Arc',
-  'Tag',
   'Path',
+  'Rect',
   'RegularPolygon',
-  'Arrow',
+  'Ring',
   'Shape',
+  'Sprite',
+  'Star',
+  'Tag',
+  'Text',
+  'TextPath',
   'Transformer',
+  'Wedge',
 ]
 
-Object.assign(
-  animated,
-  konvaElements.reduce(
-    (acc, element) => ({ ...acc, [element]: animated(element) }),
-    {}
-  )
+type AnimatedWithKonvaElements = CreateAnimatedComponent<ReactType> &
+  {
+    [Tag in keyof KonvaComponents]: ReturnType<
+      CreateAnimatedComponent<KonvaComponents[Tag]>
+    >
+  }
+
+const extendedAnimated = konvaElements.reduce(
+  (acc, element) => {
+    acc[element] = animated(element as ReactType)
+    return acc
+  },
+  animated as AnimatedWithKonvaElements
 )
 
 export {
   config,
-  animated,
+  extendedAnimated as animated,
   interpolate,
   Globals,
   useSpring,

src/targets/native/index.js → src/targets/native/index.ts

@@ -1,18 +1,17 @@
-import * as Globals from '../../animated/Globals'
-import Controller from '../../animated/Controller'
+import { StyleSheet, View } from 'react-native'
 import { interpolate } from '../../animated/AnimatedInterpolation'
+import AnimatedStyle from '../../animated/AnimatedStyle'
 import animated from '../../animated/createAnimatedComponent'
+import * as Globals from '../../animated/Globals'
+import colorNames from '../../shared/colors'
 import { config } from '../../shared/constants'
-import AnimatedStyle from '../../animated/AnimatedStyle'
 import createInterpolation from '../../shared/interpolation'
-import colorNames from '../../shared/colors'
-import AnimatedTransform from './AnimatedTransform'
-import { StyleSheet, View } from 'react-native'
+import { useChain } from '../../useChain'
 import { useSpring } from '../../useSpring'
+import { useSprings } from '../../useSprings'
 import { useTrail } from '../../useTrail'
 import { useTransition } from '../../useTransition'
-import { useChain } from '../../useChain'
-import { useSprings } from '../../useSprings'
+import AnimatedTransform from './AnimatedTransform'
 
 Globals.injectDefaultElement(View)
 Globals.injectInterpolation(createInterpolation)
@@ -28,7 +27,7 @@ Globals.injectCreateAnimatedStyle(
 Globals.injectAnimatedApi((node, mounted, forceUpdate) => ({
   setNativeProps: props => {
     const didUpdate = Globals.applyAnimatedValues.fn(node.current, props)
-    if (!didUpdate) mounted.current && forceUpdate()
+    if (!didUpdate) mounted!.current && forceUpdate!()
   },
   getNode: () => node.current,
 }))

src/targets/universal/index.js → src/targets/universal/index.ts

@@ -1,32 +1,37 @@
-import * as Globals from '../../animated/Globals'
-import Controller from '../../animated/Controller'
 import { interpolate } from '../../animated/AnimatedInterpolation'
 import animated from '../../animated/createAnimatedComponent'
+import * as Globals from '../../animated/Globals'
+import Interpolation, {
+  InterpolationConfig,
+} from '../../animated/Interpolation'
 import { config } from '../../shared/constants'
+import { useChain } from '../../useChain'
 import { useSpring } from '../../useSpring'
+import { useSprings } from '../../useSprings'
 import { useTrail } from '../../useTrail'
 import { useTransition } from '../../useTransition'
-import { useChain } from '../../useChain'
-import { useSprings } from '../../useSprings'
 
 // Problem: https://github.com/animatedjs/animated/pull/102
 // Solution: https://stackoverflow.com/questions/638565/parsing-scientific-notation-sensibly/658662
 const stringShapeRegex = /[+\-]?(?:0|[1-9]\d*)(?:\.\d*)?(?:[eE][+\-]?\d+)?/g
-function createInterpolation(config) {
+function createInterpolation(config: InterpolationConfig<number, string>) {
   const outputRange = config.output
-  const outputRanges = outputRange[0].match(stringShapeRegex).map(() => [])
+  const outputRanges: number[][] = outputRange[0]
+    .match(stringShapeRegex)!
+    .map(() => [])
   outputRange.forEach(value => {
     value
-      .match(stringShapeRegex)
+      .match(stringShapeRegex)!
       .forEach((number, i) => outputRanges[i].push(+number))
   })
   const interpolations = outputRange[0]
-    .match(stringShapeRegex)
+    .match(stringShapeRegex)!
     .map((_, i) => Interpolation.create({ ...config, output: outputRanges[i] }))
-  return input => {
+  return (input: number) => {
     let i = 0
-    return outputRange[0].replace(stringShapeRegex, () =>
-      interpolations[i++](input)
+    return outputRange[0].replace(
+      stringShapeRegex,
+      () => interpolations[i++](input) as string
     )
   }
 }

src/targets/web/globals.js → src/targets/web/globals.ts

@@ -1,9 +1,9 @@
-import * as Globals from '../../animated/Globals'
 import AnimatedStyle from '../../animated/AnimatedStyle'
+import * as Globals from '../../animated/Globals'
 import colorNames from '../../shared/colors'
 import createInterpolation from '../../shared/interpolation'
 
-let isUnitlessNumber = {
+let isUnitlessNumber: { [key: string]: true } = {
   animationIterationCount: true,
   borderImageOutset: true,
   borderImageSlice: true,
@@ -48,7 +48,7 @@ let isUnitlessNumber = {
   strokeWidth: true,
 }
 
-const prefixKey = (prefix, key) =>
+const prefixKey = (prefix: string, key: string) =>
   prefix + key.charAt(0).toUpperCase() + key.substring(1)
 const prefixes = ['Webkit', 'Ms', 'Moz', 'O']
 
@@ -57,7 +57,11 @@ isUnitlessNumber = Object.keys(isUnitlessNumber).reduce((acc, prop) => {
   return acc
 }, isUnitlessNumber)
 
-function dangerousStyleValue(name, value, isCustomProperty) {
+function dangerousStyleValue(
+  name: string,
+  value: string | number | boolean | null,
+  isCustomProperty: boolean
+) {
   if (value == null || typeof value === 'boolean' || value === '') return ''
   if (
     !isCustomProperty &&
@@ -70,7 +74,7 @@ function dangerousStyleValue(name, value, isCustomProperty) {
   return ('' + value).trim()
 }
 
-const attributeCache = {}
+const attributeCache: { [key: string]: string } = {}
 Globals.injectCreateAnimatedStyle(style => new AnimatedStyle(style))
 Globals.injectDefaultElement('div')
 Globals.injectInterpolation(createInterpolation)
@@ -116,6 +120,7 @@ Globals.injectApplyAnimatedValues(
         if (typeof instance.getAttribute(dashCase) !== 'undefined')
           instance.setAttribute(dashCase, attributes[name])
       }
+      return
     } else return false
   },
   style => style