react native - Definiții TypeScript pentru proprietatea style a Animated.View

Am un component a cărui interfață Props extinde ViewProps din React Native, adică:

export interface Props extends ViewProps {
  // Custom props
}

În mod natural, acest lucru extinde proprietatea style. Există o avertizare, folosesc Animated.View și am un stil astfel:

style={{
  opacity: animationCharacter.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 1]
  }),
  transform: [
    {
      scale: animationCharacter.interpolate({
        inputRange: [0, 1],
        outputRange: [1.2, 1]
      })
    }
  ]
}}

Cred că apelul interpolate este incompatibil cu tipările de stil din ViewProps, dar nu există un AnimatedViewProps pe care să-l pot extinde.

Există o soluție aici sau va trebui să setez style: any?

Răspuns #1

Începând cu @types/react-native v0.61.9, poți folosi Animated.AnimatedProps:

De exemplu pentru proprietatea style:

interface Props {
  style?: Animated.AnimatedProps<StyleProp<ViewStyle>>,
}

Sau pentru a obține toate proprietățile:

export interface Props extends Animated.AnimatedProps<ViewProps> {
  // Custom props
}

Răspunsul #2

Am creat un fel de tip care transformă orice stiluri de vizualizare în stiluri animabile.

type MaybeAnimated<T> = T | Animated.Value;
type AnimatedScalar = string | number;

type AnimatedStyles<T> = {
  [Key in keyof T]: T[Key] extends AnimatedScalar
    ? MaybeAnimated<T[Key]>
    : T[Key] extends Array<infer U>
    ? Array<AnimatedStyles<U>>
    : AnimatedStyles<T[Key]>
};

type ViewAnimatedStyles = AnimatedStyles<ViewStyle>;

const test: ViewAnimatedStyles = {
  transform: [
    {
      rotateY: new Animated.Value(2),
    }
  ]
}

Primești sugestii automate și valorile animate funcționează.

Limitare: definiția Animated.Value sub capotă este doar o clasă goală, așa că, tehnic, totul se va potrivi cu ea. Deci vei putea să îi atribui o valoare incorectă (de exemplu un șir simplu în loc de un număr)

Citește mai multe despre tipurile inferate și condiționale: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html